微信小程序与webview交互实现支付功能


Posted in Javascript onJune 07, 2019

实现原理:点击h5网页的支付按钮——(跳转)——>嵌套改h5的小程序的支付页面——(处理支付)——>跳转至支付完成后的页面

注意:(1)网页h5中,引入微信的jssdk

<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

(2)小程序嵌套h5页面后,需要在微信公众平台配置h5网页的业务逻辑名,否则无法访问(且配置业务逻辑名的小程序只能是企业小程序,个人小程序暂时无法实现)。

操作:登录微信公众平台————开发——————开发设置

微信小程序与webview交互实现支付功能

小程序目录 

微信小程序与webview交互实现支付功能

<!--webview中(小程序page)-->

//pages/lnyc2019/index.wxml

 <web-view class='page_web' src="{{url}}"></web-view>

 

//pages/lnyc2019/index.js

Page({ 

data: { 



url:'https://xxxxxxxx/wxmini/index.html'//h5地址 


} 

})
<!--wxPay中(小程序page)-->

// pages/wxPay/index.js

Page({

 data: {

  payTempcode:'',

  ordercode:'',

  payParam:{}

 },

 onLoad: function (options) {

  console.log('支付开始');

  console.log(options);

  this.setData({

   ordercode: options.ordercode

  });

  this.getTempcode();

 },

 // 换取支付临时code

 getTempcode:function(){

  wx.login({

   success: res => {

    // 发送 res.code 到后台换取 openId, sessionKey, unionId

    this.setData({

     payTempcode:res.code

    });

    console.log('支付code:', this.data.payTempcode);

 

    this.getPayinfo();

   }

  })

 },

 // 换取支付参数

 getPayinfo:function(){

  var self=this;

  wx.request({

   url: 'https://xxxxxx/pay/xcxpay',//后台接口地址

   data: {

    'wxcode': self.data.payTempcode,

    'ordercode': self.data.ordercode,

    'gid': x,

   },

   method: 'POST',

   success: function (res) {

    console.log(res.data.data.payinfo);

    self.setData({

     payParam: res.data.data.payinfo

    });

    console.log('支付的订单====',self.data.ordercode);

    // 调起支付

    wx.requestPayment({

     'timeStamp': self.data.payParam.time,//为字符串,否则报错

     'nonceStr': self.data.payParam.nonce_str,

     'package': `prepay_id=${self.data.payParam.prepay_id}`,

     'signType': 'MD5',

     'paySign': self.data.payParam.paysign,

     'success': function (res) {

      console.log(res)

      console.log('=======支付成功==========');

      wx.navigateTo({

       url: `/pages/lnyc2019/detail?ordercode=${self.data.ordercode}`

      })

     },

     'fail': function (res) {

      console.log(res)

      console.log('=======支付失败==========')

      wx.navigateBack({

       delta: 1//返回1个页面

      })

     }

    })

   }

  })

 }
})

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
在微信小程序中使用vant的方法
Jun 07 #Javascript
微信小程序实现折线图的示例代码
Jun 07 #Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 #Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 #Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 #Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 #Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 #Javascript
You might like
php获取表单中多个同名input元素的值
2014/03/20 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
通过js给网页加上水印背景实例
2019/06/17 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
财务出纳员岗位职责
2013/11/26 职场文书
社团活动总结模板
2014/06/30 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
幼儿园见习报告
2014/10/30 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2015年母亲节寄语
2015/03/23 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Python合并pdf文件的工具
2021/07/01 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技