devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：花生_TL007 | 2024-02-15 19:52:17

赞

踩

uniapp h5微信支付

一、微信支付

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

  1. paysubmit(){
  2. 	if(this.payType==0){
  3. 		//便于维护 单独写
  4. 		// #ifdef H5 
  5. 			if(this.is_weixn()){
  6. 			   this.inWxWebPay(); 
  7. 			  //  this.wxMpPay();
  8. 			}else{
  9. 			   this.wxWebPay();
  10. 			}
  11. 		// #endif
  12. 		// #ifdef APP-PLUS
  13. 		   this.wxAppPay();
  14. 		// #endif
  15. 		// #ifdef MP-WEIXIN
  16. 		   this.wxMpPay();
  17. 		// #endif
  18. 	}else{
  19. 		this.zfbPay();
  20. 		
  21. 	}
  22. }, 
  1. /**
  2. 			  * @Description: H5微信支付
  3. 			  * @author: ZXL
  4. 			  * @createTime: 2022-6-10 8:51:18
  5. 			  * @Copyright by 蓝创科技有限公司
  6. 			*/
  7. 			async wxWebPay(){
  8. 				uni.showLoading({
  9. 					title:'请稍等...'
  10. 				})
  11. 				let _this=this;
  12. 				let payInfo = {
  13. 					token: _this.token,
  14. 					duesWaterId: _this.duesWaterId,
  15. 					money: _this.shouldPay,
  16. 					type: 3,
  17. 					count: 1,
  18. 				}
  19. 				let res = await _this.request.post("/dues/setOrderWx", payInfo)
  20. 				uni.hideLoading()
  21. 				if(res.code==1){
  22. 					// #ifdef APP-PLUS
  23. 					  plus.runtime.openURL(res.map2.mweb_url);
  24. 					// #endif
  25. 					// #ifdef H5
  26. 					  window.location.href=res.map2.mweb_url
  27. 					// #endif
  28. 				}
  29. 			},

  1. /**
  2.   * @Description: 微信小程序支付
  3.   * @author: ZXL
  4.   * @createTime: 2022-6-10 11:05:26
  5.   * @Copyright by 蓝创科技有限公司
  6. */
  7. async wxMpPay(){
  8. 	uni.showLoading({
  9. 		title:'请稍等...'
  10. 	})
  11. 	let _this=this;
  12. 	let payInfo = {
  13. 		token: _this.token,
  14. 		duesWaterId: _this.duesWaterId,
  15. 		money: _this.shouldPay,
  16. 		type: 4,
  17. 		count: 1,
  18. 	}
  19. 	let res = await _this.request.post("/dues/setOrderWx", payInfo)
  20. 	uni.hideLoading()
  21. 	if(res.code==1){
  22. 		let payInfoDetail = res.map
  23. 		uni.requestPayment({
  24. 			provider: 'wxpay',
  25. 			timeStamp: res.map2.xcxtimeStamp,
  26. 			nonceStr: res.map2.xcxnonceStr,
  27. 			package: res.map2.xcxpackage,
  28. 			signType: res.map2.signType,
  29. 			paySign: res.map2.xcxpaySign,
  30. 			success: function (res) {
  31. 				_this.$set(_this.dfPayList[_this.payIndex],'payFlag',1)
  32. 				_this.$set(_this.dfPayList[_this.payIndex],'isNormal','已缴费')
  33. 				uni.showToast({
  34. 					title:'支付成功',
  35. 					icon:'success'
  36. 				})
  37. 			},
  38. 			fail: function (err) {
  39. 				uni.showToast({
  40. 					title:'支付失败',
  41. 					icon:'error'
  42. 				})
  43. 			}
  44. 		});
  45. 	}else{
  46. 		uni.showToast({
  47. 			title:res.mag,
  48. 			icon:'none'
  49. 		})
  50. 	}
  51. },
  1. /**
  2.   * @Description: APP微信支付
  3.   * @author: ZXL
  4.   * @createTime: 2022-4-16 1:56:56 
  5.   * @Copyright by 蓝创科技有限公司
  6. */
  7. async wxAppPay(){
  8. 	uni.showLoading({
  9. 		title:'请稍等...'
  10. 	})
  11. 	let _this=this;
  12. 	let payInfo = {
  13. 		token: _this.token,
  14. 		duesWaterId: _this.duesWaterId,
  15. 		money: _this.shouldPay,
  16. 		type: 2,
  17. 		count: 1,
  18. 	}
  19. 	let res = await _this.request.post("/dues/setOrderWx", payInfo)
  20. 	uni.hideLoading()
  21. 	if(res.code==1){ 
  22. 		let payInfoDetail = res.map
  23. 		let payorderInfo =  { 
  24. 			appid: payInfoDetail.appid,
  25. 			noncestr: payInfoDetail.noncestr,
  26. 			package: 'Sign=WXPay',
  27. 			partnerid: '1534302791',
  28. 			prepayid: payInfoDetail.prepayid,
  29. 			timestamp: payInfoDetail.timestamp,
  30. 			sign: payInfoDetail.sign,
  31. 		}
  32. 		uni.requestPayment({
  33. 			provider: "wxpay",
  34. 			orderInfo: JSON.stringify( payorderInfo ),
  35. 			async success( pays ) {
  36. 				_this.$set(_this.dfPayList[_this.payIndex],'payFlag',1)
  37. 				_this.$set(_this.dfPayList[_this.payIndex],'isNormal','已缴费')
  38. 				uni.showToast({
  39. 					title:'支付成功',
  40. 					icon:'success'
  41. 				})
  42. 			},
  43. 			fail( error ) {
  44. 				uni.showToast({
  45. 					title:'支付失败',
  46. 					icon:'error'
  47. 				})
  48. 			}
  49. 		})
  50. 	}else{
  51. 		uni.showToast({
  52. 			title:res.mag,
  53. 			icon:'none'
  54. 		})
  55. 	}
  56. },

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

