首先,类库方面,Vue中引入JSSDK的话,请引入weixin-js-sdk,而不是weixin-jsapi,原因在于weixin-jsapi不是最新版;还要注意JS接口安全域名,不需要http前缀,直接输入网址即可!
第二,开发流程官网已经说得很清楚,需要获取微信配置,然后才能调用微信的JSSDK相关API:
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用
获取配置方面,由于路由采用hash模式,URL只有一个,因此直接传入#前面的部分即可:
const getWxConfig = () => { let currentUrl = encodeURIComponent(window.location.href.split("#")[0]); //请求配置 post(api_getWxConfig, {requestUrl: currentUrl}).then((res) => { //let {data} = res; // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作 wx.config({ debug: false, // 开启调试模式,开发时可以开启 appId: res.appId, // 必填,公众号的唯一标识 由接口返回 timestamp: res.timestamp, // 必填,生成签名的时间戳 由接口返回 nonceStr: res.nonceStr, // 必填,生成签名的随机串 由接口返回 signature: res.signature, // 必填,签名 由接口返回 jsApiList: ['getLocation', 'openLocation', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getLocalImgData'] // 此处填你所用到的方法 }); }); };
然后服务端处理方面,签名算法,请注意:
签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
然后注意前台用得字段名称为nonceStr,签名算法中拼接的为noncestr。
第三,接口调用方面,微信下载图片等素材的接口已经变为如下的,而不是百度搜索出来的链接
https://api.weixin.qq.com/cgi-bin/material/get_material?access_token=ACCESS_TOKENhttp请求方式: POST,https协议
第四,iOS网页适配方面,获取本地图片接口的时候,需要判断是否为WKWebview,用于兼容 iOS WKWebview 不支持 localId 直接显示图片的:
if (window.__wxjs_is_wkwebview) { wx.getLocalImgData({ localId: localId, // 图片的localID success: (result) => { let localData = result.localData; //console.log("getLocalImgData", localData); } });
第五,获取地理位置描述,即将微信接口返回的坐标转换为真实的地址,需要借助腾讯地图webservice,注意这里需要使用gcj02坐标:
import wx from "weixin-js-sdk"; wx.getLocation({ type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02' success: function (res) { let latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90 let longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。 let speed = res.speed; // 速度,以米/每秒计 let accuracy = res.accuracy; // 位置精度 Vue.jsonp('http://apis.map.qq.com/ws/geocoder/v1/', { location: `${latitude},${longitude}`, coord_type: 5, key: 'xxxx', output: 'jsonp', callback: 'calllocation' }).then(json => { let {address, formatted_addresses} = json.result; //处理数据 }); } });