|
微信小程序webview支付源码下载,微信小程序支付开发教程
我们项目已在公众号上线,目前开发小程序,目标是直接采用webview,不需要再开发一次,但是小程序的webview不支持微信支付,只能通过跳回小程序调用小程序支付的API,我写了demo。
发起微信支付:wx.requestPayment(OBJECT)
示例代码:
- wx.requestPayment({
- 'timeStamp': '',
- 'nonceStr': '',
- 'package': '',
- 'signType': 'MD5',
- 'paySign': '',
- 'success':function(res){
- },
- 'fail':function(res){
- }
- })
复制代码
官方开发者文档:https://developers.weixin.qq.com ... equestpaymentobject
本具体项目结构如下:
项目结构.png
1.首先在vue项目(其他用jQuery也类似)引入jssdk,这样可以调用wx.miniProgram的相关接口
- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
复制代码
说明一下,src中不引用http域名是我们项目环境有http和https两种方式,这样写可以根据服务器域名动态更改
相关官网文档说明:
webview接口.png
2.小程序加入webview组件,调用接口跳转到相关webview
- //事件处理函数
- toWebview:function(){
- wx.navigateTo({
- url: '/pages/webview/webview',
- })
- },
复制代码
3.webview处理完相关业务逻辑,需要跳回小程序,携带后台返回的支付必要的参数
- //小程序和公众号跳转不同页面
- navigateToPay: function() {
- if (this.isMiniProgram === true) {
- // alert('小程序')
- //由后台协商好返回的数据格式,该代码仅供参考,不能实际使用
- const payParam = {
- appId: "wxd678efh567hg6787",
- nonceStr: "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
- package: "prepay_id=wx2017033010242291fcfe0db70013231072",
- signType: "MD5",
- timeStamp: "1490840662",
- paySign:"BB2B9BD3F2F8A1CB270C6ACE3D7BDB9"
- };
- // alert(payParam);
- this.navigateToMiniProgram(JSON.stringify(payParam));
- } else {
- alert('公众号');
- //原先支付逻辑不用修改;
- }
- }
复制代码
4.调用小程序的wx.requestPayment唤起支付,如果不需要显示页面可以写个空白页面
5.支付完成,处理相关逻辑。
|
|