奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 大前端知识 > 大神说 >

微信小程序webview中,从html发起微信支付请求

时间:2018-03-18 22:09来源:原创 作者:admin
万事都没个完美,webview出来的时候心里乐开了花,因为有好多项目都可以直接搬进小程序了。 及时没有手机端,但是只要轻轻松松的写个html就可以发布可爱的小程序。呵呵呵呵。低调

万事都没个完美,webview出来的时候心里乐开了花,因为有好多项目都可以直接搬进小程序了。
及时没有手机端,但是只要轻轻松松的写个html就可以发布可爱的小程序。呵呵呵呵。低调低调



但但是!

小程序里webview的支付发起不了啊。

老是报

system:access_denied 

而且这问题可是我早上6点起来写代码,一直敲到下午。一测试流程,我了个去甭哭。

网上一番,全都是老前辈说的公众号的不要理他。

其实就是小程序里的JSSDK微信支付是发起不了的。

那么只有去小程序里调用wx.requestPayment才可以

少年懂了吗?

后台程序仍然是和JSSDK的那些参数,但是要注意的是生成时APPID要写小程序的,OPENID写用户和小程序的。

咚咚咚咚。上一句话特别注意了,它可是重头戏,要不要粘贴后台代码呢?怕你不懂啊,但没事你发个后台小哥,他懂!


要判断是小程序还是微信,因为用的都是同一个类
 $isweix = 0;
         if(strstr($_SERVER['HTTP_USER_AGENT'],'mini')){
                // $payment_where['code'] = 'miniAppPay';
                $isweix = 1;
 
要传给微信小程序的参数
  $params =  '?appid='.WxPayConfig::$appid.'&timestamp='.$ycs['timeStamp'].'&nonceStr='.$ycs['nonceStr']. 
             '&'.$ycs['pkg'].'&signType='.$ycs['signType']. 
             '&paySign='.$ycs['paySign'].'&orderId='.$order['order_sn'].time().'&pType=0&prepay_id='.str_replace('prepay_id', '&prepay_id', $ycs['package']);


接下来咽喉部分来了,HTML怎么调用小程序。

其实是.....

跳转到小程序的一个专门做支付页面的路径再+$params参数,搞定。

前端天才第一步,引入各种小内库!!!:

引入jweixin-1.3.2.js
 <script type="text/javascript" src='https://res.wx.qq.com/open/js/jweixin-1.3.2.js'></script>
 

第二步:现在你可以任意的跳一跳了,蛋但是不能跳tabbar的地址道理同小程序一样跳转

 wx.miniProgram.navigateTo({
            url: '/pages/login/login'+'$params'
        })

第三步:发起小程序支付请求

 onLoad: function (obj) {
    console.log(obj)
    //获取options的订单Id  
    var orderId = obj.orderId;
 
    //调起微信支付  
    wx.requestPayment({
          'appId': 'wx6847987265446',
      'timeStamp': obj.timestamp,
      'nonceStr': obj.nonceStr,
      'package': 'prepay_id=' + obj.prepay_id,
      'signType': obj.signType,
      'paySign': obj.paySign,
      //小程序微信支付成功的回调通知  
      'success': function (res) {
        //定义小程序页面集合  
        var pages = getCurrentPages();
        //当前页面 (wxpay page)  
        var currPage = pages[pages.length - 1];
        //上一个页面 (index page)   
        var prevPage = pages[pages.length - 2];
        //通过page.setData方法使index的webview 重新加载url  有点类似于后台刷新页面  
        //此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。  
        prevPage.setData({
          url: "https://xxxxxxxxxx.com/wx_isPayment.jhtml?orderId=" + orderId + '&ispay=0',
 
        }),
          //小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了  
          //微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作  
          wx.navigateBack();
      },
      //小程序支付失败的回调通知  
      'fail': function (res) {
        console.log("支付失败"),
          console.log(res)
        var pages = getCurrentPages();
        var currPage = pages[pages.length - 1];
        var prevPage = pages[pages.length - 2];
        console.log("准备修改数据")
        prevPage.setData({
          url: "https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" + orderId + '&ispay=0',
        }),
          console.log("准备结束页面")
        wx.navigateBack();
      }
    })  
  },

 

啊哈,给我来瓶忘情水,我要忘掉过去几小时百度大海搜索的这条路。

以上是鄙人一天心和血分享给大家。

目的就一个让程序员的头发少点几根。 (责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-07-15 11:07
栏目列表
推荐内容

关注奔三路小程序,方便你我他