博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue集成微信开发趟坑:公众号以及JSSDK相关
阅读量:4324 次
发布时间:2019-06-06

本文共 3077 字,大约阅读时间需要 10 分钟。

首先,类库方面,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 直接显示图片的:

 

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;                            //处理数据                        });                    }                });

  

 

转载于:https://www.cnblogs.com/univalsoft-mobile-team/p/9199656.html

你可能感兴趣的文章
矩阵的SVD分解
查看>>
性能优化之数据库优化
查看>>
linux 系统下 tar 的压缩与解压缩命令
查看>>
阿里负载均衡,配置中间证书问题(在starcom申请免费DV ssl)
查看>>
转:How to force a wordbreaker to be used in Sharepoint Search
查看>>
MySQL存储过程定时任务
查看>>
Python中and(逻辑与)计算法则
查看>>
POJ 3267 The Cow Lexicon(动态规划)
查看>>
设计原理+设计模式
查看>>
音视频处理
查看>>
tomcat 7服务器跨域问题解决
查看>>
前台实现ajax 需注意的地方
查看>>
Jenkins安装配置
查看>>
个人工作总结05(第二阶段)
查看>>
Java clone() 浅拷贝 深拷贝
查看>>
深入理解Java虚拟机&运行时数据区
查看>>
02-环境搭建
查看>>
spring第二冲刺阶段第七天
查看>>
搜索框键盘抬起事件2
查看>>
阿里百川SDK初始化失败 错误码是203
查看>>