uniapp 公众号或h5登录

uniapp 公众号或h5登录 和支付功能

// 微信公众号授权

import api from '../api/api.js'

var wxAuthorize = function() {
	let link = window.location.href; 
	let code = getQueryString("code");   //从有 code的地方开始截取
	// 已经授权登录过的就不用再授权了
	if (uni.getStorageSync('token')){
		flushToken()
		return;
	}
    
	// 如果拿到code，调用授权接口，没有拿到就跳转微信授权链接获取
	if (code) {
		apii(code); // 调用后台接口，授权
	} else {
		let appid = 'xxxxx';
		let uri = encodeURIComponent(link);  // 登录后返回的地址
		
		let authURL =
		`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123&connect_redirect=1#wechat_redirect`;
		console.log('authURL',authURL)
		window.location.href = authURL;
	}
}


 //截取微信返回的地址
function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = document.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]); return null;
 }
// 截取code的方法 这个方法是错的  用这个方法会获取两次
// var _getUrlParams = function(url) {
// 	// 截取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;
// }
//  根据code对接后台  
var apii = function(code) {
	api.httpRequest({ //自己封装的api方法
		url: '/api/Wx/getOpenid',
		method: 'POST'
	}, {
		code: code
	}).then(res => {
		if (res.data.code == 1) {
			uni.setStorageSync('token', res.data.data.token);
			console.log(uni.getStorageSync('token'));
		} else {
			this.$msg(res.data.msg, 1000);
		}
	});
}

// 刷新token
var flushToken = function() {
	api.httpRequest({
			url: '/api/token/refresh'
		}, {
			token: uni.getStorageSync('token')
		}).then(res => {
			console.log(res);
			uni.setStorageSync('token', res.data.data.token);  //保存新的token
		}),
		err => {
			console.log(err);
		};
}


export default wxAuthorize;

之后在声明周期的 初始状态使用就可以啦

**APP.vue 
//的onlaunch中
this.wxAuthorize();
//这里我将wxAuthorize挂在vue的原型链上
import wxAuthorize from './common/util.js'   //判断并获取code
Vue.prototype.wxAuthorize=wxAuthorize**



```javascript
//jws.js
const wexinPay = (data, cb, errorCb) => {
 
	let [appId, timestamp, nonceStr, signature, packages, paySign] = [data.appId, data.timeStamp, data.nonceStr, data.signature,
		data.package, data.paySign
	];
 
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId, // 必填，公众号的唯一标识
		timestamp, // 必填，生成签名的时间戳
		nonceStr, // 必填，生成签名的随机串
		signature, // 必填，签名，见附录1
		jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
 
	wx.ready(function() {
		wx.chooseWXPay({
			timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
			nonceStr, // 支付签名随机串，不长于 32 位
			'package': packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
			signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
			paySign, // 支付签名
			success(res) {
				console.log("支付成共啦")
				// 支付成功后的回调函数
				cb(res);
			},
			fail(res) {
				console.log("支付失败啦")
				errorCb(res);				
			}
		});
	});
 
	wx.error(function(res) {
		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
		/*alert("config信息验证失败");*/
	});
}
 
export default wexinPay;

import wexinPay from '../../../common/jws'
调取后台的接口  将所用的返回值作为参数传入

//调起支付
wexinPay(res.data.data)

*注意：公众号支付一定要先关注公众号（我踩的坑）