微信浏览器调用微信支付完整流程

判断是否微信环境

	//判断是否是微信浏览器
	isWechatBrowser() {
		let status = navigator.userAgent.toLowerCase()
		return (status.match(/MicroMessenger/i) == "micromessenger")
	},

获取code

	getCodeUrl() {
		//公众号的唯一标识
		const APPID = 'xxxxxxxxxxxxx'
		//授权后重定向的回调链接地址
		const REDIRECT_URI = encodeURIComponent('https://xxxxx')
		const SCOPE = 'snsapi_base' //静默获取无需确定snsapi_base 需用户手动确定snsapi_userinfo
		var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=` + APPID +
			`&redirect_uri=` + REDIRECT_URI + `&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
		return url
	},

获取网页地址中的参数

	// 获取网页地址中的参数
	getUrlParam(name) {
		return this.getParam(window.location.href, name)
	},
	// 获取网页地址中的参数
	getParam(url, name) {
		url = url.substr(url.indexOf("?"))
		const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
		const r = url.substr(1).match(reg)
		if (r != null) {
			return decodeURIComponent(r[2]).replace("#", "")
		}
		return ""
	},

获取openid完整逻辑

//先判断本地是否已经有openid，如果没有则判断是否当前环境是否是微信环境，
getOpenid() {
		return new Promise((resolve, reject) => {
			//从本地获取openid
			let openid = this.getOpenid()
			if (openid) {
				logger.debug('从缓存获得openid', openid)
				resolve(openid)
				return
			} else {
				logger.info('开始获取openid')
				if (this.isWechatBrowser()) { // 微信浏览器
					let code = this.getUrlParam('code')
					if (code) {
						logger.info('获取到code', code)
						http.getOpenid({
								code: code,
								appId: 'xxxxxxxxxxxxx'
							})
							.then(r => {
								logger.debug('从服务器获得openid', r)
								//获取到openid之后保存本地
								this.setOpenid(r.data)
								resolve(r.data)
							})
							.catch(e => {
								logger.error('获取openid错误', e)
								window.location.href = this.getCodeUrl()
							})
					} else {
						//如果本地没有openid，地址栏也没有code则获取code
						window.location.href = this.getCodeUrl()
					}
				} else { // 其他浏览器
					logger.warn('非微信环境，无法获取openid')
				}
			}
		})
	},	

调用微信支付（pay.js)

	//建议封装，新建pay.js文件
	// 预下单
	preOrder(options, resolve, reject) {
		http.preOrder(options)
			.then(r => {
				resolve(r)
			})
			.catch(r => {
				reject(r)
			})
	},
	// 拉起微信支付
	jsPay(openid, orderNo, price, resolve, reject) {
		http.createJsOrder({
				orderNo: orderNo,
				openid: openid,
				price: price,
				appId: common.config().mpAppId
			})
			.then(r => {
				logger.warn('WeixinJSBridge拉起支付', r)
				WeixinJSBridge.invoke('getBrandWCPayRequest', {
					"appId": r.data.appId,
					"timeStamp": r.data.timeStamp,
					"nonceStr": r.data.nonceStr,
					"package": r.data.packageVal,
					"signType": r.data.signType,
					"paySign": r.data.paySign,
				}, r => {
					if (r.err_msg === "get_brand_wcpay_request:ok") {
						// 使用以上方式判断前端返回,微信团队郑重提示：
						// r.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						logger.info('WeixinJSBridge支付成功', r)
						resolve(r)
					} else {
						logger.error('WeixinJSBridge支付失败', r)
						reject(r)
					}
					// WeixinJSBridge.log(response.err_msg)
				})
			})
			.catch(e => {
				logger.error('createJsOrder支付异常', e)
				reject(e)
			})
	},

调用微信支付（vue）

//预下单
preOrder(callback, failed) {
	let params = {
		//请求参数
	}
	pay.preOrder(params, r => {
		logger.info('预下单', r)
		this.yu_data = r.data
		if (callback != null) callback()
		}, e => {
			if (failed != null) failed(e)
		})
	},

this.preOrder(() => {
	var getData = this.yu_data
	this.$http.action({
			message: '重新进行预下单生成新的单号成功H5'
	})
	// 拉起支付
	pay.jsPay(common.getOpenid(), this.yu_data.orderNo, this.yu_data.price,
		r => {
			console.log('拉起支付成功', r)
		}, e => {
			console.log('拉起支付失败', e)
		})
	}, (e) => {
		console.log('预下单失败', e)
	})
return