文档章节

微信小程序web-view支付开发说明,附支付demo

o
 osc_mervd488
发布于 2018/04/23 18:10
字数 444
阅读 18
收藏 0



我们项目已在公众号上线,目前开发小程序,目标是直接采用web-view,不需要再开发一次,但是小程序的web-view不支持微信支付,只能通过跳回小程序调用小程序支付的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.支付完成,处理相关逻辑。

 

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

pycurl libcurl link-time ssl backend (nss)

pip uninstall pycurlecho 'pycurl==7.19.5.1 --global-option="--with-nss"' > requires.pypip install -r requires.py...

小红手
46分钟前
17
0
计算机网络性能衡量

1、速率 单位时间(s)内传输信息(bit)量 单位:KB/s, MB/s, Gb/s K = 10^3 ,M = 10^6, G=10^9 一般表示的是理想的传输速率 2、带宽 计算机网络中的带宽和通信等领域的带宽概念不一样,计算机网...

osc_np3y0rbq
46分钟前
3
0
互联网掀起农家乐,巨头上演AI掘金战

配图来自Canva **前有网易、阿里AI养猪,后有腾讯AI养鹅,互联网大佬们纷纷玩起了“农家乐”,互联网的生意在尖端技术的引领之下频频跨界,巨头之间的较量也从线上延伸至线下。**自古“民以食...

osc_5cok9i01
48分钟前
9
0
原来!我在4年前就开始体验雾游戏了!

前有云游戏后有雾游戏,游戏的方式看来起来越来越多种多样。那么“震撼业界”的雾游戏到底是什么来头?它依靠什么改变游戏界?它的原理又是什么? 本月月初,著名的日本游戏杂志《Fami通》表...

osc_j34n26zn
49分钟前
11
0
活动预告|田溯宁与你相约GSMA Thrive·万物生晖,分享5G风口下的创新与投资洞察

在万物互联的时代背景下,5G+AI+IoT的技术变革与融合,正在引发一场深刻的全产业创新与变革。5G技术创新、行业应用及投资机遇已成为科技行业所瞩目的焦点。 6月30日,宽带资本董事长田溯宁将...

osc_0qnrwmy3
50分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部