阅读 172

h5微信支付功能封装

因为各种原因吧,我们在做移动端开发的时候,涉及到money,我们经常要做微信支付。如果是做小程序开发,我们可以直接用小程序的原生接口,一键搞定,如果是h5网页的话,那我们就需要使用微信提供的js-sdk了。 注:使用了jssdk不是所有的环境都可以调用微信来支付,它只是单纯的微信环境下支付,如果要想支持非微信浏览器内支付,需要开通微信h5支付功能,我们现在用的都是微信的JSAPI支付,而微信的h5支付是要求商户已有H5商城网站,并且已经过ICP备案。哈哈哈哈,是不是很惊讶!太坑了呀! 虽然坑,还得用,那咱就搞一下它。 首先,打开我们的微信公众平台,阅读一下网页开发的基本要求

developers.weixin.qq.com/doc/offiacc…

然后我们了解到,使用js-sdk,我们先要image.png 也就是我们先要把你们的后台有效访问地址给放到微信里,然后我们再通过npm或者cdn的方式,引入js-sdk。 这里我是用npm安装的weixin-js-sdk,也可以自行根据需要去cdn链接。

npm install weixin-js-sdk --save
复制代码

然后呢,这里给你们讲一下,我们接下来要做的事情。 首先呢,我们要先要获得网页授权,然后我们跳转我们项目中的业务页面。

image.png

window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?
appid=你的APPID&
redirect_uri=${encodeURIComponent('你的业务页面地址?params='你可能需要传递的参数,没有不写,')}
&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
复制代码

这里主要是appid和重定向页面,至于是否弹出授权页面(scope=snsapi_userinfo/snsapi_base )等等,根据你自己需求来。然后呢,我们通过这个来进入页面的时候,在当前你支付页面的url上会有授权后返回的code参数。 如果提示:调用支付jsapi缺少参数: key0key0 这是由于没拿到openid导致,可以把window.location.href 替换成window,location.replace() ,这是因为微信网页授权会2次刷新页面,我们这样做能有效避免错误。 然后呢,我们定义一个方法

//获取网页url?后面的参数值
 export function getQueryString(name) {
   var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
   var r = window.location.search.substr(1).match(reg);
   if (r != null) {
     return unescape(r[2]);
   }
   return null;
 }
复制代码

通过 let code = this.getQueryString('code'),我们去调用后端提供的接口,来获取openId。我们的支付不需要我去另外获取openId了,同学们自行卑微的通过接口用code换取openId吧 要注意的是,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期 。 然后我们接下来就是我们真正进行支付操作的时刻了

import { getWxConfig } from 'api/index/index.js';
import { wxPay } from 'api/index/index.js';
import md5 from 'js-md5';
import wx from 'weixin-js-sdk'
export default {
	//判断是否在微信中  
	isWechat: function() {
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/micromessenger/i) == 'micromessenger') {
			// console.log('是微信客户端')
			return true;
		} else {
			// console.log('不是微信客户端')
			return false;
		}
	},
	//初始化sdk配置  
	initJssdk: function(callback, url) {
		//服务端进行签名
		let data = {
			url: encodeURIComponent(url)
		}
		//服务端签名接口
		getWxConfig(data).then(res => {
			if (res.status == 1000) {
				if (res.data) {
                    //如果报config:invalid signature 错误,而signature签名
                    //和微信校验工具签名是一样的
                    //那么可能是公众号后台没有配置接口域名白名单或者配置错误
					wx.config({
						debug: false,// 开启调试模式,查看调用的所有api的返回值
						appId: res.data.appId,// 必填,公众号的唯一标识
						timestamp: res.data.timestamp,// 必填,生成签名的时间戳
						nonceStr: res.data.nonceStr,//必填,生成签名的随机串
						signature: res.data.signature,// 必填,签名
						jsApiList: [
							'checkJsApi',
							'chooseWXPay'
						]//必填,需要使用的JS接口列表,具体使用那些sdk接口根据自己需要来填写
					});
					//配置完成后,再执行分享等功能  
					if (callback) {
						callback(res.data);
					}
				}
			}
		}).catch(err => {})
	},
	//在需要微信支付页面调用
	weixinPay: function(orderId,url) {
		url = url ? url : window.location.href.split('#')[0];
		this.initJssdk(function(callback) {
			wx.ready(function() {
				//我们自己需要传递的支付参数
				let dataId={
					orderId:orderId,
                        //这里你们可能有openId
				}
				wxPay(dataId).then(res=>{
					let packagea = "prepay_id=" + res.data.prepay_id;
					let timestamp = new Date().getTime();
					let paySign=`appid=你的appId&timestamp=${timestamp} 
                    &nonceStr=${res.data.nonce_str}&package=${packagea}&signType=MD5`;
					paySign = md5(paySign);
                    //如果你在调用支付时,错误提示为: 支付返回签名错误
                    //可能是由于后台生成签名时参数大小写没有按照官方文档
                    //大小写来生成签名。故一定要严格按照官方文档要求开发
					wx.chooseWXPay({
						timestamp:timestamp, // 支付签名时间戳,
                        //注意微信jssdk中的所有使用timestamp字段均为小写
						nonceStr:res.data.nonce_str, // 支付签名随机串,不长于 32 位
						package: packagea, // 统一支付接口返回的prepay_id参数值
                         //提交格式如:prepay_id=***)
						signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
						paySign:paySign, // 支付签名
						success(res) {
							// 支付成功后的回调函数
							if(res.errMsg == "chooseWXPay:ok"){
								let url = '/pages/templates/user-list'
								//我自己的跳转方法,可以忽略去写你们自己的成功后回调业务
								this.$navTo.togo(url,param)
							}
							
						},
						fail(res) {
							//失败后的操作
						}
					});
				})
			});
		}, url);
		
	},
	
}
复制代码

到这里,我们的微信支付基本就是完成了.其实整体做下来我们发现,无非是比把大象装冰箱里多两步而已

步骤一:绑定域名
步骤二:引入jssdk
步骤三:通过config接口注入权限验证配置
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
});
步骤四:通过ready接口处理成功验证
wx.ready(function(){
  // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,
  //config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数
  //中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
步骤五:调用支付接口,over
复制代码

然后我们把我们封装的接口用起来

//在入口文件main.js中
import wechat from './common/wechat'
if(wechat.isWechat()){
    Vue.prototype.$wechat =wechat;
}
复制代码
//页面使用
let url = 定义的url或者空,方法里可以自己获取当前页面url;
this.$wechat.isWechat //判断一下是否微信环境,然后做出相对业务操作
this.$wechat.weixinPay(this.orderForm.orderId,url);
复制代码

到此,一个完整的h5微信支付就完成了。下一次,我们把微信分享也添加进来。这样,一个我们常用的基于微信SDK的支付分享功能就被我们完成了。如果觉得对你有帮助的话,帮作者点个赞吧,码文不易,点一下支持支持!谢谢您嘞!

文章分类
前端
文章标签