一.简介
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题。微信JS-SDK是微信公众号平台 面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
二.JSSDK使用步骤
1.绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
2.引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
或者一步到位使用npm包安装
3.通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
我这里是采用了vuex组件来统一管理。
store.js中的mutations与actions分别如下面两张图所示
// URLconfig接口注入权限验证配置(接口调用前一个页面必须要来一次这个)
INITWX (state, params) {
wx.config({
debug: state.wx_debug,
appId: params.appId,
timestamp: params.timestamp,
nonceStr: params.nonceStr,
signature: params.signature,
jsApiList: params.jsApiList
})
wx.ready(function () {
alert('wx config ok')
state.wx_configFlag = true
})
wx.error(function (res) {
alert('wx error ok')
state.wx_configFlag = false
})
},
getWeChatSignature ({commit}, desurl) {
back.jsSdkGet(desurl).then((response) => {
console.log(response)
var initConfigVal = {}
initConfigVal.appId = 'wx2e8318a57a727f36'
initConfigVal.timestamp = response.data.timestamp
initConfigVal.nonceStr = response.data.nonceStr
initConfigVal.signature = response.data.signature
// jsApiList可以写死,也可以外部传参进来******是通过push么?
initConfigVal.jsApiList = ['getLocation', 'chooseImage', 'uploadImage', 'downloadImage', 'getLocalImgData']
commit('INITWX', initConfigVal)
})
},
4.通过ready接口处理成功验证
wx.ready(function () {
alert('wx config ok')
state.wx_configFlag = true
})
5.通过error接口处理失败验证
wx.error(function (res) {
alert('wx error ok')
state.wx_configFlag = false
})
三.以调用图像接口为例简单说明
1.拍照或从手机相册中选图接口以及上传图片接口
// 拍照或从手机相册中选图接口(get localId)
PHOTOIMAGE (state, payload) {
console.log(payload)
alert('image')
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) { // ******这个res是怎么就能得到一个对象?函数本身封装的
console.log('选择接口调用成功')
var localIds = res.localIds
// console.log(localIds)
state.wx_localIds = localIds
// 上传图图片接口(localId)
setTimeout(() => {
wx.uploadImage({
localId: localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
console.log('上传接口调用成功')
var serverId = res.serverId // 返回图片的服务器端ID
state.wx_imgSId = serverId
console.log(state.wx_imgSId)
},
fail: function (res) {
console.log('上传接口调用失败')
}
})
}, 2000)
2.下载图片接口
// 下载图片接口(serverId)
DOWNLOADIMAGE (serverId) {
wx.downloadImage({
serverId: state.wx_imgSId, // 需要下载的图片的服务器端ID,由uploadImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
console.log('下载接口调用成功')
var localId = res.localId // 返回图片下载后的本地ID
console.log(localId)
// this.$store.commit('newLocalId', localId)
// 获取本地图片接口
wx.getLocalImgData({
localId: localId,
success: function (res) {
console.log('获取图片接口调用成功')
var localData = res.localData // localData是图片的base64数据,可以用img标签显示
console.log(localData)
},
fail: function (res) {
console.log('获取图片接口调用失败')
}
})
},
fail: function (res) {
console.log('下载接口调用失败')
}
})
},