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

我心飞翔 分类:javascript

最近在忙公司的项目,正忙得要死要死的,客户又来了一个傻* 的需求:要在小程序内显示对应公众号的文章列表,点击列表中的某一个跳转到文章详情里面,当时我只想说: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字段什么的显示的都是这种格式,我直接一脸懵,就像类似于下面这种的

在这里插入图片描述

在这里插入图片描述

出现这种情况是因为:这个乱码主要是由于微信那边采用的是“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)
      })
    },
 

现在我们看到就已经拿到信息了,渲染出来也是好的,现在就剩下跳转到详情了,跳转到详情页面建议直接用web-view标签包裹,把里面的url传过去就好,直接渲染content有的内容是富文本,渲染出来的是乱码

在这里插入图片描述

在这里插入图片描述

回复

我来回复
  • 暂无回复内容