Bagaimana untuk menyediakan penyesuaian WeChat dalam vue

Untuk membangunkan akaun awam WeChat dalam projek Vue, tetapan tersuai WeChat diperlukan untuk menyesuaikan diri dengan antara muka dan fungsi akaun awam WeChat. Artikel ini akan memperkenalkan cara untuk menyesuaikan tetapan WeChat dalam projek Vue untuk menjadikan program anda lebih sesuai untuk pembangunan akaun awam WeChat.

1 Sediakan WeChat JS SDK

Pertama, anda perlu mendaftar akaun rasmi pada platform awam WeChat dan mendapatkan pengecam unik akaun rasmi (AppID) dan kunci rahsia (AppSecret) . Kemudian perkenalkan antara muka WeChat JS SDK ke dalam index.html projek Vue.

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

Buat fail wechat.js global dalam projek Vue dan tulis kod konfigurasi:

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
}

Terangkan kod:

• baris 1-2: Pengenalan WeChat JS SDK.
• baris 4-14: Cipta objek weixinConfig, termasuk AppID akaun rasmi, cap waktu untuk menjana tandatangan, rentetan rawak untuk menjana tandatangan, tandatangan dan senarai antara muka JS yang perlu digunakan.
• baris 16-28: Cipta fungsi getConfig, dan gunakan kaedah axios.post dalam fungsi untuk memulakan permintaan kepada pelayan bahagian belakang untuk mendapatkan maklumat konfigurasi tandatangan akaun rasmi. Selepas mendapatkan maklumat konfigurasi, hubungi kaedah wx.config untuk mengkonfigurasi WeChat.
• baris 30-35: Kaedah getConfig didedahkan kepada dunia luar untuk dipanggil modul lain untuk mendapatkan maklumat konfigurasi WeChat JS SDK.

2. Panggilan antara muka

Kaedah memanggil antara muka WeChat dalam projek Vue pada asasnya sama dengan kaedah memanggil dalam halaman web biasa Kitaran hayat Vue dan penyelarasan mekanisme acara Hanya masa yang baik.

Ambil perkongsian ke WeChat Moments dalam projek Vue sebagai contoh:

Dalam komponen Vue, gunakan kitaran hayat yang dicipta untuk memanggil kaedah getConfig untuk mengkonfigurasi WeChat JS SDK untuk bersedia untuk digunakan antara muka 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('取消分享');
        }
      });
    }
  }
}

Terangkan kod:

• baris 1-2: Perkenalkan fail konfigurasi tersuai WeChat wechatConfig.
• baris 6-15: Buat objek data, termasuk tajuk kongsi, perihalan, pautan dan ikon.
• baris 17-23: Menggunakan kitaran hayat yang dicipta, apabila tika Vue dibuat, kaedah getConfig dipanggil secara automatik untuk konfigurasi WeChat JS SDK. Selepas konfigurasi selesai, gunakan kaedah wx.checkJsApi untuk menyemak sama ada antara muka JS yang diperlukan tersedia.
• baris 26-34: Cipta kaedah wxShareFriendsCircle dan daftarkannya pada acara klik dalam komponen Vue. Apabila pengguna membuka halaman dan mengklik butang kongsi, kaedah wx.onMenuShareTimeline dipanggil untuk melengkapkan operasi berkaitan perkongsian.

Ringkasan:

Artikel ini memperkenalkan cara menyediakan penyesuaian WeChat dalam projek Vue untuk menyesuaikan diri dengan antara muka dan fungsi akaun rasmi WeChat. Kaedah termasuk menyediakan WeChat JS SDK, memanggil antara muka WeChat, dsb. Saya harap artikel ini dapat memberikan bantuan rujukan untuk orang baru.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan penyesuaian WeChat dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!