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


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 相关文章推荐
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
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
新浪新闻小偷
2006/10/09 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
文字幻灯片
2006/06/26 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
Python操作MongoDB数据库的方法示例
2018/01/04 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
社区五一劳动节活动总结
2015/02/09 职场文书
学校捐书活动总结
2015/05/08 职场文书
怎样写观后感
2015/06/19 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang