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自动化测试时,难免会问到,他们能支持微信小程序或者微信 ...
随机推荐
- Vue起步
Vue起步 Vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式javascript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
- React-Native 之 FlexBox介绍和使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- Java WebService Axis 初探
最近在学习WebService 开始了: 一:服务端的编写与发布 1. 工具准备: java的开发环境(这里就不多说了). axis2官网上下载最新的就可以了(我这里用的是axis2-1.4.1- ...
- python网络编程-optparse
Python 有两个内建的模块用于处理命令行参数: 一个是 getopt,<Deep in python>一书中也有提到,只能简单处理 命令行参数: 另一个是 optparse,它功能强大 ...
- vue项目中,Iview打包到生产环境时, woff 字体引用问题
出现这问题的原因是文件路径不对,与webpack有关,解决的办法为: 一.修改webpack.prod.conf.js module: { rules: utils.styleLoaders({ so ...
- android studio 解决avd启动问题 ----waiting for target device come online
android studio 模拟器打不开,一直停留在第三方.waiting for target device come online 问题解决方法 方法1.Android Emulator 未 ...
- SCTF 2015 pwn试题分析
Re1 是一个简单的字符串加密.程序使用了多个线程,然后进行同步.等加密线程加密好了之后才会启动验证线程.这个题比较坑的是IDA F5出来的结果不对,不知道是不是混淆机制. 刚开始看的是F5后的伪代码 ...
- python 比timedelta强大的多的 relativedelta
datetime包中的timedelta功能有限,比如,一个月的delta都没法表示.dateutil包中的relativedelta要强大很多. 年月日周的delta都能支持,还有weekday, ...
- 参数化SQL语句
避免SQL注入的方法有两种:一是所有的SQL语句都存放在存储过程中,这样不但可以避免SQL注入,还能提高一些性能,并且存储过程可以由专门的数据库管理员(DBA)编写和集中管理,不过这种做法有时候针对相 ...
- 转发:RocketMQ与kafka的对比
淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysql作为消息存储媒介,可完全水平扩容,为了进一步降低成本,我们认为存储部分可以进一步优化,2011年初,Linkin开源了Kaf ...