微信小程序点击公众号文章图片跳转公众号文章

一、获取微信公众号文章列表

要想获取微信公众号的文章列表，需要登录公众号运行账号，进行一下相关的设置。

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:"",
  },

转载