公众号使用微信sdk的正确姿势
当我们做微信登录授权,微信公众号的分享,微信的h5支付等等等等的时候难免会用到微信sdk,当我们用react或vue做的spa应用,直接引入后会发现,在按安卓上可以正常调试,而ios上一直报签名错误(但你发现你刷新一下又可以了。。),等各种问题。在我连连续续踩了各种坑之后,含泪写此文。。。闲话不多说,上代码!(再说一句句,希望获取前端进步的可以关注下qdleader)
引入sdk
首先在main.js中引入
// 每次切换路由时候,注册config(并解决ios的兼容问题)
import { bUrlH5 } from "@/http/httpUrl.js";
router.afterEach((to, from) => {
let basicPath = bUrlH5
let path = to.fullPath.slice(1) // 去除'/'
if (!sessionStorage.getItem('initLink')) {
// 解决ios微信下,分享签名不成功的问题,将第一次的进入的url缓存起来。
sessionStorage.setItem('initLink', document.URL)
}
let url
if (!!window.__wxjs_is_wkwebview) {
// ios
url = sessionStorage.getItem('initLink')
} else {
// 安卓 process.env.BASE_URL 自己定义各个环境下域名变量
url = basicPath + path
}
store.commit('URLLINK', url)
})
这里引入的bUrlH5就是的网站的地址,比如http://www.baidu.com
ios签名错误的根源就是,你传给服务器的地址是你首次进来的根地址,跟你的当前地址不同。这是微信浏览器在ios下的一个bug。
我把url存到了vuex中,vuex不太懂的可以看我之前的一篇文章。
在vuex中 首先维护types文件
export const URLLINK = 'URLLINK';
然后在mutations文件中:
import {
URLLINK,
} from './types'
import getters from './getters'
const state = {
urlLink:'',//存储ios首次进来的链接
};
const mutations = {
//存储url解决ios的sdk问题
[URLLINK](state, urllink) {
state.urlLink = urllink
},
};
export default {
state,
mutations,
getters
}
重点来啦 在项目中建一个wxSdk.js
// import wx from 'weixin-js-sdk'
import wx from 'weixin-jsapi'
import store from '@/store'
import { bUrl } from "@/http/httpUrl.js";
import { Base64 } from 'js-base64';
import axios from 'axios';
export default {
/* 初始化wxjsdk各种接口 */
init(apiList = [], url) {
//需要使用的api列表
let urlWx = bUrl + 'V1/wechat/sharesign'
return new Promise((resolve, reject) => {
let url = Base64.encode(store.state.mutations.urlLink);
axios({
method: 'get',
url: urlWx,
params: {
url: url,
}
}).then(function (res) {
if (res.data.appId) {
wx.config({
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: apiList
})
wx.ready(res => {
// 微信SDK准备就绪后执行的回调。
resolve(wx, res)
})
} else {
reject(res)
}
}).catch(function (err) {
reject(err)
console.log("报错处理")
});
})
}
}
要说明几个坑
- 1.引入sdk时候要npm weixin-jsapi 而不要用weixin-js-sdk,因为weixin-js-sdk不支持es6语法import 引入后,你打印wx会发现为undefined。
- 2你传给后台的url要进行一次编码encodeURIComponent呀,base64呀都可以。
好了,我都封装好了,那怎么调用呢。
来喽来喽。。。
调用的时候只需要在相应的页面引入你写的这个插件,
import wechatUtil from '@/common/js/wxSdk.js'
setL() {
let _this = this;
wechatUtil
.init([
'updateAppMessageShareData',
'onMenuShareAppMessage',
'onMenuShareTimeline',
'updateTimelineShareData',
"openLocation",
])
.then((wx, res) => {
// 这里写微信的接口
console.log(111,wx)
//地理位置
wx.openLocation({
latitude: Number(_this.detailInfo.lat), // 纬度,浮点数,范围为90 ~ -90
longitude: Number(_this.detailInfo.lon), // 经度,浮点数,范围为180 ~ -180。
name: _this.detailInfo.place_name, // 位置名
address: _this.detailInfo.place_address, // 地址详情说明
scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: "" // 在查看位置界面底部显示的超链接,可点击跳转
});
})
},
然后对照着,微信官网,直接粘锅来用,就可以啦,ios,android都ok啦。
当你发现ios,android怎么都是签名错误呀,你先看看你的公众号上有没有配置安全域名呀,你服务器的ip有没有加到公众号的白名单呀。没配好,代码再怎么改也ok不了。。
最后,前端有兴趣的可以关注下,也可以加群,一起成长。还有githubhttps://github.com/qdleader/qdleader每日更新
公众号使用微信sdk的正确姿势的更多相关文章
- 微信公众号支付|微信H5支付|微信扫码支付|小程序支付|APP微信支付解决方案总结
最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付.APP微信支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存. 先说注意 ...
- C#版微信公众号支付|微信H5支付|微信扫码支付问题汇总及解决方案总结
最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存.代码在文章结尾处,有需要的 ...
- 公众号第三方平台开发 教程六 代公众号使用JS SDK说明
公众号第三方平台开发 教程一 创建公众号第三方平台 公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取 公众号第三方平台开发 教程三 微信公众号 ...
- JAVA版开源微信管家—JeeWx捷微3.2版本发布,支持微信公众号,微信企业号,支付窗、小程序
JeeWx捷微3.2微信企业号升级版本发布^_^ JeeWx捷微V3.2——多触点管理平台(支持微信公众号,微信企业号,支付窗.小程序) JeeWx捷微V3.2.0版本引入了更多新特性,支持微信公 ...
- JAVA开发微信支付-公众号支付/微信浏览器支付(JSAPI)
写这篇文章的目的有2个,一是自己的项目刚开发完微信支付功能,趁热回个炉温习一下,二也是帮助像我这样对微信支付不熟悉,反复看了多天文档还是一知半解,原理都没摸清,更不要说实现了.本以为网上的微信开发教程 ...
- 微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友
之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客 微信公众号开发–微信JS-SDK扫一扫功能 在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤 还详细介绍了通过config接口注 ...
- CabloyJS的微信API对接模块:当前支持微信公众号和微信小程序
Cabloy-微信是什么 Cabloy-微信是基于CabloyJS全栈业务开发框架开发的微信接口模块,当前整合了微信公众号和微信小程序的接口,达到开箱即用的使用效果.在Cabloy-微信的基础上,可以 ...
- JeeWx捷微3.1小程序版本发布,支持微信公众号,微信企业号,支付窗——JAVA版开源微信管家
支持小程序,JeeWx捷微3.1小程序版本发布^_^ JeeWx捷微V3.1——多触点小程序版本管理平台(支持微信公众号,微信企业号,支付窗) JeeWx捷微V3.1.0版本紧跟微信小程序更新,在 ...
- JAVA版开源微信管家—JeeWx捷微3.1小程序版本发布,支持微信公众号,微信企业号,支付窗
支持小程序,JeeWx捷微3.1小程序版本发布^_^ JeeWx捷微V3.1--多触点小程序版本管理平台(支持微信公众号,微信企业号,支付窗) JeeWx捷微V3.1.0版本紧跟微信小程序更新,在原有 ...
随机推荐
- 【Linux常见命令】touch命令
touch - change file timestamps touch [文件名] 就是“摸”一下文件,如果文件不存在,就建立新文件:如果文件存在,就改变文件的访问时间atime等时间戳信息. 语法 ...
- Linux笔记(shell基础,历史命令,命令补全/别名,通配符,输出重定向)
一.shell 基础 shell是个命令解释器,提供用户和机器之间的交互 每个用户都可以拥有自己特定的shell centos7默认Shell为bash(Bourne Agin shell) 除了ba ...
- windows 7或以上系统的实用小工具,你知道么?
今晚给大家介绍个实用的好工具,可以做简单的问题记录,再也不用截图加注释这么辛苦了····· 经测试,这东东在win7,2008 及2008R2里适用,也就是说,在win7以上的系统中才有.好了,下面直 ...
- CF--思维练习-- CodeForces - 215C - Crosses(思维题)
ACM思维题训练集合 There is a board with a grid consisting of n rows and m columns, the rows are numbered fr ...
- DP 60题 -3 HDU1058 Humble Numbers DP求状态数的老祖宗题目
Humble Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
- javaweb系统调优方案
1. java代码优化 java代码优化6大原则 : https://blog.csdn.net/bunny1024/article/details/72803708 java代码优化: https: ...
- Spring Cloud学习 之 Spring Cloud Hystrix(断路器原理)
断路器定义: public interface HystrixCircuitBreaker { // 每个Hystrix都通过它判断是否被执行 public boolean allowRequest( ...
- ssh框架整合时的延迟加载问题(no session问题)的分析以及解决方案
当我们整合完三大框架,并采用hibernate的延迟加载方案时,会出现如下的异常: 现在对这个异常进行分析,如下图所示(模拟通过id查询用户信息的过程): 上图分析了为什么会出现no session的 ...
- 【Hadoop离线基础总结】HDFS的API操作
HDFS的API操作 创建maven工程并导入jar包 注意 由于cdh版本的所有的软件涉及版权的问题,所以并没有将所有的jar包托管到maven仓库当中去,而是托管在了CDH自己的服务器上面,所以我 ...
- JDK/Java 14 发布
3 月 17 日,JDK/Java 14 正式 GA. 此版本包含的 JEP(Java/JDK Enhancement Proposals,JDK 增强提案)比 Java 12 和 13 加起来的还要 ...