uniap之微信公众号支付

近来用uniapp开发H5的时候，需要接入支付，原来都是基于后端框架来做的，所以可谓是一路坑中过，今天整理下大致流程分享给大家。

先封装util.js，便于后面调用

const isWechat =function(){
	return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger';
}
const wechatAppid = function() {
  return '你的appid';
}
const payed = function(data){
	WeixinJSBridge.invoke('getBrandWCPayRequest', data, function(respay) {
		if (respay.err_msg === "get_brand_wcpay_request:ok") {
			uni.showToast({
				title:'支付成功',
				icon:"none"
			})
		} else if (respay.err_msg === "get_brand_wcpay_request:cancel") {
			uni.showToast({
				title:"取消支付",
				icon:"none",
				duration:2000
			})
		} else if (respay.err_msg === "get_brand_wcpay_request:fail") {
			uni.showToast({
				title:"支付失败",
				icon:"none",
				duration:2000
			})
		}
	}, function(err) {
		uni.showToast({
			title:err,
			icon:"none",
			duration:2000
		})
	})
}
/**
 * http请求
 * action 方法名
 * data  传输数据
 * Method 请求方式 GET POST
 */
const Requests = function (action,data,Method='GET',event) {
	var headers = {
		'content-type': 'application/json' // 默认值
	}
	if (Method == 'POST') {
		headers = {
			'content-type': 'application/x-www-form-urlencoded' // 默认值
		}
	}
	uni.request({
		url: config.requestUrl + action,
		method:Method,
		header:headers,
		data: data,
		success(res) {
			if (res.data.status == 100) {
				return event(res.data);
			}else {
				uni.showToast({
					title: res.data.msg,
					icon:'none'
				})
			}
		},fail() {
			uni.showToast({
			  title: '网络异常',
			  icon: 'none',
			  duration: 2000
			})
		}
	})
}
export default {
	isWechat,
	wechatAppid,
	payed,
	Requests 
}

在需要调用支付的页面判断环境跳转获取code

先在页面加载util.js

import util from 'common/util.js'

再在onload里判断获取code

if(!options.code === false){
	this.code  =options.code
}else{
	if(util.isWechat()){
		let appid = util.wechatAppid();
		let local = window.location.href;
		window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+encodeURIComponent(local)+'&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
		return;
	}
}

最后再需要支付的地方进行调用

var that = this
//先创建订单
util.Requests('order/createOrder',{id:that.id},'POST',  function(eve) {
		var eves = eve.result
		//再从后台获取统一下单支付参数
		util.Requests('pay/pay',{order_id:eves,code:that.code},'POST',  function(event) {
			util.payed(event.result)
	})
})

ok,至此，就结束了，喵~