评论

小程序webview组件,小程序和webview交互,小程序内联h5页面,小程序webview内网页实现微信支付

小程序webview内实现微信支付

小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。

老规矩先看效果。

因为这里涉及的东西比较多,录gif太多,没法上传,我就录制了一段视频出来。
https://v.qq.com/x/page/t0913iprnay.html

原理

先说下实现原理吧,实现原理就是我们在webview的h5页面里实现下单功能,然后点击支付按钮,我们点击支付按钮的时候会跳转到小程序页面,把订单号,订单总金额,传递到小程序里,然后小程序里使用订单号和订单金额去调起微信支付,实现付款,付款成功或者失败时都会有回调。我们再把对应的回调传递给webview,刷新webview里的订单和支付状态。

一,定义webview显示h5页面

关于webview的使用,我就不做讲解了,官方文档里写的很清楚,用起来也很简单。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html


webview很简单,就是用一个webview组件,显示我们的网页。

二,定义h5页面

我这里启动一个本地服务器,用来展示一个简单的h5页面。

上图是我在浏览器里显示的效果。
接下来我们在小程序的webview里显示这个页面,也很简单,只需要把我们的src定义为我们的本地网页链接就可以了。

这里有一点需要注意

因为我们是本地链接,我们需要到开发者工具里把这一项给勾选。

三,来看下h5页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小程序内嵌webview</title>
    <style>
        .btn {
            font-size: 70px;
            color: red;
        }
    </style>
</head>
<body>
<h1>我是webview里的h5页面</h1>
<a id="desc" class="btn" onclick="jumpPay()">点击支付</a>

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
    console.log(location.href);

    let payOk = getQueryVariable("payOk");
    console.log("payOk", payOk)

    if(payOk){//支付成功
        document.getElementById('desc').innerText="支持成功"
        document.getElementById('desc').style.color="green"
    }else{
        document.getElementById('desc').innerText="点击支付"
    }

    //获取url里携带的参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    function jumpPay() {
        let orderId = Date.now();//这里用当前时间戳做订单号(后面使用你自己真实的订单号)
        let money = 1;//订单总金额(单位分)
        let payData = {orderId: orderId, money: money};

        let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序,所以这里需要转为字符串
        const url = `../wePay/wePay?payDataStr=${payDataStr}`;
        wx.miniProgram.navigateTo({
            url: url
        });
        // console.log("点击了去支付", url)
        console.log("点击了去支付")
    }
</script>
</body>
</html>

h5代码这里不做具体讲解,只简单说下。我们就是在点击支付按钮时,用当前时间戳做为订单号(因为订单号要保证唯一),然后传一个订单金额(单位分),这里节约起见,就传1分钱吧,花的是自己的钱,心疼。。。。

关键点说一下

1, 必须引入jweixin,才可以实现h5跳转小程序。
<script type=“text/javascript” src=“https://res.wx.qq.com/open/js/jweixin-1.3.2.js”></script>

2,跳转到小程序页面的方法

const url = `../wePay/wePay?payDataStr=${payDataStr}`;
wx.miniProgram.navigateTo({
      url: url
 });

这里要和你小程序的页面保持一致。payDataStr是我们携带的参数

四,小程序支付页

来看下我们的小程序支付页

小程序支付页功能很简单,就是来接收我们h5传过订单号和订单金额。然后去调起微信支付,实现支付。支付成功和支付失败都有对应的回调。

支付我们这里实用的小程序云开发来实现的支付,核心代码只有10行。由于支付不是本节的重点,所以这里不做具体讲解。感兴趣的同学可以去看我写的文章和我录的视频
小程序支付文章:https://www.jianshu.com/p/2b391df055a9
小程序支付视频:https://edu.csdn.net/course/play/25701/310742
下面把小程序接收参数和支付的完整代码贴出来给大家

