Vue 應(yīng)用中使用微信 jssdk

關(guān)于微信jssdk

通過(guò)使用微信JS-SDK，網(wǎng)頁(yè)開(kāi)發(fā)者可借助微信高效地使用拍照、選圖、語(yǔ)音、位置等手機(jī)系統(tǒng)的能力，同時(shí)可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶(hù)提供更優(yōu)質(zhì)的網(wǎng)頁(yè)體驗(yàn)。

如：微信分享

  • 原始分享效果


    image.png

  • 使用微信JS-SDK的分享效果

image.png
準(zhǔn)備工作

1. 擁有一個(gè)微信公眾平臺(tái)的賬號(hào)

2. 綁定域名
微信公眾平臺(tái)管理界面左側(cè)-公眾號(hào)設(shè)置

image.png

3. 開(kāi)發(fā)相關(guān)配置信息獲取
微信公眾平臺(tái)管理界面左側(cè)-開(kāi)發(fā)-基本配置
image.png

image.png

拿到appId和appsecreat以及配置ip白名單。這主要是作用于后端，訪問(wèn)微信接口生成JS-SDK配置相關(guān)信息傳回給前端。

文檔地址

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432

image.png

熟悉微信相關(guān)api

  • 通過(guò)wx.config接口注入權(quán)限驗(yàn)證
    所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用.
