微信小程序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 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
JS实现密码框效果
Sep 10 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
短波的认识
2021/03/01 无线电
77A一级收信机修理记
2021/03/02 无线电
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
微信小程序云开发之新手环境配置
2019/05/16 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
js实现聊天对话框
2020/02/08 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
打造完美自荐信
2014/01/24 职场文书
工程管理英文求职信
2014/03/18 职场文书
保护黄河倡议书
2014/05/16 职场文书
考试诚信承诺书
2014/05/23 职场文书
2014年国庆节寄语
2014/09/19 职场文书
模范教师事迹材料
2014/12/16 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python