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 が必要です) の値を取得するにはどうすればよいですか?

ACCESS_TOKEN API インターフェイスを取得するための WeChat 公式アカウント:
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 ホワイトリスト)機能: API インターフェイスを呼び出すコンピューターの IP アドレスをここに追加する必要があります。追加しないと、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 ビューを配置すると、Web ページをホストするコンテナがアプレットページ全体に自動的に埋め込まれます。

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

再現された