uni-app微信支付和H5打开微信小程序

一、微信支付

1. this.payType==0就是微信支付  支付宝支付代码就不贴了

paysubmit(){
	if(this.payType==0){
		//便于维护 单独写
		// #ifdef H5 
			if(this.is_weixn()){
			   this.inWxWebPay(); 
			  //  this.wxMpPay();
			}else{
			   this.wxWebPay();
			}
		// #endif
		// #ifdef APP-PLUS
		   this.wxAppPay();
		// #endif
		// #ifdef MP-WEIXIN
		   this.wxMpPay();
		// #endif
	}else{
		this.zfbPay();
		
	}
}, 

/**
			  * @Description: H5微信支付
			  * @author: ZXL
			  * @createTime: 2022-6-10 8:51:18
			  * @Copyright by 蓝创科技有限公司
			*/
			async wxWebPay(){
				uni.showLoading({
					title:'请稍等...'
				})
				let _this=this;
				let payInfo = {
					token: _this.token,
					duesWaterId: _this.duesWaterId,
					money: _this.shouldPay,
					type: 3,
					count: 1,
				}
				let res = await _this.request.post("/dues/setOrderWx", payInfo)
				uni.hideLoading()
				if(res.code==1){
					// #ifdef APP-PLUS
					  plus.runtime.openURL(res.map2.mweb_url);
					// #endif
					// #ifdef H5
					  window.location.href=res.map2.mweb_url
					// #endif
				}
			},

/**
  * @Description: 微信小程序支付
  * @author: ZXL
  * @createTime: 2022-6-10 11:05:26
  * @Copyright by 蓝创科技有限公司
*/
async wxMpPay(){
	uni.showLoading({
		title:'请稍等...'
	})
	let _this=this;
	let payInfo = {
		token: _this.token,
		duesWaterId: _this.duesWaterId,
		money: _this.shouldPay,
		type: 4,
		count: 1,
	}
	let res = await _this.request.post("/dues/setOrderWx", payInfo)
	uni.hideLoading()
	if(res.code==1){
		let payInfoDetail = res.map
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: res.map2.xcxtimeStamp,
			nonceStr: res.map2.xcxnonceStr,
			package: res.map2.xcxpackage,
			signType: res.map2.signType,
			paySign: res.map2.xcxpaySign,
			success: function (res) {
				_this.$set(_this.dfPayList[_this.payIndex],'payFlag',1)
				_this.$set(_this.dfPayList[_this.payIndex],'isNormal','已缴费')
				uni.showToast({
					title:'支付成功',
					icon:'success'
				})
			},
			fail: function (err) {
				uni.showToast({
					title:'支付失败',
					icon:'error'
				})
			}
		});
	}else{
		uni.showToast({
			title:res.mag,
			icon:'none'
		})
	}
},

/**
  * @Description: APP微信支付
  * @author: ZXL
  * @createTime: 2022-4-16 1:56:56 
  * @Copyright by 蓝创科技有限公司
*/
async wxAppPay(){
	uni.showLoading({
		title:'请稍等...'
	})
	let _this=this;
	let payInfo = {
		token: _this.token,
		duesWaterId: _this.duesWaterId,
		money: _this.shouldPay,
		type: 2,
		count: 1,
	}
	let res = await _this.request.post("/dues/setOrderWx", payInfo)
	uni.hideLoading()
	if(res.code==1){ 
		let payInfoDetail = res.map
		let payorderInfo =  { 
			appid: payInfoDetail.appid,
			noncestr: payInfoDetail.noncestr,
			package: 'Sign=WXPay',
			partnerid: '1534302791',
			prepayid: payInfoDetail.prepayid,
			timestamp: payInfoDetail.timestamp,
			sign: payInfoDetail.sign,
		}
		uni.requestPayment({
			provider: "wxpay",
			orderInfo: JSON.stringify( payorderInfo ),
			async success( pays ) {
				_this.$set(_this.dfPayList[_this.payIndex],'payFlag',1)
				_this.$set(_this.dfPayList[_this.payIndex],'isNormal','已缴费')
				uni.showToast({
					title:'支付成功',
					icon:'success'
				})
			},
			fail( error ) {
				uni.showToast({
					title:'支付失败',
					icon:'error'
				})
			}
		})
	}else{
		uni.showToast({
			title:res.mag,
			icon:'none'
		})
	}
},

下面是微信内置浏览器支付

安装npm install jweixin-module --save

