首先,类库方面,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. linux内核之accept实现

    用户态对accept的标准用法: if ((client_fd = accept(sockfd, (struct sockaddr *)&remote_addr, &sin_size) ...

  2. Linux下LAMP服务器的搭建

    1.安装并配置Apache 安装apache的方法有很多种,这里选择通过yum方式进行安装,但需要Linux系统能够连接互联网,执行如下命令,安装Apache. # yum install httpd ...

  3. JDK安装及配置 (tar.gz版)和tomcat的安装

    jdk下载: 我们这里下载了jdk-8u65-linux-x64.tar.gz. 官网:http://www.oracle.com/technetwork/java/javase/downloads/ ...

  4. C# 文件下载断点续传

    C# 文件下载断点续传的一个类 using System; using System.Collections.Generic; using System.Linq; using System.Text ...

  5. 【洛谷】P2179 [NOI2012]骑行川藏

    题解 感谢小迪给我讲题啊,这题小迪写挺好的我就不写了吧 小迪的题解 代码 #include <iostream> #include <cstdio> #include < ...

  6. 【洛谷】P4207 [NOI2005]月下柠檬树

    题解 原来自适应simpson积分是个很简单的东西! 我们尝试分析一下影子,圆的投影还是圆,圆锥的尖投影成一个点,而圆台的棱是圆的公切线,我们把圆心投影出来,发现平面上圆心的距离是两两高度差/tan( ...

  7. JavaScript中正则的使用(1)

    通过例子学习正则中的常见语法(1) $num javascript var a = 'javascript'; var b = a.replace(/(java)(script)/gi, '$2-$1 ...

  8. thinkphp3.2开启静态缓存与缓存规则设置

    网站的静态缓存对大访问量有很好的缓解作用,尤其对网站的大并发,可有效的缓解数据库的压力.在thinkphp中实现静态缓存很简单,thinkphp都已经封装好了直接调用即可. 静态缓存   首先设置 H ...

  9. 《Android源码设计模式》--工厂方法模式

    No1: 对于一个应用程序来说,其真正的入口是在ActivityThread类中,ActivityThread中含有我们熟悉的main方法.ActivityThread是一个final类,不能被继承. ...

  10. STM32 串口通信

    1. 中断说明 TXE(Tansmit Data Register empty interrupt) - 发送数据寄存器空,产生中断.当使能TXE后,只要Tx DR空了,就会产生中断.---写寄存器D ...