一、获取微信公众号文章列表
要想获取微信公众号的文章列表，需要登录公众号运行账号，进行一下相关的设置。
1.1微信公众号获取文章列表 api接口文档：
https://developers./doc/offiaccount/Asset_Management/Get_materials_list.html
微信小程序调用实例：(实际开发中，安全起见，应该在后端调用)；
var ACCESS_TOKEN="ACCESS_TOKEN";wx.request({url: `https://api./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./doc/offiaccount/Basic_Information/Get_access_token.html
微信小程序调用实例：(实际开发中，为了安全，应该在后端调用)；
//AppIDconst APPID = "wx918bc111106ee28k"; //不是真是数据//AppSecretconst APPSECRET = "c6f66d48c7f11111d8220c87ed14c3ap"; //不是真是数据wx.request({url: `https://api./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./，登录微信公众号账户，找到如下图，如果没有开发者密码(AppSecret) 选择“启用”，自己设置一下就可以了，(ip白名单作用：调用api接口的电脑ip地址需要再此处添加，否则，api接口调用不成功，会有相关的报错提示)
二、在微信小程序关联文章
做了一个轮播图，点击图片直接进入公众号文章
轮播图 用组件实现，用到图片的url和公众号文章的url。
2.1 将获取到的文章列表整理成可以用的数据
//定义一个数组，用于存放文章对象var articleArr=[];//获取到的文章列表数组var article=res.data.item;for(var i=0;i<article.length;i++){var obj={公众号文章的链接urlurl:article[i].content.news_item[0].url,//公众号文章的封面图片地址urlthumbUrl:article[i].content.news_item[0].thumb_url};articleArr.push(obj);}//console.log(articleArr);that.setData({//将整理好的数据赋值给swiperListswiperList:articleArr});data: {swiperList: []};
2.2 跳转实现
前端main页面：
<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:"",},
放一个点击跳转后的截图
