Апплет WeChat Нажмите на изображение статьи официальной учетной записи, чтобы перейти к статье официальной учетной записи.

1. Получите список статей официального аккаунта WeChat.

Чтобы получить список статей официальной учетной записи WeChat, вам необходимо войти в официальную учетную запись, чтобы запустить учетную запись и выполнить соответствующие настройки.

1.1 Официальный аккаунт WeChat для получения документа интерфейса API со списком статей:

https://developers.weixin.qq.com/doc/offiaccount/Asset_Management/Get_materials_list.html

Пример вызова апплета WeChat: (в реальной разработке из соображений безопасности его следует вызывать на бэкэнде);

Пример внутреннего вызова

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 требуется, когда официальная учетная запись вызывает каждый интерфейс)?

Официальная учетная запись WeChat для получения документа интерфейса API ACCESS_TOKEN:
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
Пример вызова апплета WeChat: бэкэнд) ;

//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/ , авторизуемся в паблике WeChat, находим следующую картинку, если нет пароля разработчика (AppSecret), выбираем «Включить», и ставим сами, (ip whitelist функция: сюда необходимо добавить IP-адрес компьютера, который вызывает API-интерфейс, в противном случае, если вызов API-интерфейса завершится неудачно, появится соответствующее сообщение об ошибке)

2. Похожие статьи в мини-программах WeChat

Сделал карусельную картинку, нажмите на картинку, чтобы перейти прямо к официальной статье аккаунта

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 src="{
    
    {article}}" bindmessage=""></web-view>

Затем происходит передача стоимости между главной страницей и страницей Weixin.
Главная страница 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:"",
  },

воспроизведенный