uni-app业务功能开发整合

Posted 2021-10-07 面条请不要欺负汉堡

一.微信授权

1. 必须先在平台后台系统那边 配置好域名

授权回调域名配置 （比如：访问的网页地址是 https://wl.2020yx.cn/ccc/index.html 需要网页授权的域名为：wl.2020yx.cn 这样的话，只要wl.2020yx.cn下的域名文件都可以进行OAuth2.0鉴权）

到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页授权 - 网页授权获取用户基本信息”的配置。

要将这里的txt文件放在项目根路径下，否则上面的回调域名是无法保存的。

把下载的txt放在域名底下

2. 进入授权页面同意授权，获取code

https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号appid&redirect_uri=页面地址&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect
 
 
response_type：直接code
scope：snsapi_base（不需要手动授权）snsapi_userinfo （需要手动授权）
state：随意 a-zA-Z0-9 
 
注意：重定向到微信授权页面出现Status Code：301 Moved Permanently。原因：用户授权的请求出现两次重定向，所以才导致了这个问题。
 
解决方式：加上connect_redirect=1

参考：获取网页授权

二 . 支付业务

了解官网uni.requestPayment(OBJECT)

(一). H5

• 普通浏览器平台的支付，仍然是常规web做法。uni-app未封装。
• 在普通浏览器里也可以调起微信进行支付，这个在微信叫做H5支付，此功能未开放给普通开发者，需向微信单独申请，详见
• 微信内嵌浏览器运行H5版时，可通过js sdk实现微信支付，需要引入一个单独的js，详见 【公众号采用】

公众号调微信支付

在 uniapp 中可以使用模块方式引用微信 js-sdk ，微信官网直接下载的使用有问题，可以使用 jweixin-module。

1. 安装
   npm install jweixin-module --save
   或是下载地址：https://unpkg.com/jweixin-module@1.6.0/lib/index.js
   2.封装WexinPayFactory.js

/*
	微信支付方法(uni-app h5)适用
	获取微信加签信息
	@param{data}:获取的微信加签
	@param{res}:成功回调
	@param{fail}:失败回调
	
	@warn:因为package为严格模式下的保留字，不能用作变量.
	@use
	
		wPay({
			appId,
			timeStamp,
			nonceStr,
			signature,
			package,
			paySign
		},res=>{
			console.log(‘调用成功!‘);
		},fail=>{
			console.log(‘调用失败!‘);
		})
*/
const wx = require('jweixin-module');

class WexinPayFactory {
	wexinPay(data, successCallBack) {

		let [appId, timestamp, nonceStr, signature, packages, paySign] = [data.appId, data.timeStamp, data.nonceStr, data.sign,
			data.package, data.sign
		];

		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) {
					// 支付成功后的回调函数
					successCallBack(res);
				},
				fail(res) {
					uni.showToast({
						icon: 'none',
						title: '支付失败'
					})

					return;
				}
			});
		});

		wx.error(function(res) {
			// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
			/*alert("config信息验证失败");*/
		});
	}
	
	

};

module.exports = new WexinPayFactory();

3.使用

			const WexinPayFactory = require('../../WexinPayFactory.js');
			WexinPayFactory.wexinPay(data,function(){
				uni.showToast({
					title: "支付成功",
					duration: 2000
				});
				resolve(res);
			});

（2）跨端支付

const WexinPayFactory = require('../../WexinPayFactory.js');
/**
 * 发起微信支付
 * @param {Object} data 微信支付参数
 */
export function toPay(data) {
	return new Promise((resolve, reject) => {
		let obj = {};
		let orderInfo = {};
		// #ifdef MP-WEIXIN
		uni.requestPayment({
			'timeStamp': data.timeStamp,
			'nonceStr': data.nonceStr,
			'package': data.package,
			'signType': data.signType,
			'paySign': data.sign,
			'success': function(res) {
				resolve(res);
			},
			'fail': function(err) {
				reject(err)
			}
		});
		// #endif
		// #ifdef H5
			WexinPayFactory.wexinPay(data,function(){
				uni.showToast({
					title: "支付成功",
					duration: 2000
				});
				resolve(res);
			});
		// #endif
		// #ifdef APP-PLUS
		obj = getPayInfo(data);
		// 第二种写法，传对象字符串
		orderInfo = JSON.stringify(obj)
		uni.requestPayment({
			provider: 'wxpay',
			orderInfo: orderInfo, //微信、支付宝订单数据
			success: function(res) {
				console.log("购买",res)
				resolve(res);
			},
			fail: function(err) {
				console.log("购买失败",err)
				reject(err);
			}
		});
		// #endif
	})
}