##判断是否是微信内置浏览器
is_weixin(){
	var ua = navigator.userAgent.toLowerCase();
	if(ua.match(/MicroMessenger/i)=='micromessenger') {
	  return true;
	} else {
	   return false;
	}
}, 

onLoad() {
	this.code=this.getUrlCode().code
	if(this.is_weixin()&&this.getUrlCode().code){ //判断是否是微信内置浏览器和code是否为空  然后取openid
		this.getopenId(this.getUrlCode().code);
	}
	if (this.is_weixin()&&!this.wxAuthopenId&&!this.getUrlCode().code) {
		window.location.href =
		'https://open.weixin.qq.com/connect/oauth2/authorize?appid=”你自己appid“&redirect_uri='+
		this.reqUrl+'/h5&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
	}
},

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
},

async getopenId(codes){
	let res = await this.request.post("/pro/Wx/WxInformation",{code:codes})
	if(res.code==1){
		this.res=JSON.stringify(res)
		uni.setStorageSync('wxAuthopenId', res.openId);
		this.setWxAuthopenId(uni.getStorageSync('wxAuthopenId'))
	}
},

 然后就是

var jweixin = require('jweixin-module');
	async gopay(){
				let datas={
					duesWaterId:1,
					money:0.01, 
					token:this.token,
					count:1,
					type:4,
					openId:this.wxAuthopenId
				}
				let res = await this.request.post("/pro/dues/setOrderWx",datas)
				this.resmsg=JSON.stringify(res)
				if(res.code==1){
					this.paysign(res)
				} 
			},
			paysign(res){ 
				jweixin.config({
					debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: res.mapConfig.appId, // 必填，公众号的唯一标识
					timestamp: res.mapConfig.timestamp, // 必填，生成签名的时间戳
					nonceStr: res.mapConfig.noncestr, // 必填，生成签名的随机串
					signature: res.mapConfig.signature, // 必填，签名
					jsApiList: ['chooseWXPay'], 
				});
				jweixin.ready(function() {
					jweixin.checkJsApi({
						jsApiList: ['chooseWXPay'], // 需要检测的JS接⼝列表，所有JS接⼝列表见附录2,
						success: function(res) {
						},
						fail:function(res) {
						}
					});
					jweixin.chooseWXPay({
						appId: res.map2.xcxappId,
						timestamp: res.map2.xcxtimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: res.map2.xcxnonceStr, // 支付签名随机串，不长于 32
						package: res.map2.xcxpackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: res.map2.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: res.map2.xcxpaySign, // 支付签名
						success: function(res) {
							uni.showToast({
								title: "付款成功！",
								duration: 1000
							})
						},
						cancel: function(res) {
							uni.showToast({
								title: "付款失败！",
								duration: 1000
							})
						},
						fail: function(res) {
							uni.showToast({
								title: "付款失败！",
								duration: 1000
							})
						}
					});
				})
			},

二、H5打开微信小程序

1.微信js-sdk安装

npm install weixin-js-sdk
我用的uni-app
npm install wecomjsdk

2.在使用的页面引入

import wx from 'weixin-js-sdk'

我使用的uni-app
var wx = require('wecomjsdk')

3.代码

<wx-open-launch-weapp id="launch-btn" appid="" path="/pages/index/index">
	       <script type="text/wxtag-template">
	           <style>.btn { display:block; padding: 12px; color: red }</style>
	           <button class="btn">打开小程序</button>
	       </script>
	    </wx-open-launch-weapp>

methods: {
    // 监听error 函数
    handleErrorFn(e) {
      console.log('跳转失败', JSON.stringify(e))
    },
    // 监听launch 函数
    handleLaunchFn(e) {
      console.log('跳转成功', JSON.stringify(e))
    },
    wx.config({
		beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
		debug: true,
		appId: res.corpId, // 企业微信的corpID
		timestamp: res.timeStampSec, // 生成签名的时间戳
		nonceStr: res.nonceStr, // 生成签名的随机串
		signature: res.sign,// 签名， --------------需要后台把生成签名的url改为当前页面url（pagesWork/skipWx/skipWx）,后台生成签名的请求接口参考文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
		jsApiList: ['wx-open-launch-weapp','chooseImage', 'previewImage'],
		openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
		success(){
			uni.showModal({
			   title:"成功提示",
			   content:"success"
		    })
		},
		fail(){
			uni.showModal({
			   title:"失败提示",
			   content: JSON.stringify(res)
			})
		}
    }