微信小程序webview(H5页面)调用微信小程序支付

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
          });
        }
      }
    })
  }

})

难点：梳理需求业务流程