最近在(zài)忙公司的(de)項目，正忙得要(yào / yāo)死要(yào / yāo)死的(de)，客戶又來(lái)了(le／liǎo)一個(gè)傻* 的(de)需求：要(yào / yāo)在(zài)小程序内顯示對應公衆号的(de)文章列表，點擊列表中的(de)某一個(gè)跳轉到(dào)文章詳情裏面，當時(shí)我隻想說(shuō)：xxxxxxxxx，沒辦法搞起來(lái)吧，誰讓客戶就(jiù)是(shì)傻* 呢！！！ 

這(zhè)裏要(yào / yāo)獲取的(de)是(shì)公衆号的(de)數據。先去微信公衆号開發文檔看一眼：微信公衆号開發文檔 

然後我們找到(dào)素材管理-----》素材列表，這(zhè)裏就(jiù)有我們想要(yào / yāo)的(de)内容了(le／liǎo)

1、關聯公衆号

關聯不(bù)關聯小程序我是(shì)不(bù)曉得，反正我的(de)是(shì)沒有關聯，有需要(yào / yāo)的(de)關聯下就(jiù)好，不(bù)過打開文章的(de)話要(yào / yāo)關聯的(de)。步驟如下：

1、登錄到(dào)對應的(de)公衆号後台

2、 輸入我們小程序地(dì / de)appId，然後點擊下一步

3、 查看密鑰和(hé / huò)appid

在(zài)左側的(de)開發---------》基本配置裏面有

密鑰最好保存一下，白名單讓後台開發人(rén)員設置一下就(jiù)好，不(bù)添加白名單會報錯的(de)

2、獲取access_token

文檔說(shuō)的(de)很清楚，要(yào / yāo)獲取素材列表，必須要(yào / yāo)加token，并且不(bù)要(yào / yāo)頻繁的(de)去請求獲取token，
這(zhè)裏是(shì)一個(gè)POST請求

我這(zhè)裏的(de)token是(shì)請求後台接口返回的(de)，appID和(hé / huò)密鑰不(bù)要(yào / yāo)在(zài)小程序中暴露

https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token=獲得的(de)token
複制代碼

3、請求api并渲染

第一次請求回來(lái)的(de)時(shí)候都是(shì)亂碼，titile、content字段什麽的(de)顯示的(de)都是(shì)這(zhè)種格式,我直接一臉懵，就(jiù)像類似于(yú)下面這(zhè)種的(de)

出(chū)現這(zhè)種情況是(shì)因爲(wéi / wèi)：這(zhè)個(gè)亂碼主要(yào / yāo)是(shì)由于(yú)微信那邊采用的(de)是(shì)“ISO-8859-1”編碼造成的(de)，讓後台人(rén)員處理一下變成UTF-8就(jiù)行

現在(zài)再來(lái)請求一下看看效果

//獲取公衆号文章列表
    getArticleList(){
      Util.httpRequest({
        url: `http://42.193.4.236:9002/wx/getContentList`,
        data: {
          "type": 'news',
          "offset": 0,
          "count": 20
        }
      }).then(res => {
        if (res.statusCode === 200) {
          let list = res.data.item
          this.setData({
            articleList: list
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
複制代碼

現在(zài)我們看到(dào)就(jiù)已經拿到(dào)信息了(le／liǎo)，渲染出(chū)來(lái)也(yě)是(shì)好的(de)，現在(zài)就(jiù)剩下跳轉到(dào)詳情了(le／liǎo)，跳轉到(dào)詳情頁面建議直接用web-view标簽包裹，把裏面的(de)url傳過去就(jiù)好，直接渲染content有的(de)内容是(shì)富文本，渲染出(chū)來(lái)的(de)是(shì)亂碼