Page({
  //h5传过来的参数
  onLoad: function(options) {
    console.log("webview传过来的参数", options)
    //字符串转对象
    let payData = JSON.parse(options.payDataStr)
    console.log("orderId", payData.orderId)

    let that = this;
    wx.cloud.callFunction({
      name: "pay",
      data: {
        orderId: payData.orderId,
        money: payData.money
      },
      success(res) {
        console.log("获取成功", res)
        that.goPay(res.result);
      },
      fail(err) {
        console.log("获取失败", err)
      }
    })
  },

  //微信支付
  goPay(payData) {
    wx.requestPayment({
      timeStamp: payData.timeStamp,
      nonceStr: payData.nonceStr,
      package: payData.package,
      signType: 'MD5',
      paySign: payData.paySign,
      success(res) {
        console.log("支付成功", res)
        //你可以在这里支付成功以后,再跳会webview页,并把支付成功状态传回去
        wx.navigateTo({
          url: '../webview/webview?payOk=true',
        })
      },
      fail(res) {
        console.log("支付失败", res)
      }
    })
  }
})

代码里注释很清楚,这里有一点,就是我们支付成功后,需要告诉h5我们支付成功了,通知h5去刷新订单或者支付状态。
到这里我们就完整的实现了小程序webview展示h5页面,并且做到了h5和小程序的交互,实现了小程序webview的支付功能。
是不是很简单呢。

源码地址

1,关注“编程小石头”公号,回复“webview”即可获取源码

2,也可以到我github下载源码

https://github.com/qiushi123/xiaochengxu_demos

点赞 3
收藏
评论

11 个评论

  • core
    core
    星期四 11:06

    今天试了下,小程序webview中能唤起h5的支付了。问了微信研发部的人,说没有做限制。都不知道什么时候可以了,记得以前一直不可以

    星期四 11:06
    赞同
    回复
  • Chya
    Chya
    06-16

    是怎么做到本地开发的。。我的关注点比较奇特

    06-16
    赞同
    回复
  • Admin²⁰²⁰
    Admin²⁰²⁰
    05-08

    这个模式,本质上还是小程序支付的吧?没有到H5支付?

    05-08
    赞同
    回复
  • ᵗ ⁱ ʷ
    ᵗ ⁱ ʷ
    04-21

    楼主这个功能有上线的小程序吗

    04-21
    赞同
    回复
  • 王青松
    王青松
    2019-12-03
    webview支持获取页面标题
    2019-12-03
    赞同
    回复
  • 华玺先森
    华玺先森
    2019-12-01

    用这个方法。线下调试模式支持支付。但是发布正式后。仍不能调起支付。请问。这种问题您知道怎么解决吗。

    2019-12-01
    赞同
    回复 1
    • 無畏·锋芒
      無畏·锋芒
      05-16
      请问一下发布正式后不能调起微信有解决吗?我也遇到同样的问题,开发者工具上可以实现支付,发布正式后没有能支付成功。
      05-16
      回复
  • 潘裕庭
    潘裕庭
    2019-11-29

    请问Android 9及以上 web view 内的H5 点击事件全部都用不了是什么原因呢?

    2019-11-29
    赞同
    回复
  • xm
    xm
    2019-11-13

    大神,小程序跳转h5之后能在小程序里面使用h5里面的微信支付么

    2019-11-13
    赞同
    回复 3
  • 禄尼
    禄尼
    2019-11-07

    大佬请求帮助,我小程序web-view链接的是第三方(银行)提供的支付页面,然后在这个页面里选择微信支付后没法唤起微信支付。这个是web-view里不支持直接唤起微信支付。这有没有什么思路解决。求教。

    2019-11-07
    赞同
    回复 2
    • 编程小石头
      编程小石头
      2019-11-08
      webview没法唤起支付,需要和小程序做js交互,通过小程序唤起支付。
      2019-11-08
      回复
    • 禄尼
      禄尼
      2019-11-08回复编程小石头
      交互的话,第三方那边下单后发参数发过来,小程序唤起支付,这样的话是不是有主体不一致的问题 从而没法唤起支付?
      2019-11-08
      回复
  • 编程小石头
    编程小石头
    2019-09-05

    审核拒绝理由是什么呢。

    2019-09-05
    赞同
    回复 1
    • 灬(@.@)灬
      灬(@.@)灬
      2019-09-12
      1、配置业务域名 2、
      2019-09-12
      回复

正在加载...

登录 后发表内容