微信小程序与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 Prototype对象
Jan 07 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
在微信小程序中使用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实现监听事件
2013/11/06 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
js中日期的加减法
2015/05/06 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
满月酒答谢词
2014/01/14 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
2014年团总支工作总结
2014/11/21 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
中秋节晚会开场白
2015/05/29 职场文书