Recently in the busy company’s project, is busy to die of, the customer and a silly * demand: to display in the small program corresponding to the public number of the article list, click a list of jump to the details of the article inside, AT that time I just want to say: XXXXXXXXX, no way to get up, who let the customer is silly *!!

What we want to obtain here is the data of the public number. First go to the wechat public number development document: wechat public number development document

Then we go to the story management —– story list, and here we have what we want

1. Associated public accounts

Association is not associated with small procedures I do not know, anyway, I am not associated, there is a need for the association, but open the article to be associated. The steps are as follows:

1. Log in to the background of the corresponding public account

2, enter our applet appId, and click Next

3. View the key and appID

You can find it in basic configuration at ——— on the left

The key had better save, whitelist let background developers set it up, do not add whitelist will report an error

2. Obtain access_token

The document makes it very clear that to get a list of stories, a token must be added, and do not frequently request the token, here is a POST request

The token here is returned by the request background interface, appID and key should not be exposed in the applet

https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token= tokenCopy the code

3. Request the API and render

The first time THE request came back, it was all garbled, titile, content, etc., and I was confused, like the following

The reason for this is that this garble is mainly caused by the “ISO-8859-1” code used by wechat. Let the background staff deal with it and turn it into UTF-8

Now let’s do the request again and see what happens

/ / get the public article list 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) }) },Copy the code

Now we have the information we see, render it is good, now it is left to jump to the details, jump to the details page, it is recommended to directly use the web-view tag wrap, pass the URL inside, render the content directly some of the content is rich text, render it is garbled