關于微信jssdk
通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機系統(tǒng)的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗。
如：微信分享
-
原始分享效果
image.png 使用微信JS-SDK的分享效果
準備工作
1. 擁有一個微信公眾平臺的賬號
2. 綁定域名
微信公眾平臺管理界面左側-公眾號設置
3. 開發(fā)相關配置信息獲取
微信公眾平臺管理界面左側-開發(fā)-基本配置
拿到appId和appsecreat以及配置ip白名單。這主要是作用于后端，訪問微信接口生成JS-SDK配置相關信息傳回給前端。
文檔地址
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432
熟悉微信相關api
- 通過wx.config接口注入權限驗證
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時進行調(diào)用.
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表
});
config里所需的appId，timestamp，nonceStr ，signature 需要后端人員提供；
交互過程如下：
我們提供當前網(wǎng)頁的URL，不包含#及其后面部分給后端 ->后端通過公眾號的appID和appsecret獲取access_token,再通過access_token獲取jsapi_ticket-> 生成JS-SDK權限驗證的簽名了。
- 通過ready接口處理成功驗證
// config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關接口，則須把相關接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中
wx.ready(function(){
});
- 通過error接口處理失敗驗證
wx.error(function(res){
// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
});
vue項目接入微信jssdk
還記得在之前的準備工作中，我們就已經(jīng)配置了js安全域名。所以現(xiàn)在只要關心如何在程序中接入jssdk。我著重介紹以vue應用中，如何引入jssdk。
這里我們可以使用vux中的wechatPlugin。不使用vux也沒關系。其實原理很簡單，這個插件的作用主要是提供了commonJS的引入方式，所以我們不需要在 index.html 引入文件。并且將wx對象綁定在了vue原型上和對象屬性上。那么之后任何組件中都可以通過 this.$wechat 訪問到 wx 對象。源碼如下：
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) // 可以直接訪問 wx 對象。
- 注入相關配置信息
main.js
import {wechatUtil} from '@/util'
wechatUtil.setWechatConfig(window.location.href.split('#')[0])
- 組件中使用
<template>
<div>測試微信</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ā)送到朋友圈', // 分享標題
link: location.href.split('#')[0], // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: `${urlUtil.getProjectPath()}/static/img/share.jpg`, // 分享圖標
success: function () {
// 用戶點擊了分享后執(zhí)行的回調(diào)函數(shù)
}
})
},
// 發(fā)送給朋友
bindShareAppMessage () {
this.onMenuShareAppMessage({
title: '發(fā)送給朋友', // 分享標題
desc: '這里是描述信息', // 分享描述
link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: `${urlUtil.getProjectPath()}/static/img/share.jpg`, // 分享圖標
type: '', // 分享類型,music、video或link，不填默認為link
dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空
success: function () {
// 用戶點擊了分享后執(zhí)行的回調(diào)函數(shù)
}
})
}
}
}
</script>
<style scoped>
</style>
wechatMixin
// 定義一個混入對象
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,
/** 注冊微信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í)行這個函數(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 {
// 得到當前項目的訪問路徑
getProjectPath () {
var url = window.self.location.toString()
return url.substring(0, url.indexOf('/', url.indexOf('://', 0) + 3))
}
}
- 常見問題解決方法
1、下圖所示問題需要檢查config中的jsApiListt參數(shù)中是否配置了此api。
{errMsg: "onMenuShareAppMessage:fail, the permission value is offline verifying"}。
2、如果發(fā)現(xiàn)只生效了部分參數(shù)，如分享給朋友時，分享的標題和描述都生效了，只是縮略圖未正常顯示，需要配置的imgUrl地址是否是網(wǎng)絡圖片。
3、安卓端不支持透明的分享圖標，會將圖片透明背景變成黑色，注意檢查圖片。
4、其他錯誤可根據(jù)error中的報錯信息根據(jù)公眾平臺幫助文檔按順序檢查解決。
調(diào)試技巧
-
通過微信提供的測試號中的appid和appsecret進行接口獲取。
如果在項目開發(fā)調(diào)試階段，自己注冊了微信公眾平臺進行調(diào)試，賬戶主體信息是個人的話，賬號沒法進行認證，有很多接口都沒有權限。
image.png
內(nèi)網(wǎng)穿透
因為微信js安全域名需要能夠外網(wǎng)訪問的域名或者ip。所以我們需要將外網(wǎng)域名地址映射到本地，隨時修改代碼看效果。這類的工具很多，網(wǎng)速不一定。如:sunny-ngrok，想要網(wǎng)速快一點可以找運維把公司的某個域名請求轉(zhuǎn)發(fā)到你本機。-
微信開發(fā)者工具
公眾號網(wǎng)頁調(diào)試，開發(fā)者可以調(diào)試微信網(wǎng)頁授權和微信JS-SDK
image.png 移動端調(diào)試工具
由于在移動端無法打開控制臺，所以沒辦法打印調(diào)試console的數(shù)據(jù)和查看網(wǎng)絡請求。可以在index.html中引入vconsole。
<script src="path/to/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
</script>
如果有eslint紅線報錯，可以.eslintignore文件中忽略檢查,配置如下。
/build/
/config/
/dist/
/static/
/*.js
/*.html
vconsole效果如下
源碼
服務器端 (node)：https://github.com/tangyuhui/wechat-node-jssdk
前端（vue）：https://github.com/tangyuhui/wechat-vue-hash-demo
