Vue集成微信开发趟坑:公众号以及JSSDK相关
首先,类库方面,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; //处理数据
});
}
});
Vue集成微信开发趟坑:公众号以及JSSDK相关的更多相关文章
- 微信开发笔记:公众号获取access_token
微信开发中,access_token的获取是一种非常常见的功能,通过公众号的appid和appsecret来向微信公众平台请求一个临时通行凭证:access_token.公众平台上的绝大部分操作都会需 ...
- 微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击
微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击 摘要: 小程序和公众号最大的区别有如下四点:1.小程序没有粉丝,开发者在后台能看到的只能是累计用户访问数以及实时统计 ...
- 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)
自动发单,自动评价,自动评论,自动推广 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...
- Python3 itchat微信获取好友、公众号、群聊的基础信息
Python3 itchat微信获取好友.公众号.群聊的基础信息 一.简介 安装 itchat pip install itchat 使用个人微信的过程当中主要有三种账号需要获取,分别为: 好友 公众 ...
- 基于.net5 wtm框架、uni-app微信公众号开发一、公众号授权
前端公众号授权 公众号设置 0.首先用IIS创建一个空目录的网站用于公众号域名验证,接着把该网站内网穿透出去,推荐用utools工具,官网:https://u.tools/ 下载安装好后搜索内网穿透并 ...
- .NET微信公众号开发-4.0公众号消息处理
一.前言 微信公众平台的消息处理还是比较完善的,有最基本的文本消息,到图文消息,到图片消息,语音消息,视频消息,音乐消息其基本原理都是一样的,只不过所post的xml数据有所差别,在处理消息之前,我们 ...
- 微信公众号之:JSSDK接入以及invalid signature等常见错误问题
最近在搞微信公众号开发,进行到网页开发部分被坑了一天,最坑的问题就是invalid signature,而网上大部分解答这个问题的都没有说清楚,都直接丢文档.博主认为这样很不好.本文是博主结合自身遇到 ...
- Mac下进行基于java服务端语言的微信公众号本地js-sdk调试的大致方法
开发微信公众号应用调用js-sdk,需要先在微信公众号后台配置可信域名,之后从微信的入口地址重定向到改域名下的路径后便会返回code,之后可以拿到一系列需要的参数等等.那么本地开发,如果使用的是PHP ...
- 微信小程序及公众号H5自动化测试攻略
目前市面上,被大家用来做移动端App UI自动化测试工具最为常见的当属: Appium Airtest 很多小伙伴在刚接触这两款工具做App UI自动化测试时,难免会问到,他们能支持微信小程序或者微信 ...
随机推荐
- HMM算法
HMM的应用 HMM是生成模型 词性标注:给定一个词的序列(也就是句子),找出最可能的词性序列(标签是词性).如ansj分词和ICTCLAS分词等. 分词:给定一个字的序列,找出最可能的标签序列(断句 ...
- delphi TComponent类(1)
来自:http://blog.csdn.net/lailai186/article/details/7442383 ------------------------------------------ ...
- Ubuntu 搭建etcd
一.简介 etcd是一个高可用的分布式键值(key-value)数据库.etcd内部采用raft协议作为一致性算法,etcd基于Go语言实现. 提供配置共享和服务发现的系统比较多,其中最为大家熟知的是 ...
- CVE-2010-0249 极光
传说中的极光漏洞 Microsoft Internet Explorer非法事件操作内存破坏漏洞 Microsoft Internet Explorer是微软Windows操作系统中默认捆绑的WEB浏 ...
- Elasticsearch 6.x 的分页查询数据
{ , "query": { "match" : { "person_name" : "张老师" }}, , ], &q ...
- Keras中RNN不定长输入的处理--padding and masking
在使用RNN based model处理序列的应用中,如果使用并行运算batch sample,我们几乎一定会遇到变长序列的问题. 通常解决变长的方法主要是将过长的序列截断,将过短序列用0补齐到一个固 ...
- WIN8+VS2013编写发布WCF、一(编写)、二(部署)、三(调用)
原文://http://www.cnblogs.com/tntboom/p/4348483.html 引言:上学期因为写服务器用WCF,所以连查资料再瞎调试勉强成功了,但是这学期又到了用WCF的时候, ...
- 2018年全国多校算法寒假训练营练习比赛(第二场)B - TaoTao要吃鸡
链接:https://www.nowcoder.com/acm/contest/74/B来源:牛客网 题目描述 Taotao的电脑带不动绝地求生,所以taotao只能去玩pc版的荒野行动了, 和绝地求 ...
- Keras/tensorflow出现‘Loaded runtime CuDNN library: 7.0.5 but source was compiled with: 7.1.14’错误的解决办法
从tensorflow1.10 升级到1.12版本后,对依赖的CuDNN不兼容产生的问题.鉴于一直使用的是Keras,未使用新版本tensorflow的功能,故果断回退到旧版本. 方法为:pip3 i ...
- JAVAEE——SSH项目实战04:联系人添加、列表显示和修改
作者: kent鹏 转载请注明出处: http://www.cnblogs.com/xieyupeng/p/7159337.html 一.联系人添加 1.添加页面设计 linkman/list. ...