微信小程序与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 位置插件
Dec 25 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
JavaScript实现简单图片切换
Apr 29 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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
js文字横向滚动特效
2015/11/11 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
Python实现的HTTP并发测试完整示例
2020/04/23 Python
用Python写冒泡排序代码
2016/04/12 Python
详解python进行mp3格式判断
2016/12/23 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
详解Python用户登录接口的方法
2019/04/17 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
大整数数相乘的问题
2012/07/22 面试题
南京某公司笔试题
2013/01/27 面试题
交通安全演讲稿
2014/01/07 职场文书
农村婚礼证婚词
2014/01/08 职场文书
出租房屋协议书
2014/09/14 职场文书
Python内置的数据类型及使用方法
2022/04/13 Python