该文章或问题已被删除

H5网站 在微信小程序中,如果使用微信支付?

如果我们的网站,之前开发,是使用微信公众号里的" 微信支付 " 那么在微信小程序中,是无法再使用的,在微信小程序中只能使用小程序的微信支付才行。

那要怎么使 H5 页面中调起 小程序微信支付呢?其他也不难,我们可以建一个原生的pay.wxml 页面,里写个支付的按键,调起微信小程序的微信支付功能。

1. 假如我们的H5订单页面在跳转之前已经生成了预付订单,然后把订单号和一些其他相关参数传到  支付的页面,再传到服务器,返回参数再调起微信支付。

H5打开微信支付页面,把订单号传过去

wx.miniProgram.navigateTo({url:"pages/pay/pay?ordernum=5236612555&uid=02&key=m2566dfvvdf256dfdf"});



 小程序 pay.wxml 页面,

<view class='body'>
<form bindsubmit="submitInfo" report-submit='true' >
<view class='body-title'><text>{{title}}</text></view>
<view class='body-view'><text >{{atm}}</text></view>
<view class='body-text'><text class='manyiwl'>混合APP开发社区</text> <text>收款方</text></view>
<view class="btn-area">
<button type="primary" form-type="submit">确认支付</button>
</view>
</form>
</view>
let numbers="";
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    this.setData({title:options.title,atm:options.atm});
    numbers = options.num; 
  },
  submitInfo: function (e) 
  {
    console.log("FOMEID:"+e.detail.formId);
    console.log("numbers:" + numbers);
    let num = numbers;
    let formId = e.detail.formId;
    wx.showLoading({
      title: '微信支付...',
      mask: true
    });

    wx.request({
      url: 'http://www.html5-app.com/pay.php', //接口地址
      data: {
        num: num,
        formId: formId
      },
      success: function (res) {
        console.log("DATA:" + JSON.stringify(res.data))
        wx.hideLoading();
        if (res.data.code == "000000") {
          wx.requestPayment(
            {
              'timeStamp': res.data["wx"].timeStamp,
              'nonceStr': res.data["wx"].nonceStr,
              'package': res.data["wx"].package,
              'signType': 'MD5',
              'paySign': res.data["wx"].paySign,
              'success': function (e) { //支付成功
                
                wx.showToast({
                  title: '支付成功',
                  icon: 'success',
                  duration: 1200,
                  mask: true,
                  success: function ()
                  {
                    setTimeout(function () {
                      wx.navigateBack(); 
                    }, 1500);
                  }
                });

              },
              'fail': function (e) { //支付取消或出错
              //  wx.navigateBack();
              }
            })

        }
        else {
          wx.showToast({
            title: '该订单已失效',
            icon: 'success',
            duration: 3000,
            mask: true,
            success: function () {
              setTimeout(function () {
                wx.navigateBack();
              }, 1500);

            }
          })
        }

      }
    });

    

  }
})


然后用户点击 “确认支付” 触发 submitInfo 事件,调起微信支付。

点赞 0      收藏 2

0 个评论

正在加载...

这里空空如也,快来补一刀!

加载更多

回答问题或评论文章请先 或者 注册