uniap之微信公众号支付

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

先封装util.js,便于后面调用
javascript 复制代码
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
javascript 复制代码
import util from 'common/util.js'
再在onload里判断获取code
javascript 复制代码
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;
	}
}
最后再需要支付的地方进行调用
javascript 复制代码
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,至此,就结束了,喵~

相关推荐
WJ.Polar2 分钟前
Python数据容器-list和tuple
开发语言·python
FrostedLotus·霜莲16 分钟前
C++主流编辑器特点比较
开发语言·c++·编辑器
超级码.里奥.农18 分钟前
零基础 “入坑” Java--- 七、数组(二)
java·开发语言
KENYCHEN奉孝27 分钟前
Rust征服字节跳动:高并发服务器实战
服务器·开发语言·rust
挺菜的35 分钟前
【算法刷题记录(简单题)002】字符串字符匹配(java代码实现)
java·开发语言·算法
妮妮喔妮2 小时前
【无标题】
开发语言·前端·javascript
fie88892 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
喝可乐的布偶猫2 小时前
Java类变量(静态变量)
java·开发语言·jvm
喝可乐的布偶猫2 小时前
韩顺平之第九章综合练习-----------房屋出租管理系统
java·开发语言·ide·eclipse
江山如画,佳人北望3 小时前
C#程序入门
开发语言·windows·c#