wx.config({
    debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
    appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: , // 必填，生成簽名的時(shí)間戳
    nonceStr: '', // 必填，生成簽名的隨機(jī)串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

config里所需的appId，timestamp，nonceStr ，signature 需要后端人員提供；

交互過(guò)程如下：
我們提供當(dāng)前網(wǎng)頁(yè)的URL，不包含#及其后面部分給后端 ->后端通過(guò)公眾號(hào)的appID和appsecret獲取access_token,再通過(guò)access_token獲取jsapi_ticket-> 生成JS-SDK權(quán)限驗(yàn)證的簽名了。

image.png

  • 通過(guò)ready接口處理成功驗(yàn)證
  // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶(hù)端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶(hù)觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中
wx.ready(function(){
});
  • 通過(guò)error接口處理失敗驗(yàn)證
wx.error(function(res){
    // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
});
vue項(xiàng)目接入微信jssdk

還記得在之前的準(zhǔn)備工作中，我們就已經(jīng)配置了js安全域名。所以現(xiàn)在只要關(guān)心如何在程序中接入jssdk。我著重介紹以vue應(yīng)用中，如何引入jssdk。

這里我們可以使用vux中的wechatPlugin。不使用vux也沒(méi)關(guān)系。其實(shí)原理很簡(jiǎn)單，這個(gè)插件的作用主要是提供了commonJS的引入方式，所以我們不需要在 index.html 引入文件。并且將wx對(duì)象綁定在了vue原型上和對(duì)象屬性上。那么之后任何組件中都可以通過(guò) this.$wechat 訪問(wèn)到 wx 對(duì)象。源碼如下：

const wx = require('./1.3.2.js').wx

const plugin = {
  install (Vue) {
    Vue.prototype.$wechat = wx
    Vue.wechat = wx
  },
  $wechat: wx
}

export default plugin
export const install = plugin.install

下面正式介紹如何使用

  • 在 main.js 中全局引入：
import { WechatPlugin } from 'vux'
Vue.use(WechatPlugin)
console.log(Vue.wechat) // 可以直接訪問(wèn) wx 對(duì)象。
  • 注入相關(guān)配置信息

main.js

import {wechatUtil} from '@/util'
wechatUtil.setWechatConfig(window.location.href.split('#')[0])
  • 組件中使用
 <template>
     <div>測(cè)試微信</div>
</template>

<script>
import {wechatMixin} from '@/mixins'
import {urlUtil} from '@/util'
export default {
  name: '',

  mixins: [wechatMixin],

  components: {},

  props: {},

  data () {
    return {

    }
  },

  computed: {},

  watch: {},

  created () {},

  mounted () {
    this.bindShareTimeLine()
    this.bindShareAppMessage()
  },

  destroyed () {},

  methods: {
    // 微信朋友圈
    bindShareTimeLine () {
      this.onMenuShareTimeline({
        title: '發(fā)送到朋友圈', // 分享標(biāo)題
        link: location.href.split('#')[0], // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
        imgUrl: `${urlUtil.getProjectPath()}/static/img/share.jpg`, // 分享圖標(biāo)
        success: function () {
    // 用戶(hù)點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
        }
      })
    },
    // 發(fā)送給朋友
    bindShareAppMessage () {
      this.onMenuShareAppMessage({
        title: '發(fā)送給朋友', // 分享標(biāo)題
        desc: '這里是描述信息', // 分享描述
        link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
        imgUrl: `${urlUtil.getProjectPath()}/static/img/share.jpg`, // 分享圖標(biāo)
        type: '', // 分享類(lèi)型,music、video或link，不填默認(rèn)為link
        dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
        success: function () {
// 用戶(hù)點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>

wechatMixin

// 定義一個(gè)混入對(duì)象
import {wechatUtil} from '@/util'

export let wechatMixin = {
 methods: {
   onMenuShareTimeline: function (config) {
     wechatUtil.shareTimeline(config)
   },
   onMenuShareAppMessage: function (config) {
     wechatUtil.shareAppMessage(config)
   }

 }
}

wechatUtil.js


import * as api from '@/api'
import Vue from 'vue'

export default {
  isReady: false,
  /** 注冊(cè)微信jssdk ready和error事件 */
  bindWechatEvent (readyEvent, errorEvent) {
    this.registerReadyEvent(readyEvent)
    this.registerErrorEvent(errorEvent)
  },
  /** ready事件 */
  registerReadyEvent (fn) {
    let _this = this
    Vue.wechat.ready(function () {
      _this.isReady = true
      fn()
    })
  },
  /** error事件 */
  registerErrorEvent (fn) {
    Vue.wechat.error(fn)
  },
  /** wechat jssdk接入配置 */
  setWechatConfig (url, apiList) {
    api.getSignature(url).then(({data}) => {
      Vue.wechat.config({...data, ...{jsApiList: apiList}})
    }).catch(err => {
      console.log(err)
    })
  },
     /** ready事件前置處理判斷,確保函數(shù)都在ready中執(zhí)行 */
  readyPreProcess: function (fn) {
    if (this.isReady) {
      fn()
    } else {
        // 等ready方法執(zhí)行后再執(zhí)行這個(gè)函數(shù)
      Vue.wechat.ready(function () {
        fn()
      })
    }
  },
  // 發(fā)送給朋友圈
  shareTimeline (config) {
    this.readyPreProcess(() => {
      Vue.wechat.onMenuShareTimeline(config)
    })
  },
  // 發(fā)送給朋友
  shareAppMessage (config) {
    this.readyPreProcess(() => {
      Vue.wechat.onMenuShareAppMessage(config)
    })
  }

}

urlUtil


export default {
  // 得到當(dāng)前項(xiàng)目的訪問(wèn)路徑
  getProjectPath () {
    var url = window.self.location.toString()
    return url.substring(0, url.indexOf('/', url.indexOf('://', 0) + 3))
  }
}
  • 常見(jiàn)問(wèn)題解決方法
    1、下圖所示問(wèn)題需要檢查config中的jsApiListt參數(shù)中是否配置了此api。
{errMsg: "onMenuShareAppMessage:fail, the permission value is offline verifying"}。

2、如果發(fā)現(xiàn)只生效了部分參數(shù)，如分享給朋友時(shí)，分享的標(biāo)題和描述都生效了，只是縮略圖未正常顯示，需要配置的imgUrl地址是否是網(wǎng)絡(luò)圖片。
3、安卓端不支持透明的分享圖標(biāo)，會(huì)將圖片透明背景變成黑色，注意檢查圖片。
4、其他錯(cuò)誤可根據(jù)error中的報(bào)錯(cuò)信息根據(jù)公眾平臺(tái)幫助文檔按順序檢查解決。

調(diào)試技巧

  • 通過(guò)微信提供的測(cè)試號(hào)中的appid和appsecret進(jìn)行接口獲取。
    如果在項(xiàng)目開(kāi)發(fā)調(diào)試階段，自己注冊(cè)了微信公眾平臺(tái)進(jìn)行調(diào)試，賬戶(hù)主體信息是個(gè)人的話，賬號(hào)沒(méi)法進(jìn)行認(rèn)證，有很多接口都沒(méi)有權(quán)限。


    image.png
image.png

  • 內(nèi)網(wǎng)穿透
    因?yàn)槲⑿舑s安全域名需要能夠外網(wǎng)訪問(wèn)的域名或者ip。所以我們需要將外網(wǎng)域名地址映射到本地，隨時(shí)修改代碼看效果。這類(lèi)的工具很多，網(wǎng)速不一定。如:sunny-ngrok，想要網(wǎng)速快一點(diǎn)可以找運(yùn)維把公司的某個(gè)域名請(qǐng)求轉(zhuǎn)發(fā)到你本機(jī)。

  • 微信開(kāi)發(fā)者工具
    公眾號(hào)網(wǎng)頁(yè)調(diào)試，開(kāi)發(fā)者可以調(diào)試微信網(wǎng)頁(yè)授權(quán)和微信JS-SDK


    image.png

  • 移動(dòng)端調(diào)試工具
    由于在移動(dòng)端無(wú)法打開(kāi)控制臺(tái)，所以沒(méi)辦法打印調(diào)試console的數(shù)據(jù)和查看網(wǎng)絡(luò)請(qǐng)求?？梢栽趇ndex.html中引入vconsole。

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
</script>

如果有eslint紅線報(bào)錯(cuò)，可以.eslintignore文件中忽略檢查,配置如下。

/build/
/config/
/dist/
/static/
/*.js
/*.html

vconsole效果如下

image.png

源碼

服務(wù)器端 (node)：https://github.com/tangyuhui/wechat-node-jssdk
前端（vue）：https://github.com/tangyuhui/wechat-vue-hash-demo

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容