首先,类库方面,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相关的更多相关文章

  1. 微信开发笔记:公众号获取access_token

    微信开发中,access_token的获取是一种非常常见的功能,通过公众号的appid和appsecret来向微信公众平台请求一个临时通行凭证:access_token.公众平台上的绝大部分操作都会需 ...

  2. 微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击

    微信小程序的功能开发工具跟公众号的差别,小程序是一种减负思维对简单APP是巨大打击 摘要: 小程序和公众号最大的区别有如下四点:1.小程序没有粉丝,开发者在后台能看到的只能是累计用户访问数以及实时统计 ...

  3. 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)

    自动发单,自动评价,自动评论,自动推广 微信小程序自运营器  微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...

  4. Python3 itchat微信获取好友、公众号、群聊的基础信息

    Python3 itchat微信获取好友.公众号.群聊的基础信息 一.简介 安装 itchat pip install itchat 使用个人微信的过程当中主要有三种账号需要获取,分别为: 好友 公众 ...

  5. 基于.net5 wtm框架、uni-app微信公众号开发一、公众号授权

    前端公众号授权 公众号设置 0.首先用IIS创建一个空目录的网站用于公众号域名验证,接着把该网站内网穿透出去,推荐用utools工具,官网:https://u.tools/ 下载安装好后搜索内网穿透并 ...

  6. .NET微信公众号开发-4.0公众号消息处理

    一.前言 微信公众平台的消息处理还是比较完善的,有最基本的文本消息,到图文消息,到图片消息,语音消息,视频消息,音乐消息其基本原理都是一样的,只不过所post的xml数据有所差别,在处理消息之前,我们 ...

  7. 微信公众号之:JSSDK接入以及invalid signature等常见错误问题

    最近在搞微信公众号开发,进行到网页开发部分被坑了一天,最坑的问题就是invalid signature,而网上大部分解答这个问题的都没有说清楚,都直接丢文档.博主认为这样很不好.本文是博主结合自身遇到 ...

  8. Mac下进行基于java服务端语言的微信公众号本地js-sdk调试的大致方法

    开发微信公众号应用调用js-sdk,需要先在微信公众号后台配置可信域名,之后从微信的入口地址重定向到改域名下的路径后便会返回code,之后可以拿到一系列需要的参数等等.那么本地开发,如果使用的是PHP ...

  9. 微信小程序及公众号H5自动化测试攻略

    目前市面上,被大家用来做移动端App UI自动化测试工具最为常见的当属: Appium Airtest 很多小伙伴在刚接触这两款工具做App UI自动化测试时,难免会问到,他们能支持微信小程序或者微信 ...

随机推荐

  1. 洛谷P1342请柬

    传送门啦 核心思想:两遍最短路. 1号点去各地的时间直接套最短路模板,各地到1号点时间用逆向思维,视为求1号点沿反边到各地的时间即可. #include <iostream> #inclu ...

  2. 异步消息框架netty

    Netty-WebSocket长连接推送服务 http://blog.csdn.net/z69183787/article/details/52505249 http://blog.csdn.net/ ...

  3. SQL2000数据库修改sa密码

    开始——程序——Microsoft SQL Server——企业管理器 2 展开数据库Microsoft SQL Server—— SQL Server组——安全性——登录——双击sa 3 在常规内有 ...

  4. 插入标识列identity_insert

    插入标识列identity_insert 在进行数据插入时,如果插入列名包括标识列,常常会遇到以下3种提示: 一.“当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'xxxxxxxx ...

  5. Hadoop案例(十一)MapReduce的API使用

    一学生成绩---增强版 数据信息 computer,huangxiaoming,,,,,,, computer,xuzheng,,,,, computer,huangbo,,,, english,zh ...

  6. 【LOJ】#2028. 「SHOI2016」随机序列

    题解 我们发现只有从第一个往后数,用乘号联通的块是有贡献的 为什么,因为后面所有表达式 肯定会有 + ,还会有个-,贡献全都被抵消了 所以我们处理出前缀乘积,然后乘上表达式的方案数 答案就是\(\su ...

  7. 【BZOJ】4894: 天赋

    题解 这道题是求一个有向图的外向生成树 入度矩阵对应着外向生成树,出度矩阵对应着内向生成树,知道了这个就可以求出基尔霍夫矩阵了,同时n - 1阶主子式一定要删掉根节点的一行一列 代码 #include ...

  8. PLSQL Developer个性化设置

    1)代码自动完成 和讨厌的.才后出现提示说88,我用快捷键任意呼唤. Tools->Preferences->User Interface->Key Configuration.找到 ...

  9. MVP模型

    MVP模型一般要创建三个文件夹:View.Interactor(Model).Presenter 每个部分都有其接口和实现类,就是为了方便回调 这里做一个登陆界面为例子: 接口: Interactor ...

  10. Pytho并发编程-利用协程实现简单爬虫

    from gevent import monkey;monkey.patch_all() import gevent from urllib.request import urlopen def ge ...