1. Obtain the list of WeChat official account articles
To obtain the article list of the WeChat official account, you need to log in to the official account to run the account and perform related settings.
1.1 WeChat official account to obtain the article list api interface document:
https://developers.weixin.qq.com/doc/offiaccount/Asset_Management/Get_materials_list.html
WeChat applet call example: (in actual development, for safety reasons, it should be called at the backend);
var ACCESS_TOKEN="ACCESS_TOKEN";
wx.request({
url: `https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token=${ACCESS_TOKEN}`,
method: "POST",
data: JSON.stringify(data),
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res);
},
error: function (res) {
console.log(res);
}
})
1.2 How to obtain the value of ACCESS_TOKEN (the globally unique interface call credential of the official account, access_token is required when the official account calls each interface)?
WeChat official account to obtain ACCESS_TOKEN api interface document:
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
WeChat applet call example: (In actual development, for safety, it should be called at the backend) ;
//AppID
const APPID = "wx918bc111106ee28k"; //不是真是数据
//AppSecret
const APPSECRET = "c6f66d48c7f11111d8220c87ed14c3ap"; //不是真是数据
wx.request({
url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`,
method: "GET",
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res);
},
error: function (res) {
console.log(res.data);
}
})
How to obtain APPID and APPSECRET?
Enter https://mp.weixin.qq.com/ , log in to the WeChat public account, find the following picture, if there is no developer password (AppSecret), select "Enable", and set it yourself, (ip whitelist function: The IP address of the computer that calls the api interface needs to be added here, otherwise, if the api interface call fails, there will be a related error message)
2. Related Articles in WeChat Mini Programs
Made a carousel picture, click on the picture to go directly to the official account article
2.1 Organize the obtained article list into usable data
//定义一个数组，用于存放文章对象
var articleArr=[];
//获取到的文章列表数组
var article=res.data.item;
for(var i=0;i<article.length;i++)
{
var obj={
公众号文章的链接url
url:article[i].content.news_item[0].url,
//公众号文章的封面图片地址url
thumbUrl:article[i].content.news_item[0].thumb_url
};
articleArr.push(obj);
}
//console.log(articleArr);
that.setData({
//将整理好的数据赋值给swiperList
swiperList:articleArr
});
data: {
swiperList: []
};
2.2 Jump implementation
<swiper autoplay="true" interval="1000" duration="500" indicator-dots="true" indicator-color="#C7D4E0" indicator-active-color="#0F59A4">
<view wx:for="{
{swiperList}}" wx:key="url" wx:for-item="data">
<swiper-item>
//设置一下图片高宽，默认的是:320px、高度240px
<image bindtap="entenArt" class="top-image" mode="aspectFill" src="{
{data.thumbUrl}}"
data-index="{
{index}}" data-value="{
{data.value}}"></image>
</swiper-item>
</view>
</swiper>
Create another weixin page, put a web-view, and the container that hosts the webpage will automatically fill the entire applet page
<web-view src="{
{article}}" bindmessage=""></web-view>
Then there is the value transfer between the main page and the weixin page.
Main page js (pass value):
//点击轮播图事件
entenArt: function (e) {
var index=e.currentTarget.dataset.index;
var url=this.data.swiperList[index].url;
wx.navigateTo({
//url太长且会被截取，编码一下，避免这种情况
url:`../weixin/index?url=${
encodeURIComponent(url)}`,
});
},
Weixin page js (receiving and passing values):
//再生命周期函数onLoad里面接收
onLoad: function (options) {
this.setData({
//解码，赋值
article:decodeURIComponent(options.url)
});
},
data: {
article:"",
},