小程序获取公众号文章并展示

最近在忙公司的项目，正忙得要死要死的，客户又来了一个傻* 的需求：要在小程序内显示对应公众号的文章列表，点击列表中的某一个跳转到文章详情里面，当时我只想说：xxxxxxxxx，没办法搞起来吧，谁让客户就是傻* 呢！！！

这里要获取的是公众号的数据。先去微信公众号开发文档看一眼：微信公众号开发文档

然后我们找到素材管理-----》素材列表，这里就有我们想要的内容了

---

1、关联公众号

---

关联不关联小程序我是不晓得，反正我的是没有关联，有需要的关联下就好，不过打开文章的话要关联的。步骤如下：

1、登录到对应的公众号后台

2、 输入我们小程序地appId，然后点击下一步

3、 查看密钥和appid

在左侧的开发---------》基本配置里面有

密钥最好保存一下，白名单让后台开发人员设置一下就好，不添加白名单会报错的

---

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字段什么的显示的都是这种格式,我直接一脸懵，就像类似于下面这种的

title: "???????|?????????"

出现这种情况是因为：这个乱码主要是由于微信那边采用的是“ISO-8859-1”编码造成的，让后台人员处理一下变成UTF-8就行

现在再来请求一下看看效果

//获取公众号文章列表
    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)
      })
    },

现在我们看到就已经拿到信息了，渲染出来也是好的，现在就剩下跳转到详情了

这里千万不要用富文本组件或者github上的一个插件：wxParse来渲染content详情，有的地方确实渲染不完全，下面有一个url的字段这个就是详情的链接，直接用一个web-view标签包裹起来放上他的url链接就ok

<web-view src="{{webUrl}}"></web-view>