uniApp H5微信网页授权，微信支付

用于记录 uniapp 编译成H5后，完成微信授权和微信支付，微信浏览器中主要看场景二

业务场景介绍

业务需要在H5中完成支付功能（微信支付）

使用场景介绍

1、H5运行在普通浏览器中；
2、H5运行在微信浏览器中。

分析过程

场景一：H5运行在普通浏览器中

H5普通浏览器支付过程并不复杂，大致流程如下：
a、前端发起支付请求给后端，后端收到后，调用微信支付接口下单；
b、微信支付接口会返回一个支付链接给到后端；
c、后端把微信返回的支付链接通过支付请求(a)接口返回给前端；
d、前端拿到链接之后，跳转到此链接，开启轮询调用后端接口查询是否支付成功；
e、在跳转之后的链接完成支付动作的操作，用户自己点击返回到发起支付的页面。
微信H5支付开发文档

// 页面卸载时清除计时器，停止轮询，用于页面计时器重复启用onUnload() {clearTimeout(this.payTime);}// 如下为methods:{}中代码的一部分
// 同意支付方法 agreePayFn(price) {let params = {};params.price = price; //价格params.id = this.estimateSchemeId; //支付的产品IDthis.getWxPayCb(); //获取支付是否成功的回调方法 ，用于轮询后端接口h5WxPay(params).then(res => { // 发起微信支付请求给后端，res是后端返回的支付链接params = null; //释放内存location.href = res; //跳转到支付链接});},// 获取微信支付结果getWxPayCb() {const self = this;let params = {};params.id = this.estimateSchemeId; //产品IDclearTimeout(this.payTime); //清除计时器function next() {    //用于轮询的函数getWxPayReuslt(params) //获取微信支付结果接口.then(res => {if (res == true) { //后台返回 true 成功// doSomethingreturn;}if (res == false) {  //后台返回 false 失败 // doSomethingshowToast('支付失败,请重新支付', 'none', 2000); //此方法是自己封装的uni.showToast方法return;}// 无结果时每隔一秒轮询接口self.payTime = setTimeout(() => {clearTimeout(self.payTime);next();}, 1000);}).catch(e => {  //接口出现异常时处理self.payTime = setTimeout(() => {clearTimeout(self.payTime);next();}, 1000);});}next(); //进入就进行调用}

场景二：H5运行在微信浏览器【此文的重点】

H5支付是指商户在微信客户端外的移动端网页展示商品或服务
因此在微信浏览器支付时需要，使用另外一套支付过程----微信jsapi传送门

根据微信【JSAPI】支付开发的要求，则需要完成2步操作
1、有支付功能的页面，需要通过微信网页授权获取code，并把code传给后台获得当前用户的openid，openid将用于后台统一下单时使用；
2、发起支付（有两种方式，a、直接调用；b、通过jssdkapi调用）

问题难点，hash 模式下网页授权获取code

由于uniapp开发的H5采用的hash路由模式，在网页授权时，微信会扰乱带#号的参数，以至于回调时不能回到发起页面。

解决方案

1、需要授权的页面，在授权之前，把带#号的url转换成不带#号的url；
2、微信授权回来之后，在项目入口，把不带#号的url转换成带#号的url。

封装WX_JS_SDK 文件

