一、获取微信公众号文章列表
要想获取微信公众号的文章列表,需要登录公众号运行账号,进行一下相关的设置。
1.1微信公众号获取文章列表 api接口文档:
https://developers.weixin.qq.com/doc/offiaccount/Asset_Management/Get_materials_list.html
微信小程序调用实例:(实际开发中,安全起见,应该在后端调用);
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如何获取ACCESS_TOKEN(公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token)值?
微信公众号获取ACCESS_TOKEN api接口文档:
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
微信小程序调用实例:(实际开发中,为了安全,应该在后端调用);
//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);
}
})
APPID 、APPSECRET 如何获取?
进入https://mp.weixin.qq.com/,登录微信公众号账户,找到如下图,如果没有开发者密码(AppSecret) 选择“启用”,自己设置一下就可以了,(ip白名单作用:调用api接口的电脑ip地址需要再此处添加,否则,api接口调用不成功,会有相关的报错提示)
二、在微信小程序关联文章
做了一个轮播图,点击图片直接进入公众号文章
2.1 将获取到的文章列表整理成可以用的数据
//定义一个数组,用于存放文章对象
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 跳转实现
<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>
再建一个weixin页面,就放一个web-view,承载网页的容器,会自动铺满整个小程序页面
<web-view src="{{article}}" bindmessage=""></web-view>
然后就是main页面和weixin页面之间进行传值。
main页面js(传值):
//点击轮播图事件
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页面js(接收传值):
//再生命周期函数onLoad里面接收
onLoad: function (options) {
this.setData({
//解码,赋值
article:decodeURIComponent(options.url)
});
},
data: {
article:"",
},