公众号使用微信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 = bUrlH5let path = to.fullPath.slice(1) // 去除'/'if (!sessionStorage.getItem('initLink')) {// 解决ios微信下，分享签名不成功的问题,将第一次的进入的url缓存起来。sessionStorage.setItem('initLink', document.URL)}let urlif (!!window.__wxjs_is_wkwebview) {// iosurl = 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 ~ -90longitude: 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的正确姿势相关推荐

微信公众号python_wechat: 微信 Python SDK，支持微信公众号以及企业号的上行消息及 OAuth 接口...
微信公众号Python-SDK 本SDK支持微信公众号以及企业号的上行消息及OAuth接口.本文档及SDK假设使用者已经具备微信公众号开发的基础知识,及有能力通过微信公众号.企业号的文档来查找相关的接 ...
python 微信公众号，微信小程序wechatpy的使用
第一章 Python 微信公众号,小程序入门之wechatpy的使用文章目录第一章 Python 微信公众号,小程序入门之wechatpy的使用前言一.wechatpy是什么? 二.微信公众号 ...
springboot+h5页面+微信公众号获取微信用户信息
springboot项目,h5页面通过微信公众号获取微信用户信息最近本人有一个项目需求,微信公众号里点击一个菜单进入一个商城购物系统. 对于在微信公众号还是小白的我来说难度有点大,但是做完后发现也就 ...
微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友
之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客微信公众号开发–微信JS-SDK扫一扫功能在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤还详细介绍了通过config接口注 ...
HTML5微信支付和微信公众号内微信支付(VUE)
实现html5微信支付以及微信公众号内微信支付微信公众号内微信支付首先进行微信授权获取code /*获取授权拿到code*/getCodeApi(state){//获取codelet urlNow ...
微信jsapi支付获取code_JAVA开发微信支付-公众号支付/微信浏览器支付（JSAPI）
写这篇文章的目的有2个,一是自己的项目刚开发完微信支付功能,趁热回个炉温习一下,二也是帮助像我这样对微信支付不熟悉,反复看了多天文档还是一知半解,原理都没摸清,更不要说实现了.本以为网上的微信开发教程 ...
JAVA版开源微信管家—JeeWx捷微3.1小程序版本发布，支持微信公众号，微信企业号，支付窗
支持小程序,JeeWx捷微3.1小程序版本发布^_^ JeeWx捷微V3.1--多触点小程序版本管理平台(支持微信公众号,微信企业号,支付窗) JeeWx捷微V3.1.0版本紧跟微信小程序更新,在原有 ...
JeeWx捷微3.0多触点版本发布，支持微信公众号，微信企业号，支付窗——喜迎双“旦”
喜迎双旦,JeeWx捷微3.0多触点版本发布^_^ JeeWx捷微V3.0--多触点版本管理平台(支持微信公众号,微信企业号,支付窗) JeeWx捷微V3.0.0版本是一个颠覆和跨时代版本,官方团队历 ...
微信公众号给微信用户推送信息模板信息
该功能主要是用于利用微信公众号向微信用户推送与用户相关的信息,在开发此功能之前需要获取到微信公众号的access_token,以及微信公众号的模板id 为了保证用户不受到骚扰,在开发者出现需要主动提醒 ...

公众号使用微信sdk的正确姿势

公众号使用微信sdk的正确姿势相关推荐

最新文章

热门文章