前言

我目前的工作是Android工程师。在此之前，我对前端和后台的知识基本上是白纸，但当我需要在日常工作项目中与朋友联系时，我就会失去联系。请纠正前端和后台的一些专业描述和理解。

目前，该部门的主要项目是电子商务项目。在我加入公司之前，整个项目系统的主要业务流程已经完成并正式运行。然而，由于各种原因，平台主要是在PC端和微信微信官方账号运营。小程序其实出来的挺早的，但是我们目前的规划优先级还是很低的。直到17年11月，小程序才推出web-view当时被称为移动电子商务的福音组件&&&&$$$...这里省略5000字。

有了web-view微信官方账号内容、官网、网页都有域名，可以直接扔到小程序里。webview组件，大大降低了开发成本，就是一把梭。

关于小程序

小程序的解释不是巴拉巴拉，直接去干货开发文档不做太多的解释微信小程序

关于小程序web-view组件

先上传送门小程序 webview相关说明和API使用官方解释：web-view 组件是一个可以用来携带网页的容器，它会自动覆盖整个小程序页面。暂时不支持个人类型和海外类型的小程序。web-view组件开启时间不长，所以目前还有很多局限性。webview将指向链接配置到小程序后台(不配置)webview不能访问)必须支持https 如图：

示例代码：

做过微信微信官方账号的童鞋应该都知道，微信官方账号里的商家H5页面内调用JSSDK微信支付功能可以实现。但是我见过。webview组件的API童鞋的文件应该知道：webview 内部网页(微信官方账号迁移的网页)无法调用外部微信支付what....... 虽然微信支付确实提供了小程序的微信支付API，但因为我们整个小程序的内容是一个webview嵌入微信官方账号内容的网页在网页内下单的过程中无法通过webview的api接口通知小程序调动微信支付。查看微信支付小程序的支付文件。如果我们想调用微信支付，我们只需要获得以下参数。

如图所示：小程序调用微信支付参数

以及示例代码：

看到这些一切就明朗了，在小程序端只要能通过某种方式得到webview内网页下单后生成的相关参数可以调动微信支付，实现webview组件内网页微信支付。

实现模式和主要流程

1、首先，解释整个小程序的实现webview如图所示：

整个结构清晰简单，解释不多。微信小程序采用MVVM的模式。

xxxx.wxml类似于安卓activity的xml文件。

xxxx.js类似于安卓MVC模式控制层。

xxxx.wxss类似于前端CSS款式。目前我们几乎没用，因为只用小程序。webview组件。

2、原理分析

让我们来看看微信小程序支付的业务流程：

上面已经提到，如果需要小程序，webview组件调起微信支付，需要在网页内统一下单，然后通过小程序获取支付参数API如下：

wx.requestPayment({'timeStamp': '','nonceStr': '','package': '','signType': 'MD5','paySign': '','success':function(res){},'fail':function(res){},'complete':function(res){}})

那么小程序如何获得支付参数呢？webview的API文档发现 webview内部网页可以通过JSSDK的该API 实现webview网页内部控制小程序。wx.miniProgram.navigateBack例如，我们的项目在 index.wxml 的 webview 在网页内部使用API小程序从可以控制index page 跳转到wxpay page。

3、具体实现步骤

1 在index.wxml文件添加webview组件用于装载原微信官方账号网页内容<web-view src="{{url}}"></web-view>该url是index.js里面data定义的一个变量``，方便通过index.js的setData方法对webview动态加载网页

2 新建wxpay并新建目录wxpay的page页面用于处理支付逻辑。(页面目前是空白的，功能分析页面只是为了收到webview从用户使用的角度来看，网页的支付参数是一个需要添加一些用户交互的支付页面，如转圈QAQ）

3 webview生成订单后，网页用户选择微信支付，即走微信统一的订单流程，生成微信支付的参数和sgin。在webview网页内部通过path跳转到携带参数wxpay页面，具体伪代码实现如下(注释清楚):

判断是否在wx小程序环境if(s ** ll_wx && data.resultCode=='success'){ //点击微信支付后，调取统一下单接口生成微信小程序支付需要的支付参数 var params = '?timestamp=' data.jsparams.timeStamp '&nonceStr=' data.jsparams.nonceStr '&' data.jsparams.pkg '&signType=' data.jsparams.signType '&paySign=' data.jsparams.paySign '&orderId=' data.orderid '&pType=0'; //定义path 对应于小程序支付页面的路径var path = '/pages/wxpay/wxpay' params; //通过JSSDK的api将小程序跳转到指定的小程序页面 wx.miniProgram.navigateTo({url: path});

4 小程序端wxpay实现页面逻辑（wxpay.js）,webview内部网页通过wx.miniProgram.navigateTo({url: path})携带参数使小程序跳转wxpay页面。wxpay.js 对url处理中携带的参数，然后通过wx.requestPayment调动微信支付，处理支付回调通知。具体代码如下(注释非常详细，不会重复太多):

onLoad: function (options) { var that = this; //页面加载转移微信支付(原则上应该是options验证携带参数) that.requestPayment(options); ，//根据 obj 参数请求wx 支付 requestPayment: function (obj) { //获取options的订单Id var orderId = obj.orderId; wx.requestPayment({ /相关支付参数 'timeStamp': obj.timestamp, 'nonceStr': obj.nonceStr, 'package': 'prepay_id=' obj.prepay_id,                'signType': obj.signType, 'paySign': obj.paySign, 微信支付小程序成功回调通知 'success': function (res) ** var pages = getCurrentPages()； (wxpay page) var currPage = pages[pages.length - （index page） var prevPage = pages[pages.length - page.setData方法使index的webview 重新加载url 有点类似于后台刷新页面 //此处有点类似小程序通过加载URL回调通知后端 订单支付成功。不重复后端逻辑。 prevPage.setData(((((({ url: "https://xxxxxxxxxx.com/wx_isPayment.jhtml?orderId=" orderId '&ispay=0',                                                                            wxpay page到index page。此时index page的webview已重新加载url page 还有栈的概念navigateBack wx.navigateBack()； }， //小程序支付失败的回调通知 'fail': function (res) console.log("支付失败"), console.log(res) var pages=getCurrentPages()；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；var currPage = pages[pages.length - var prevPage = pages[pages.length - 2]; console.log("准备修改数据") prevPage.setData(((((({ url: "https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" orderId '&ispay=0' ,                                }console.log("准备完成页面") wx.navigateBack()；当微信支付后的回调通知，当wxpay页面调用navigateBack的时候回到index页面的时候webview 已经加载https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" orderId '&ispay=0' 这个网页，后台实现相关逻辑。orderId查看订单是否成功支付。如果支付成功，则将网页重新定位为支付成功的页面，如果支付失败，则需要支付页面。用户仍然可以点击微信支付按钮进行微信支付。到目前为止，小程序webview微信支付可以在组件内的网页上实现。see you agin

如果使用本地小程序组件实现商场支付，就不会那么麻烦，但工作量会非常大。直接将官方账户的网页移植到小程序中webview它大大节省了开发时间，对小企业来说非常方便。我们现在也很懒，毕竟，投资不大，优先级不够，先做点什么可以用，小程序没有一个向服务端的wx.request请求。但是我内心其实拒绝的。。。。。因为用户体验和产品角度都很low.........

本文作者：浅Y原文链接：微信小程序开发之webview组件内网页实现微信原生支付-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开 ** 坛-微信小程序联盟

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。