Vue集成微信开发趟坑：公众号以及JSSDK相关

发布时间：2020-12-16 23:19:50 所属栏目：百科来源：网络整理

导读：首先，类库方面，Vue中引入JSSDK的话，请引入 weixin-js-sdk ，而不是weixin-jsapi，原因在于weixin-jsapi不是最新版；还要注意JS接口安全域名，不需要http前缀，直接输入网址即可！第二，开发流程官网已经说得很清楚，需要获取微信配置，然后才能调用微信

首先，类库方面，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_TOKEN

http请求方式: POST,https协议

第四，iOS网页适配方面，获取本地图片接口的时候，需要判断是否为WKWebview，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的：

<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">if (window.__wxjs_is_wkwebview) {
wx.getLocalImgData({
localId: localId,// 图片的localID
success: (result) => {
let localData = result.localData;
//console.log("getLocalImgData",localData);
}
});

第五，获取地理位置描述，即将微信接口返回的坐标转换为真实的地址，需要借助腾讯地图webservice，注意这里需要使用gcj02坐标：

            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;

                        //处理数据
                    });
                }
            });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!