安装npm install jweixin-module --save

  1. ##判断是否是微信内置浏览器
  2. is_weixin(){
  3. 	var ua = navigator.userAgent.toLowerCase();
  4. 	if(ua.match(/MicroMessenger/i)=='micromessenger') {
  5. 	  return true;
  6. 	} else {
  7. 	   return false;
  8. 	}
  9. }, 
  1. onLoad() {
  2. 	this.code=this.getUrlCode().code
  3. 	if(this.is_weixin()&&this.getUrlCode().code){ //判断是否是微信内置浏览器和code是否为空  然后取openid
  4. 		this.getopenId(this.getUrlCode().code);
  5. 	}
  6. 	if (this.is_weixin()&&!this.wxAuthopenId&&!this.getUrlCode().code) {
  7. 		window.location.href =
  8. 		'https://open.weixin.qq.com/connect/oauth2/authorize?appid=”你自己appid“&redirect_uri='+
  9. 		this.reqUrl+'/h5&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
  10. 	}
  11. },
  1. getUrlCode() { // 截取url中的code方法
  2. 	var url = location.search
  3. 	this.winUrl = url
  4. 	var theRequest = new Object()
  5. 	if (url.indexOf("?") != -1) {
  6. 		var str = url.substr(1)
  7. 		var strs = str.split("&")
  8. 		for(var i = 0; i < strs.length; i ++) {
  9. 			theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
  10. 		}
  11. 	}
  12. 	return theRequest
  13. },

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

 然后就是

  1. var jweixin = require('jweixin-module');
  2. 	async gopay(){
  3. 				let datas={
  4. 					duesWaterId:1,
  5. 					money:0.01, 
  6. 					token:this.token,
  7. 					count:1,
  8. 					type:4,
  9. 					openId:this.wxAuthopenId
  10. 				}
  11. 				let res = await this.request.post("/pro/dues/setOrderWx",datas)
  12. 				this.resmsg=JSON.stringify(res)
  13. 				if(res.code==1){
  14. 					this.paysign(res)
  15. 				} 
  16. 			},
  17. 			paysign(res){ 
  18. 				jweixin.config({
  19. 					debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  20. 					appId: res.mapConfig.appId, // 必填，公众号的唯一标识
  21. 					timestamp: res.mapConfig.timestamp, // 必填，生成签名的时间戳
  22. 					nonceStr: res.mapConfig.noncestr, // 必填，生成签名的随机串
  23. 					signature: res.mapConfig.signature, // 必填，签名
  24. 					jsApiList: ['chooseWXPay'], 
  25. 				});
  26. 				jweixin.ready(function() {
  27. 					jweixin.checkJsApi({
  28. 						jsApiList: ['chooseWXPay'], // 需要检测的JS接⼝列表，所有JS接⼝列表见附录2,
  29. 						success: function(res) {
  30. 						},
  31. 						fail:function(res) {
  32. 						}
  33. 					});
  34. 					jweixin.chooseWXPay({
  35. 						appId: res.map2.xcxappId,
  36. 						timestamp: res.map2.xcxtimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  37. 						nonceStr: res.map2.xcxnonceStr, // 支付签名随机串，不长于 32
  38. 						package: res.map2.xcxpackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  39. 						signType: res.map2.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
  40. 						paySign: res.map2.xcxpaySign, // 支付签名
  41. 						success: function(res) {
  42. 							uni.showToast({
  43. 								title: "付款成功！",
  44. 								duration: 1000
  45. 							})
  46. 						},
  47. 						cancel: function(res) {
  48. 							uni.showToast({
  49. 								title: "付款失败！",
  50. 								duration: 1000
  51. 							})
  52. 						},
  53. 						fail: function(res) {
  54. 							uni.showToast({
  55. 								title: "付款失败！",
  56. 								duration: 1000
  57. 							})
  58. 						}
  59. 					});
  60. 				})
  61. 			},

