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


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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
详解javascript脚本何时会被执行
Feb 05 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
第十节--抽象方法和抽象类
2006/11/16 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
JavaScript 数组详解
2013/10/10 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python异常处理知识点总结
2019/02/18 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Python学习之os模块及用法
2020/06/03 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
电气技术员岗位职责
2013/11/19 职场文书
行政人员工作职责
2013/12/05 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
会计求职信怎么写
2015/03/20 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技