最近做的项目中，有需要配置微信H5支付的，所以记录一下。
前期准备：
1.微信公众号开发，首先要搞一个公众号，开发阶段可以申请一个公众平台测试账号。
(进入到微信公众公众平台，找到开发者工具，点开公众平台测试账号)
2.进入测试平台账号后台，找到体验接口权限表，配置授权回调页面域名。
(微信授权登录成功后会回调一个页面，此页面必须在此域名下)
3.记录一下appID和appsecret
授权登录:
微信公众平台技术文档: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
1.引导用户进入授权页面同意授权
let appid = '你的测试平台账号的appid'
let redirect_uri = window.location.href // 授权登录成功回调的地址，一般为当前页
// 授权操作是直接访问腾讯开放平台的一个授权地址，授权成功后会回调
window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
appid +
'&redirect_uri=' +
redirect_uri +
'&response_type=code&scope=snsapi_userinfo&state=abcdefghigklmnopqrstuvwxyz#wechat_redirect' //引导用户授权
参数解析：
appid 为公众号的appId，
redirect_uri 为授权成功的回调页，
response_type 返回类型固定code,
scope 为授权作用域，可选值1.snsapi_base静默授权，无授权页面，只可以获取openid。
可选值2.snsapi_userinfo感知授权，弹出授权页面，需用户同意，可获取openid、昵称、性别、头像等微等用户数据(一般选择次作用域)
Tips:
1.两种授权方式，在测试平台环境下，是需要先关注测试公众号的，正式公众号环境不需要；
2.如果同一用户先进行过snsapi_userinfo授权，后又采取snsapi_base授权，会出现也可以拿到微信用户数据的情况；
3.如果用户关注了公众号，采取snsapi_base授权，也会出现拿到微信用户数据的情况。
(本人开发过程中遇到过2和3情况，为不确定性因素，开发者根据使用场景选择一个授权作用域，尽量不要混用)
2.获取code参数
在授权成功后，页面将跳转至 redirect_uri/?code=CODE&state=STATE
此时获取到了code参数，code参数就是之后获取微信信息的凭证。
3.获取微信用户数据
通过code获取到微信用户信息后，结合自身的业务逻辑，完成授权登录的功能。
上述是根据这个大佬写的，写的比较详细和比较好，作者就不班门弄斧了。
大佬地址:https://blog.csdn.net/iccyuer/article/details/90058467
好啦，这里开始完成自己的逻辑
//判断登录过期逻辑。。。这里就不弄了
getCode () { // 非静默授权，第一次有弹框
this.code = ''
var local = window.location.href // 获取页面url
var appid = 'wxcXXXXXXXXXX'
this.code = this.getUrlCode().code // 截取code
if (this.code == null || this.code === '') { // 如果没有code，则去请求
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
} else {
// 你自己的业务逻辑
this.getToken(); //code不为空，传给后台
}
},
getUrlCode() { // 截取url中的code方法
var url = location.search
this.winUrl = url
var theRequest = new Object()
if (url.indexOf("?") != -1) {
var str = url.substr(1)
var strs = str.split("&")
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
}
}
return theRequest
},
getToken(){
console.log("code",this.code)
//获取微信code
let url ="api/v1/oauth/wechatlogingzh";
let data = {code:this.code}
//this.request是我封装的一个请求方法
this.request(url,data,"POST",false,1).then(res =>{
console.log("token",res)
if(res.code == 1){
//缓存拿到的数据
uni.setStorageSync('token', res.data.userinfo.token);
uni.setStorageSync("userInfo",res.data.userinfo);
this.user =res.data.userinfo;
}
})
},
微信支付流程
1.根据上述微信开放文档
这个框住的步骤可知，要想使用JS-SDK微信支付，或者微信分享，微信定位啥的，要在所有的前面先提示或者说配置config，然后后续的微信支付，微信分享，需要在再ready中才能生效，报错信息输出在error接口中。
根据步骤导入文件，建议用npm的方式，js文件网上说可能有点问题，这种方式可以在网上搜一搜。
当然，你自身使用的域名是在公众号白名单上的，不然还是配置不了的。
基础的也能在这个文档上面看到，那么开始使用：
1、引入微信的文件
2、创建一个js文件，文件名随意，（jws.js）
//引入微信js文件，下面两个是封装的请求方法（request ）和封装uniapp基础方法的。
var jweixin = require('jweixin-module');
import request from "./request.js"
import api from "./api.js"
export default {
//判断是否在微信中
isWechat: function() {
console.log(2222222222222222)
var dev = ''
if (window.navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
)) {
var ua = navigator.userAgent.toLowerCase();
if (!(ua.match(/MicroMessenger/i) == "micromessenger")) {
dev = 'h5';
} else {
dev = 'wx';
}
} else {
dev = 'pc';
}
return dev;
},
//config权限配置，一般在应用的页面的onload调用
initJssdk: function(callback) {
var MODE = this.isWechat()
if (MODE == 'wx') {
let hashurl = location.href.split('#')[0] //动态获取当前地址 必须和安全域名一致 注微信官方检测这里不能写死。
let apiList = [ // 可能需要用到的能力 需要啥就写啥
'chooseWXPay', //微信支付
'checkJsApi', //判断当前客户端版本是否支持指定JS接口
'updateAppMessageShareData',
'updateTimelineShareData',
'getLocation',
'openLocation',
];
let data = {url: hashurl}
//异步获取wx config权限配置
request("api/v1/oauth/getJssdkConfig",data,"POST",false).then(res => {
//后台传给我的微信配置
console.log("微信config的配置",res)
//注入config权限配置
jweixin.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名，见附录1
jsApiList:apiList
});
if (callback) {
callback(res.data);
}
})
}
},
//微信支付 data微信支付的配置数据
wxpay: function(isGoods,data, callback) {
var MODE = this.isWechat();
if (MODE == 'wx') {
this.initJssdk(function(res) {
jweixin.ready(function() {
jweixin.chooseWXPay({
timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: data.paySign, // 支付签名
success: function(res) {
// callback(res)
if(isGoods){
//跳转到订单页面（待发货） 关闭当前页面
api.go_to("/pages/order/order_list?orderType=2");
}else{
api.go_to("/pages/my/courses/courses");
}
},
fail: function(res) {
// callback(res)
api.toast("支付失败","none",1000);
},
complete:function(res){
// console.log(res)
api.toast("支付取消","none",1000);
}
});
});
});
}else{
uni.showModal({
title:"温馨提示",
content:'当前支付环境不在微信内，请先切换到微信再支付。',
showCancel:false,
confirmText:'我知道了',
success:function(res){
if (res.confirm) {
console.log('用户点击确定');
}
}
})
}
},
//这个要提前使用，只是一个分享内容的一个配置，千万不要在用户点击的时候再使用，微信H5是浏览器默认有分享按钮的
wxShare:function(result){
jweixin.ready(function() {
console.log("分享的数据",result)
jweixin.updateAppMessageShareData({
title:result.title, // 分享标题
desc: result.desc, // 分享描述
link: result.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.imgUrl, // 分享图标
success: function (res) {
// 设置成功
console.log(res)
}
})
//分享到朋友圈
jweixin.updateTimelineShareData({
title:result.title, // 分享标题
link: result.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.imgUrl, // 分享图标
success: function () {
// 设置成功
}
})
})
},
}
4094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