二、H5打开微信小程序

1.微信js-sdk安装

  1. npm install weixin-js-sdk
  2. 我用的uni-app
  3. npm install wecomjsdk

2.在使用的页面引入

  1. import wx from 'weixin-js-sdk'
  2.  
  3. 我使用的uni-app
  4. var wx = require('wecomjsdk')

3.代码

  1. <wx-open-launch-weapp id="launch-btn" appid="" path="/pages/index/index">
  2. 	       <script type="text/wxtag-template">
  3. 	           <style>.btn { display:block; padding: 12px; color: red }</style>
  4. 	           <button class="btn">打开小程序</button>
  5. 	       </script>
  6. 	    </wx-open-launch-weapp>
  1.  
  2. methods: {
  3.     // 监听error 函数
  4.     handleErrorFn(e) {
  5.       console.log('跳转失败', JSON.stringify(e))
  6.     },
  7.     // 监听launch 函数
  8.     handleLaunchFn(e) {
  9.       console.log('跳转成功', JSON.stringify(e))
  10.     },
  11.     wx.config({
  12. 		beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
  13. 		debug: true,
  14. 		appId: res.corpId, // 企业微信的corpID
  15. 		timestamp: res.timeStampSec, // 生成签名的时间戳
  16. 		nonceStr: res.nonceStr, // 生成签名的随机串
  17. 		signature: res.sign,// 签名， --------------需要后台把生成签名的url改为当前页面url（pagesWork/skipWx/skipWx）,后台生成签名的请求接口参考文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
  18. 		jsApiList: ['wx-open-launch-weapp','chooseImage', 'previewImage'],
  19. 		openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
  20. 		success(){
  21. 			uni.showModal({
  22. 			   title:"成功提示",
  23. 			   content:"success"
  24. 		    })
  25. 		},
  26. 		fail(){
  27. 			uni.showModal({
  28. 			   title:"失败提示",
  29. 			   content: JSON.stringify(res)
  30. 			})
  31. 		}
  32.     }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/86477
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号