最近在忙公司的項目，正忙得要死要死的，客戶又來了一個傻* 的需求：要在小程序內(nèi)顯示對應公眾號的文章列表，點擊列表中的某一個跳轉到文章詳情里面，當時我只想說：xxxxxxxxx，沒辦法搞起來吧，誰讓客戶就是傻* 呢！?。?nbsp;

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

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

1、關聯(lián)公眾號

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

1、登錄到對應的公眾號后臺

2、 輸入我們小程序地appId，然后點擊下一步

3、 查看密鑰和appid

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

密鑰最好保存一下，白名單讓后臺開發(fā)人員設置一下就好，不添加白名單會報錯的

2、獲取access_token

文檔說的很清楚，要獲取素材列表，必須要加token，并且不要頻繁的去請求獲取token，
這里是一個POST請求

我這里的token是請求后臺接口返回的，appID和密鑰不要在小程序中暴露

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

3、請求api并渲染

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

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

現(xiàn)在再來請求一下看看效果

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

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