// 引入qs解析包，用于将URL解析成对象
import qs from 'qs'
// 引入微信jsapi包
import wx from 'weixin-jsapi';
// 引入自己定义的微信配置和请求
import { weChatConfig, callSever } from '../api/requestConfig.js';
// 需要用到的微信api接口
const jsApiList = ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline','onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareWeibo', 'chooseWXPay'
];// 注入微信权限验证配置
let injectionWxConfig = function(params) {const { timestamp, nonceStr, signature } = paramswx.config({debug: false,appId: weChatConfig.appId, // 必填，公众号的唯一标识timestamp: parseInt(timestamp), // 必填，生成签名的时间戳 nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名jsApiList: jsApiList // 必填，需要使用的JS接口列表})
}/*** 调起微信支付* params 支付参数timestamp: '', 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr: '', 支付签名随机串，不长于 32 位package: '', 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）signType: '', 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'paySign: '', 支付签名signature: ''  //签名 用于权限注入使用* successCallBack 成功回调* failCallBack 失败回调* cancelBack 取消回调*/
const wxPay = (params, successCallBack, failCallBack, cancelBack) => {injectionWxConfig(params)wx.ready(() => {wx.chooseWXPay({timestamp: params.timestamp,nonceStr: params.nonceStr,package: params.package,signType: params.signType,paySign: params.paySign,success: successCallBack,fail: failCallBack,cancel: cancelBack})})
}//-------------------------------------------------------------------------------------//
/*** 如下配置是为了在微信浏览器环境中，网页拿去授权* 由于采用的hash模式路由，会导致授权后的链接被扰乱(微信会处理掉#号) redirect_uri* 解决方案：* 1、授权前重置 redirect_uri 改为没有#号的url,把当前页面的原有参数信息，额外信息，codePath参数(用来指定跳转页面的，此处为授权发起页)* 2、项目入口处，将没有#号的url改回到 带#号的url，跳转到指定页面*//*** 微信授权-需要授权的页面： [页面用到的参数key] * 参数key适用于获取微信回调跳传回来时的参数(授权时传了此参数,如未传则不填，也不用写页面)*/
const plagForm = {'/pages/interestModule/interestLoan/interestLoan': ['']
}/*** 重置redirect_uri 需要用到的页面使用* 把有#号的url改为没有#号的url，* scope 授权作用域  snsapi_base(静默授权)   snsapi_userinfo(弹框授权)* path 授权所在的页面路径*/
const getWxCode = function(scope = 'snsapi_base', path) {let homeUrl = '',searchObj = {},searchStr = '';let oriUrls = location.href.split('?');let baseShareUrl = location.origin + location.pathnamehomeUrl = baseShareUrl// 如果有携带参数，把参数进行拼接，参数不能带codeif (oriUrls.length > 1) {let searchUrls = oriUrls[1].split('#')let searchUrlReal = searchUrls[0]searchObj = qs.parse(searchUrlReal)let { code } = searchObjif (code) {delete searchObj.code}}// 路径存入到codePath中，用于微信回调时入口处处理searchObj.codePath = pathsearchStr = `?${qs.stringify(searchObj)}`homeUrl += searchStrlet redirect_uri = encodeURIComponent(homeUrl)let response_type = 'code'let state = ''let url =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${weChatConfig.appId}&redirect_uri=${redirect_uri}&response_type=${response_type}&scope=${scope}&state=${state}#wechat_redirect`location.href = url
}/*** 重置redirect_uri 项目入口处使用* 将没有#号的url改回到 带#号的url* 如果地址有页面需要传递的参数，需要在 plagForm 进行设置* 返回之后的例子：* https://xxxx.com/?codePath=%2Fpages%2FinterestModule%2FinterestLoan%2FinterestLoan&code=021cZo0002D87L1BSH200bPoNK3cZo0Z&state=#/pages/indexTabBar/index*/
const urlResetForWxCode = function() {let needRedirect = false,homeUrl = '',searchObj = {},searchStr = '';let oriUrls = location.href.split('?');let baseShareUrl = location.origin + location.pathnamehomeUrl = baseShareUrlif (oriUrls.length > 1) {let searchUrls = oriUrls[1].split("#")let searchUrlReal = searchUrls[0]let searchObjReal = {}searchObj = qs.parse(searchUrlReal)let { codePath } = searchObjneedRedirect = codePathif (codePath) {plagForm[codePath].forEach(item => searchObjReal[item] = searchObj[item])if (plagForm[codePath].length) {searchStr = `?${qs.stringify(searchObjReal)}`}homeUrl += `#${codePath}` + (searchstr.length > 1 ? searchstr : '')}}return {needRedirect, //需要重定向homeUrl, //跳转链接search: searchObj //存着code信息和codePath信息等}
}
const WX_JS_SDK = {urlResetForWxCode,getWxCode,wxPay
}
export default WX_JS_SDK

在main.js中引用刚刚封装好的WX_JS_SDK文件

import WX_JS_SDK from './utils/WX_JS_SDK.js';
//添加到原型中
Vue.prototype.$wxSdk = WX_JS_SDK

第一步：需要授权的页面，把带#号的地址更换成不带#号的地址，用于获取微信code

 onLoad(options) {// 如果是微信环境,且没有wxCode，则需要进行网页授权const wxCode = uni.getStorageSync('wxCode');console.log('是否浏览器环境','isWeChatH5--自定义的判断是否是浏览器环境')if (isWeChatH5) {if (isEmpty(wxCode)) {this.$wxSdk.getWxCode('snsapi_base', '/pages/interestModule/interestLoan/interestLoan');return;} else {// 通过code调取接口获取openID，用于 统一下单接口 预支付}}},

第二步：项目入口处APP.VUE，处理微信返回的地址，把不带#号的地址更换成带#号的地址，跳转到指定页面

import { getSystemInfo, isWeChatH5 } from '@/utils/index.js';
export default {onLaunch: function(options) {getSystemInfo();// 如果是在微信环境，有通过授权页面回来时if (isWeChatH5) {let { needRedirect, homeUrl, search } = this.$wxSdk.urlResetForWxCode();if (needRedirect) {uni.setStorageSync('wxCode', search.code); //本地存入codelocation.href = homeUrl;  //跳转到发起授权的页面return}}//其它业务逻辑 。。。。。}
};

第三步，需要支付的页面调用 WX_JS_SDK 封装的方法

 // 同意支付agreePayFn(price) {let params = {};params.price = price;params.id = this.estimateSchemeId;if (isWeChatH5) {//微信浏览器环境，调用微信api支付方法，如需直接支付可以看场景二的直接调用支付this.$wxSdk.wxPay(params,sucess => {// 成功回调console.log('成功回调了')},fail => {// 失败回调console.log('失败回调了')},cancel => {// 取消回调console.log('取消回调了')});} else {// 非微信浏览器环境 支付，可看场景一this.getWxPayCb();h5WxPay(params).then(res => {params = null;uni.removeStorageSync('from');location.href = res;});}},