1.业务描述：微信小程序商城入口进入的页面是商城H5页面，在H5页面进行微信支付如何实现；
2.微信小程序(webview访问H5页面)必须使用微信小程序支付；
如何实现以及实现方式以及支付后页面返回功能：
商品详情（h5页面）-->商品确认页（h5页面）-->收银台（h5页面）（点击调用小程序支付页面并关闭收银台）-->进入小程序支付页面（小程序）（根据支付结果判断下一步跳转页面）
支付成功跳转落地页(h5页面)（点击返回-->商品详情）
支付失败跳转回收银台(h5页面)（点击返回-->商品详情）
1).收银台页面
//store - action
import wx from 'weixin-js-sdk'
/**
* 微信JSSDK调用小程序页面并传递支付信息 vuex--action
* @param {*} param0
* @param {*} payType
*/
AWechatJsPay ({ state, commit, dispatch, rootState }) {
const openId = rootState.wechat.openId
const params = { openId, payMethod: 'JSAPI', payType: '1' }
return dispatch('AGetPaymentSignInfo', params).then(res => {
const { data: signature, error } = res
if (error) {
return Promise.resolve(error)
}
const payParamsStr = encodeURIComponent(JSON.stringify(signature));
const paymentQuery = encodeURIComponent(location.hash.split('?')[1]);
const url=`../wxpay/wxpay?payParams=${payParamsStr}&paymentQuery=${paymentQuery}`;
console.log('url---payParams:', url, signature);
//跳转到小程序支付界面wxPay
return new Promise((resolve) =>{
wx.miniProgram.navigateTo({
url,
success: function(){
resolve()
},
fail: function(){
resolve('调起支付失败')
}
});
})
})
}
//vue - js
store.dispatch('payment/AWechatJsPay').then(res => {
res && Toast(res)
!res && router.back(); //调起小程序支付后关闭收银台
})
2).小程序支付代码
// pages/wxpay/wxpay.wxml
<view class='wrapper'></view>
// pages/wxpay/wxpay.js
Page({
onLoad: function (options) {
console.log('支付开始');
console.log('======',options);
if(options){
const _this = this;
const { payParams, paymentQuery } = options;
const payParam = JSON.parse(decodeURIComponent(payParams));
const params = { paymentQuery: decodeURIComponent(paymentQuery) }
wx.requestPayment({
...payParam,
'success': function (res) {
console.log('=======支付成功==========', res);
params.type = "success";
params.msg = "支付成功";
_this.goNextStep(params);
},
'fail': function (res) {
let msg="支付失败";
if (res.errMsg.indexOf("fail cancel"))
{
msg="支付取消";
}
console.log('=========未支付========', msg)
params.type = "fail";
params.msg = msg;
_this.goNextStep(params);
}
})
}
},
//进行测试
goNextStep: function(params){
const { type, msg, paymentQuery } = params;
const queryStr = type === 'fail' ? paymentQuery : 'payResult=payResult'
const data = { type, msg, queryStr }
// 开启存储
wx.setStorage({
key: "ProductShopPayment",
data,
success() {
wx.navigateBack({
delta: 1, //返回1个页面
});
}
})
}
})
3).微信小城市商城入口页面
// shop.wxml
<web-view src="{{targetUrl}}"></web-view>
// shop.js
//获取应用实例
const wxApp = getApp()
Page({
data: {
targetUrl:''
},
onLoad(options){
const urlbase = wxApp.globalData.eshopBaseUrl+'?v='+ Date.now() + '/#/productList';
const users = {
userId: '1',
openId: 'o',
userName: '张三',
phone: '123324234534'
}
const userInfo = encodeURIComponent(JSON.stringify(users));
this.setData({
targetUrl: urlbase + '?userInfo=' +userInfo
});
// 首次要清空存储去掉不可预测的意外存储
wx.removeStorage({key: 'ProductShopPayment'})
},
// 页面再次显示的钩子
onShow(){
console.log('=====onShow: ProductShopPayment用于商城微信小程序支付页面回调标识====')
const _this = this;
wx.getStorage({
key: "ProductShopPayment",
success(res) {
// 每次取完值后进行清空处理
wx.removeStorage({ key: 'ProductShopPayment' });
console.log('支付后回调', res.data)
// type:支付结果，mag: 支付结果信息提示可用于tips, queryStr:回调页面数据入参,支付成功进入落地页，支付失败跳到收银台
const { type, msg, queryStr} = res.data
if(res.data){
const path = type==='success' ? "/#/result" : "/#/payment"
const url = wxApp.globalData.eshopBaseUrl+'?v='+ Date.now() + path+ '?' + queryStr;
_this.setData({
targetUrl: url
});
}
}
})
}
})
难点：梳理需求业务流程
