微信小程序与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 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
javascript无刷新评论实现方法
May 13 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
BACKBONE.JS 简单入门范例
Oct 17 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP循环结构实例讲解
2014/02/10 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
React组件生命周期详解
2017/07/03 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
JS实现倒计时图文效果
2018/11/17 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python request使用方法及问题总结
2020/04/26 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
摄影实习自我鉴定
2013/09/20 职场文书
岗位职责风险点
2014/03/12 职场文书
研发工程师岗位职责
2014/04/28 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
幼儿园见习报告
2014/10/30 职场文书
初中家长评语大全
2014/12/26 职场文书
小孩不笨观后感
2015/06/03 职场文书
教师病假条范文
2015/08/17 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
java executor包参数处理功能 
2022/02/15 Java/Android
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis