详解微信小程序与内嵌网页交互实现支付功能


Posted in Javascript onOctober 22, 2018

上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓。

详解微信小程序与内嵌网页交互实现支付功能

内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究,总算打通了两边的交互。

大概流程

1、先说明涉及到的文件,下面会用到

1.1 app.js:小程序的app.js文件,在globalData里定义一个全局变量paySuccessUrl: '',用来保存支付成功跳转url
1.2 wxminiwebview.js:小程序中放web-view的界面 1.3 wxminipay.js:小程序原生支付界面
1.4 web_pay.vue:内嵌网页会调起支付的路由组件界面,由于我是用vue+vue-router写的,所以你最好了解下vue和vue-router,记得引入微信jssdk1.3.0,最新版本才包含小程序相对应方法。很遗憾,微信并没提供npm包,github有人提供的commonjs引入方式的微信jssdk版本也只有1.2.0,所以就只能这样引入了。

<script src="./static/jweixin-1.3.0.js"><script>

2、首先我们像官网那样正常嵌入一个内嵌网页,url是wxmini_webview.js中data中定义的变量,webview加载的就是网页就是这个url。

<web-view src="{{url}}"><web-view>

3、在内嵌网页web_pay.vue里判断当前是否是微信环境。

window.wx.ready(function () {
  isWxMini = window.__wxjs_environment === 'miniprogram'
})

4、在内嵌网页web_pay.vue调用支付时把支付金额,支付说明,支付成功跳转url...(任何你想要的参数,记得encodeURIComponent),传给小程序原生页面。

if (isWxMini) {
  let jumpUrl = encodeURIComponent(window.location)
  let path = `/page/pay/pay?amount=${amount}&title=${desc}&jumpUrl=${jumpUrl}`
  window.wx.miniProgram.navigateTo({
    url: path
  })
 }

5、在小程序支付界面wxmini_pay.js里获取到内嵌网页传过来的值,这里演示方便,实际上是在page的data里存储这些会显示在界面的值好些。

onLoad: function (options) {
  console.log(options)
  // 获取网页传过来的值
  // TODO 用es6解构来获取值TODO
  jumpUrl = options.jumpUrl
  amount = options.amount
  title = options.title
  ...
 },

6、支付成功后,把跳转url附带支付结果及当前时间保存到全局变量。

paySuccess () {
  let currentTime = new Date().getTime()
  //这是为了防止wxmini_webview.js文件里调用setData由于前后两个url一致导致路由不触发刷新的bug
  jumpUrl = options.jumpUrl+encodeURIComponent(`?payResult=1&time=${currentTime}`) 
  //payResult=1表示支付成功,这里我偷懒了直接在url后面补?,实际情况比较复杂
  //为了实现支付成功返回后的无刷新加载,这里的参数应该是属于路由web_pay.vue的,而不是属于window.location.search的
  //所以要判断路由锚点#的位置和是否已经有路由参数(如果是vue-router的history模式我没用过,应该和window.location一样吧)
  getApp().globalData.paySuccessUrl=jumpUrl //保存跳转url到小程序全局变量里
  wx.navigateBack() //返回会上个页面,也就是承载网页的容器页面wxmini_pay.js
}

7、回到小程序wxmini_webview.js,会触发onshow,在里面进行界面无刷新加载。

onShow: function () {
  console.log('on show')
  let paySuccessUrl = getApp().globalData.paySuccessUrl
  getApp().globalData.paySuccessUrl="" //清空支付成功url,防止一些操作触发onShow事件
  if (paySuccessUrl) {
   let url = decodeURIComponent(paySuccessUrl)
   this.setData({
   //这里在次说明下步骤6中的&time=${currentTime},就是因为不加这个当你第一次支付成功回来这里
   //这个url跟你第二次支付成功回来这里是一样的,会导致第二次支付开始,这里的setData方法失效
    url 
   })
  }
 },

8、步骤7中的setData会触发webview中的网页加载,由于我采用的是vue-router,而且前后两个url只有路由的参数query不一样,所以并不会触发界面刷新,也不会触发路由的重新加载,而是只会触发beforeRouteUpdate 这个方法,举个例子,现在支付前界面是https://host/#/pay,然后支付成功后跳转https://host/?payResult=1&time=123456#/pay,此时界面不会刷新,pay路由也不会重新加载,而是触发beforeRouteUpdate (to, from, next),你要做的只是在这里界面解析to.query里的数据,然后该干嘛干嘛

beforeRouteUpdate (to, from, next) {
   console.log('路由发生改变,很有可能是小程序的支付成功回调')
   let payResult = to.query.payResult
   if (payResult) { // 小程序支付成功
    if (payResult === '1') {
     console.log('支付成功,下班打卡走人')
    }
   }
   next()
  },

这么晚了,先睡了,如果有空我再整理个demo,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
常用的javascript function代码
May 23 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
JavaScript设计模式之原型模式详情
Jun 21 Javascript
js异步上传多张图片插件的使用方法
Oct 22 #Javascript
js实现动态添加上传文件页面
Oct 22 #Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 #Javascript
js实现动态增加文件域表单功能
Oct 22 #Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 #Javascript
js实现input密码框显示/隐藏功能
Sep 10 #Javascript
Vue slot用法(小结)
Oct 22 #Javascript
You might like
php实现简易聊天室应用代码
2015/09/23 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
php查询及多条件查询
2017/02/26 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
js面向对象的写法
2016/02/19 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
Vue实现导航栏菜单
2020/08/19 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
PyMongo安装使用笔记
2015/04/27 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python内打印变量之%和f的实例
2020/02/19 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
能源工程专业应届生求职信
2014/03/01 职场文书
主题党日活动总结
2014/07/08 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
python引入其他文件夹下的py文件具体方法
2021/05/23 Python