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


Posted in Javascript onAugust 16, 2019

前言

小程序支持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组件交互,内联h5页面并网页实现微信支付实现解析

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

二,定义h5页面

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

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

上图是我在浏览器里显示的效果。

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

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

这里有一点需要注意

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

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

三,来看下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是我们携带的参数

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

四,小程序支付页

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

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

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

微信小程序webview组件交互,内联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的支付功能。
是不是很简单呢。

源码地址

https://github.com/qiushi123/xiaochengxu_demos

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 #Javascript
jQuery zTree插件使用简单教程
Aug 16 #jQuery
微信小程序 如何保持登录状态
Aug 16 #Javascript
JS事件流与事件处理程序实例分析
Aug 16 #Javascript
javascript事件监听与事件委托实例详解
Aug 16 #Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 #Javascript
详解Vue中组件传值的多重实现方式
Aug 16 #Javascript
You might like
PL-880隐藏功能
2021/03/01 无线电
php图片验证码代码
2008/03/27 PHP
php分页函数完整实例代码
2014/09/22 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
JavaScript库 开发规则
2009/01/31 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
python 读取文件并替换字段的实例
2018/07/12 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
详解python tkinter 图片插入问题
2020/09/03 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
初婚未育未抱养证明
2014/01/12 职场文书
团日活动总结书格式
2014/05/08 职场文书
毕业设计工作总结
2015/08/14 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle