服务商模式下，微信小程序的h5调起支付总结

这篇文章主要是根据前阵子小程序嵌入h5商城遇到的问题进行总结而发的。

首先嵌入h5页面浏览什么的都正常，支付失败。度娘问了一下，原因是小程序不支持H5的jssdk的支付，然后百度到一个帅哥的博客是很详细的，看我这篇文章前先看他的，

链接如下：https://blog.csdn.net/tm7796/article/details/108076250

我看完他做完之后，有了以下疑问

1、一个公众号可能有多个小程序，每个人从不同的小程序进入H5，openId肯定是不一样的，要怎么获取用户的openid和区分小程序？。

2、支付传的参数是h5调用支付的参数还是用小程序的？看帅哥文章上并没有说明，猜测是用小程序的

 

既然没有说明，帅哥链接的都实现了，那我按照思路也能走一波。然后就遇到了下面一系列问题：

1.首先后台需要openid才能生成订单，所以前端跳转H5页面时要带code给到后台解析得到opneid。

2.由于可能有好多个小程序链到商城，每个小程序的appid是不一样的，不一样的appid就对应不同的openid，所以前端跳转H5的时候也要带上小程序appid给后台。

3.H5下单后怎么按返回键都返回不到小程序本身，怎么设置返回首页按钮？

4.支付的时候拿到参数调用支付时出现帅哥文章一样的“商户传入的appid参数不正确，请联系商户处理”再次检查不是配置问题，后面发现是因为后台返回的支付参数是H5调起支付的参数，这肯定是不行的，一定是要后台用小程序本身的appid进行调用生成的参数后台改过来后整个支付调通。

关于1和2的解决方法如下，（1）先在小程序app.js里面获取小程序appid（因为我的小程序有多处用到小程序appid,所以在app.js先获取，你们也可以按自己喜好放）

//在app.js里面获取小程序的appid
const accountInfo = wx.getAccountInfoSync();
console.log(accountInfo.miniProgram.appId) // 小程序 appId
wx.setStorageSync('myAppId', accountInfo.miniProgram.appId) 

(2)在进入web-view的时候设置链接带相关参数（h5接收的参数的名字要对应好哦，我这边小程序appid在H5那边解析的是mini_appid），如下：

onLoad: function (options) {
    console.log(app.globalData.shop_url)
    let that = this;
    wx.login({
      success (res) {
        if (res.code) {
          //发起网络请求
          console.log(res.code)
            //app.globalData.shop_url是我动态获取的路径，可以自己写成静态
            that.setData({link_url:app.globalData.shop_url+'&code='+ res.code+'&mini_appid='+wx.getStorageSync('myAppId')})
        }
      }
    })  
  },

3.H5下单后怎么按返回键都返回不到小程序本身，由于的我商城入口就是首页进去的，所以我只要在跳转到H5页面的时候不让页面进入页面栈即可，如下：

wx.redirectTo({ url: '/pages/advert_to_shop/advert_to_shop' });

支付调起前先新增个页面，用来专门调起支付，（H5调起支付的时候，传参给小程序），下面是H5调起小程序的代码

wx.miniProgram.navigateTo({ url: 'pages/pay/pay?payDataStr=' + payDataStr });//payDataStr是支付的参数

第四个问题，就是直接让后台自己去处理啦，不过前端代码我还是要给上的，H5调起小程序

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log("webview传过来的参数", options)
        //字符串转对象
        let payData =  JSON.parse(decodeURIComponent(options.payDataStr))
        console.log("payData", payData)
        //支付
        wx.requestPayment({
          appId:wx.getStorageSync('myAppId'),
          timeStamp: payData.timestamp,
          nonceStr: payData.nonceStr,
          package: payData.package,
          signType: payData.signType,
          paySign: payData.paySign,
          success(res) {
            console.log("支付成功", res)
            app.globalData.shop_url = app.globalData.use_url + 'pages/order-details/index?orderNo='+payData.orderNo+'&orderType='+payData.orderType+'&appId='+app.globalData.use_appid 
            // 支付成功跳转页面
            wx.redirectTo({
              url: '/pages/advert_to_shop/advert_to_shop',
            })
            console.log(app.globalData.shop_url)
          },
          fail(res) {
            console.log("支付失败", res)
          }
        })
    },

以上是遇到的坑和解决的方案。