找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序webview支付源码下载,微信小程序支付开发教程

  [复制链接]
查看: 1637|回复: 118
最佳答案
0 

6

主题

6

帖子

90

积分

新人求带

积分
90
 楼主| 发表于 2018-4-16 16:48:05 | 显示全部楼层 |阅读模式
微信小程序webview支付源码下载,微信小程序支付开发教程

我们项目已在公众号上线,目前开发小程序,目标是直接采用webview,不需要再开发一次,但是小程序的webview不支持微信支付,只能通过跳回小程序调用小程序支付的API,我写了demo。

发起微信支付:wx.requestPayment(OBJECT)

示例代码:
  1. wx.requestPayment({
  2.    'timeStamp': '',
  3.    'nonceStr': '',
  4.    'package': '',
  5.    'signType': 'MD5',
  6.    'paySign': '',
  7.    'success':function(res){
  8.    },
  9.    'fail':function(res){
  10.    }
  11. })
复制代码


官方开发者文档:https://developers.weixin.qq.com ... equestpaymentobject

本具体项目结构如下:
1972300-46344d51f8cbfe10.png
项目结构.png


1.首先在vue项目(其他用jQuery也类似)引入jssdk,这样可以调用wx.miniProgram的相关接口
  1. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
复制代码

说明一下,src中不引用http域名是我们项目环境有http和https两种方式,这样写可以根据服务器域名动态更改
相关官网文档说明:
1972300-29293e83fce5eadc.png
webview接口.png


2.小程序加入webview组件,调用接口跳转到相关webview
  1. //事件处理函数
  2.   toWebview:function(){
  3.     wx.navigateTo({
  4.       url: '/pages/webview/webview',
  5.     })
  6.   },
复制代码

3.webview处理完相关业务逻辑,需要跳回小程序,携带后台返回的支付必要的参数
  1.   //小程序和公众号跳转不同页面
  2.         navigateToPay: function() {
  3.             if (this.isMiniProgram === true) {
  4.                 // alert('小程序')
  5.                 //由后台协商好返回的数据格式,该代码仅供参考,不能实际使用
  6.               const    payParam = {
  7.                     appId: "wxd678efh567hg6787",
  8.                     nonceStr: "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
  9.                     package: "prepay_id=wx2017033010242291fcfe0db70013231072",
  10.                     signType: "MD5",
  11.                     timeStamp: "1490840662",
  12.                     paySign:"BB2B9BD3F2F8A1CB270C6ACE3D7BDB9"
  13.                 };
  14.                 // alert(payParam);
  15.                 this.navigateToMiniProgram(JSON.stringify(payParam));
  16.             } else {
  17.                 alert('公众号');
  18.                 //原先支付逻辑不用修改;
  19.             }
  20.         }
复制代码

4.调用小程序的wx.requestPayment唤起支付,如果不需要显示页面可以写个空白页面

5.支付完成,处理相关逻辑。

游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

10

主题

165

帖子

2548

积分

专家路上

积分
2548
发表于 2018-4-16 18:49:55 | 显示全部楼层
6666666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1

帖子

81

积分

新人求带

积分
81
发表于 2018-4-16 22:44:32 | 显示全部楼层
学习一下思路~十分感谢
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4

帖子

109

积分

新人求带

积分
109
发表于 2018-4-25 11:51:04 | 显示全部楼层
非常不错,值得看一下
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1

帖子

50

积分

等待验证会员

积分
50
发表于 2018-4-25 18:18:23 | 显示全部楼层
来看看。
回复

使用道具 举报

最佳答案
0 

0

主题

1

帖子

50

积分

新人求带

积分
50
发表于 2018-4-26 09:44:06 | 显示全部楼层
66666,学习一下
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1

帖子

50

积分

等待验证会员

积分
50
发表于 2018-4-28 15:59:41 | 显示全部楼层
loadSeller3
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

93

帖子

1806

积分

专家路上

积分
1806
发表于 2018-4-29 14:49:13 | 显示全部楼层
很好很好很好
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

3

帖子

50

积分

等待验证会员

积分
50
发表于 2018-5-1 17:48:28 | 显示全部楼层
学习一下
回复

使用道具 举报

最佳答案
0 

0

主题

1

帖子

30

积分

新人求带

积分
30
发表于 2018-5-1 22:50:03 | 显示全部楼层
学习看看啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com