微信小程序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 js cookie的存储,获取和删除
Dec 29 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
python脚本第一行如何写
2020/08/30 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
饲料采购员岗位职责
2013/12/19 职场文书
物业管理工作方案
2014/05/10 职场文书
招商引资工作汇报
2014/10/28 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
安全教育日主题班会
2015/08/13 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android