最近在忙公司的項(xiàng)目，正忙得要死要死的，客戶又來(lái)了一個(gè)傻* 的需求：要在小程序內(nèi)顯示對(duì)應(yīng)公眾號(hào)的文章列表，點(diǎn)擊列表中的某一個(gè)跳轉(zhuǎn)到文章詳情里面，當(dāng)時(shí)我只想說(shuō)：xxxxxxxxx，沒(méi)辦法搞起來(lái)吧，誰(shuí)讓客戶就是傻* 呢?。?！ 

這里要獲取的是公眾號(hào)的數(shù)據(jù)。先去微信公眾號(hào)開發(fā)文檔看一眼：微信公眾號(hào)開發(fā)文檔 

然后我們找到素材管理-----》素材列表，這里就有我們想要的內(nèi)容了

1、關(guān)聯(lián)公眾號(hào)

關(guān)聯(lián)不關(guān)聯(lián)小程序我是不曉得，反正我的是沒(méi)有關(guān)聯(lián)，有需要的關(guān)聯(lián)下就好，不過(guò)打開文章的話要關(guān)聯(lián)的。步驟如下：

1、登錄到對(duì)應(yīng)的公眾號(hào)后臺(tái)

2、 輸入我們小程序地appId，然后點(diǎn)擊下一步

3、 查看密鑰和appid

在左側(cè)的開發(fā)---------》基本配置里面有

密鑰最好保存一下，白名單讓后臺(tái)開發(fā)人員設(shè)置一下就好，不添加白名單會(huì)報(bào)錯(cuò)的

2、獲取access_token

文檔說(shuō)的很清楚，要獲取素材列表，必須要加token，并且不要頻繁的去請(qǐng)求獲取token，
這里是一個(gè)POST請(qǐng)求

我這里的token是請(qǐng)求后臺(tái)接口返回的，appID和密鑰不要在小程序中暴露

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

3、請(qǐng)求api并渲染

第一次請(qǐng)求回來(lái)的時(shí)候都是亂碼，titile、content字段什么的顯示的都是這種格式,我直接一臉懵，就像類似于下面這種的

出現(xiàn)這種情況是因?yàn)椋哼@個(gè)亂碼主要是由于微信那邊采用的是“ISO-8859-1”編碼造成的，讓后臺(tái)人員處理一下變成UTF-8就行

現(xiàn)在再來(lái)請(qǐng)求一下看看效果

//獲取公眾號(hào)文章列表
    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)
      })
    },
復(fù)制代碼

現(xiàn)在我們看到就已經(jīng)拿到信息了，渲染出來(lái)也是好的，現(xiàn)在就剩下跳轉(zhuǎn)到詳情了，跳轉(zhuǎn)到詳情頁(yè)面建議直接用web-view標(biāo)簽包裹，把里面的url傳過(guò)去就好，直接渲染content有的內(nèi)容是富文本，渲染出來(lái)的是亂碼