微信小程序与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 相关文章推荐
基于jQuery的自动完成插件
Feb 03 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 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
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
webpack之devtool详解
2018/02/10 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
Python中的index()方法使用教程
2015/05/18 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
pycharm 安装JPype的教程
2019/08/08 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
pyspark 随机森林的实现
2020/04/24 Python
python与idea的集成的实现
2020/11/20 Python
浅析python实现动态规划背包问题
2020/12/31 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
行政部主管岗位职责
2013/12/28 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
加油口号大全
2014/06/13 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js