vue で WeChat カスタマイズを設定する方法

Vue プロジェクトで WeChat 公開アカウントを開発するには、WeChat 公開アカウントのインターフェイスと機能に適応させるために WeChat カスタム設定が必要です。この記事では、プログラムを WeChat 公開アカウントの開発により適したものにするために、Vue プロジェクトの WeChat 設定をカスタマイズする方法を紹介します。

1. WeChat JS SDK のセットアップ

まず、WeChat パブリック プラットフォームに公式アカウントを登録し、公式アカウントの一意の ID (AppID) と秘密キー (AppSecret) を取得する必要があります。 。次に、WeChat JS SDK インターフェイスを Vue プロジェクトのindex.html に導入します。

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

Vue プロジェクトでグローバル wechat.js ファイルを作成し、構成コードを記述します:

import wx from 'weixin-js-sdk';

const wechatConfig = {
  debug: false, // 调试模式，设置为true后会进行微信调试 
  appId: '', // 公众号AppID, 必填 
  timestamp: '', // 生成签名的时间戳，必填 
  nonceStr: '', // 生成签名的随机串，必填 
  signature: '', // 签名，必填 
  jsApiList: [] // 必填，需要使用的JS接口列表 
};

/**
 * 获取微信配置
 * @return {Promise}
*/
function getConfig() {
  return new Promise((resolve, reject) => {
    const url = window.location.href.split('#')[0];
    const data = {
      url: url
    };

    axios.post(YOUR_SERVER_API, data).then((result) => {
      const data = result.data;
      wx.config({
        beta: true,
        debug: wechatConfig.debug,
        appId: wechatConfig.appId,
        timestamp: wechatConfig.timestamp,
        nonceStr: wechatConfig.nonceStr,
        signature: wechatConfig.signature,
        jsApiList: wechatConfig.jsApiList
      });
      wx.ready(() => {
        resolve();
      });
    }).catch(() => {
      reject();
    });
  });
}

export default {
  getConfig
}

コードの説明:

• 1 ～ 2 行目: はじめにWeChat JS SDK。
• 行 4-14: 公式アカウントの AppID、署名を生成するためのタイムスタンプ、署名を生成するためのランダムな文字列、署名、および必要な JS インターフェイスのリストを含むオブジェクト weixinConfig を作成します。利用される。
• 行 16-28: getConfig 関数を作成し、関数内で axios.post メソッドを使用してバックエンド サーバーへのリクエストを開始し、公式アカウントの署名構成情報を取得します。構成情報を取得したら、wx.config メソッドを呼び出して WeChat を構成します。
• 行 30-35: getConfig メソッドは、他のモジュールが WeChat JS SDK 構成情報を取得するために呼び出すために外部に公開されます。

2. インターフェイス呼び出し

Vue プロジェクトで WeChat インターフェイスを呼び出す方法は、基本的に通常の Web ページでの呼び出し方法と同じです。ライフサイクルとイベントメカニズムの調整。ちょうどいいタイミングです。

Vue プロジェクトで WeChat Moments への共有を例に挙げます。

Vue コンポーネントで、作成されたライフサイクルを使用して getConfig メソッドを呼び出し、WeChat JS SDK を構成して使用の準備をします。 WeChatインターフェース。

import wechatConfig from 'wechatConfig';

export default {
  data() {
    return {
      shareData: {
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接
        imgUrl: '' // 分享图标
      }
    };
  },
  created() {
    wechatConfig.getConfig().then(() => {
      wx.checkJsApi({ 
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'], // 需要检测的JS接口列表
        success: (res) => { 
          console.log(res.errMsg) // 验证成功后的操作
        } 
      });
    });
  },
  methods: {
    wxShareFriendsCircle() {
      wx.onMenuShareTimeline({
        title: this.shareData.title, // 分享标题 
        link: this.shareData.link, // 分享链接 
        imgUrl: this.shareData.imgUrl, // 分享图标 
        success: () => {
          console.log('分享成功');
        },
        cancel: () => {
          console.log('取消分享');
        }
      });
    }
  }
}

コードの説明:

• 1 ～ 2 行目: WeChat カスタム構成ファイル wechatConfig を紹介します。
• 行 6-15: 共有タイトル、説明、リンク、アイコンを含むデータ オブジェクトを作成します。
• 行 17-23: 作成されたライフサイクルを使用して、Vue インスタンスが作成されると、WeChat JS SDK 構成のために getConfig メソッドが自動的に呼び出されます。構成が完了したら、wx.checkJsApi メソッドを使用して、必要な JS インターフェースが使用可能かどうかを確認します。
• 行 26-34: wxShareFriendsCircle メソッドを作成し、Vue コンポーネントのクリック イベントに登録します。ユーザーがページを開いて共有ボタンをクリックすると、wx.onMenuShareTimeline メソッドが呼び出され、共有関連の操作が完了します。

概要:

この記事では、Vue プロジェクトで WeChat カスタマイズをセットアップして、WeChat 公式アカウントのインターフェイスと機能に適応させる方法を紹介します。方法には、WeChat JS SDK のセットアップ、WeChat インターフェイスの呼び出しなどが含まれます。この記事が初心者の方の参考になれば幸いです。

以上がvue で WeChat カスタマイズを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。