开发前必读：
JS-SDK说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
例子为在vue中使用微信JS-SDK，步骤如下：
一、绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
二、安装/引入文件
插件方式：
npm i jweixin-module -S
引入js文件方式：
在需要调用JS接口的页面引入如下JS文件，（支持https）：https://unpkg.com/jweixin-module@1.6.0/lib/index.js
三、全局引入
挂载到Vue原型
// main.js
import wx from 'jweixin-module'
Vue.prototype.$wx= wx
// 开放标签属于自定义标签，Vue会给予未知标签的警告，可通过配置Vue.config.ignoredElements来忽略 Vue 对开放标签的检查
Vue.config.ignoredElements = ['wx-open-launch-weapp']
四、配置（包括js-sdk和开放标签）
与使用 JS-SDK 配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个 url 仅需调用一次）。开放标签的申请和 JS 接口的申请相互独立，因此是可以同时申请的。
mounted() {
this.createJsapiSignature()
}
createJsapiSignature() {
// 根据接口返回config信息
this.$axios
.createJsapiSignature({
url: window.location.href.split('#')[0] // 注意：url必须为在安全域名下的页面全路径，
//hash之前的部分，否则会出现获取不到api权限的问题
}).then(res => {
let result = res.data.data
this.$wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，
//可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: result.appId, // 必填，公众号的唯一标识
timestamp: result.timestamp, // 必填，生成签名的时间戳
nonceStr: result.nonceStr, // 必填，生成签名的随机串
signature: result.signature, // 必填，签名
jsApiList: ['chooseWXPay','chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'] // h5跳小程序
})
this.$wx.ready(() => {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
// config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
// 则须把相关接口放在ready函数中调用来确保正确执行。
// 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
})
this.$wx.error(function (res1) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
//也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
}).catch(err => {
console.log("err", err)
})
},
五、使用
配置成功之后，就可以使用相关的api了。例子为微信支付。
handlePayNow() {
let that = this
this.$axios.recharge({ // 调接口获取参数
payChannel: 2
}).then(res => {
if(res.data.code==404) {
this.$toast(res.data.message)
}
else if(res.status==200) {
let result = res.data.data
let beanOrderId = result.beanOrderId
// 是否生成订单
this.beanOrderId = result.beanOrderId
if (result.result_code === "SUCCESS") {
this.$wx.chooseWXPay({ // 调起微信支付
timestamp: result.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: result.nonce_str, // 支付签名随机串，不长于 32 位
package: result.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
signType: 'HMAC-SHA256', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: result.sign, // 支付签名
success: function (res) {
// 支付成功后的回调函数
that.$toast('支付成功');
},
cancel: function(res) {
// 取消付款
if(res.errMsg && res.errMsg === 'chooseWXPay:cancel') {
that.$axios.cancel({ id: beanOrderId }).then((res) => {
if(res.data.status===200) {
that.$toast('您已取消支付');
}
})
}
this.beanOrderId = ''
},
fail: function() {
that.$toast('支付失败');
}
});
}
}
}
},
网友评论