前言、背景

我目前的工作是一名 工程师。 在此之前，我对前端和后端的了解基本是一片空白。 我只是在日常工作项目中需要和同事联系的时候才稍微接触到它。 对于前端和后端如果我的一些专业描述和理解不当请指正。

该部门目前的主要项目是电子商务项目。 在我加入公司之前，整个项目体系的主要业务流程已经完成并正式运行。 但由于种种原因，该平台主要运营在PC端和微信公众号上。 。 小程序其实出来的很早，但是对于我们目前的规划来说，优先级其实很低。 直到2017年11月，小程序才上线了web-view组件，被誉为当时移动电商的福音……这里省略五千字。

通过web-view，公众号、官网、带域名的网页内容都可以直接扔到小程序的组件中，大大降低了开发成本，只是一个穿梭机。 。 。 。

关于小程序

小程序没有任何解释。 直接看实际开发文档就行了，不用过多解释微信小程序。

关于小程序web-view组件

首先，这里是门户小程序的相关说明以及API使用的官方说明：web-view组件是一个可以用来承载网页的容器，并且会自动填充整个小程序页面。 目前不支持个人小程序和海外小程序。 web-view组件开放时间不长，所以目前的还是有很多限制。

关于配置指向的链接，直接去小程序后台配置即可（不配置就无法访问），并且必须支持下图：

示例代码：

做过微信公众号的人都应该知道，微信支付功能可以通过公众号中调用商户的H5页面来实现。 但看过该组件API文档的人应该知道：里面的网页（公众号迁移到的网页）无法调用外部微信支付什么的……虽然微信支付确实提供了微信小程序。 支付API，但是由于我们整个小程序的内容是一个嵌入了公众号内容的网页，所以在网页下单的过程中，无法通过api通知小程序激活微信支付界面。 查看微信支付小程序的支付凭证。 如果我们的小程序想要调用微信支付，我们只需要获取以下参数即可。

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

和示例代码：

看完这一切，就明白了，在小程序端，只要通过某种方式能够获取到内部网页下单后生成的相关参数，就可以激活微信支付，实现网页端的微信支付。组件内的页面。 实现方法及主要流程先讲解一下整个小程序实现话费支付的代码结构，如图：

整个结构非常清晰简单，无需过多解释。 微信小程序采用MVVM模型。

xxxx.wxml 类似于的xml文件。

xxxx.js 类似于中MVC模型的控制层。

xxxx.wxss 类似于前端CSS样式。 我们目前很少使用它，因为我们只使用了小程序的组件。原理分析

我们看一下微信小程序支付的业务流程：

如上所述，如果需要小程序的组件来激活微信支付，需要在网页内统一下单获取支付参数，然后通过小程序API激活微信支付，如下：

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

那么小程序如何获取支付参数呢？ 在API文档中找到的内部网页，可以通过该API来控制小程序的内部网页。

wx..跳转到小程序页面。 例如，如果我们的项目在.wxml网页内部使用这个API，我们就可以控制小程序从一个页面跳转到另一个页面。

具体实施步骤

1 在.wxml文件中添加组件，加载原公众号中的网页内容

url是.js中数据定义的变量，方便通过.js方法动态加载网页。

2 创建新目录并创建新页面来处理支付逻辑。 （此页面目前为空白，从功能上分析此页面只是接收网页的支付参数，从用户角度来看，此页面是支付页面，需要添加一些用户交互，比如转圈子QAQ）

3 网页用户生成订单后，选择微信支付，按照微信统一下单流程生成微信支付参数并登录。 在网页内部，路径中携带有跳转页面的参数。 具体伪代码实现如下（注释很清楚）： 这部分是后端代码，即小程序内部网页的代码（java项目中的.ftl文件）。 我的解决方案需要在后端进行逻辑更改。 了解的朋友应该知道，激活微信支付所需的参数只有在后台微信支付订单流程完成后才能获取。 这部分都是在后端实现的。 只是后台下单流程完成，然后判断是否是小程序的代码就是下面的代码。如果不是，就继续使用公众号的微信支付

//判断是否是在wx小程序环境 if(small_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、小程序页面逻辑实现（.js），里面的网页通过wx..({url:path})携带参数，让小程序跳转到页面。 .js处理url中携带的参数，然后通过wx调用微信支付。 并处理支付回调通知。 具体代码实现如下（注释很详细，不再赘述）：

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 - 1]; //上一个页面 （index page） var prevPage = pages[pages.length - 2]; //通过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 - 1]; var prevPage = pages[pages.length - 2]; console.log("准备修改数据") prevPage.setData({ url: "https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" + orderId + '&ispay=0' , }), console.log("准备结束页面") wx.navigateBack(); } }) },

微信支付后回调通知。 当调用页面并返回页面时，网页“++'&=0'已经加载完毕，相关逻辑在后台实现。通过查询订单是否支付成功，如果支付成功，网页会重定向，跳转到支付成功的页面，如果支付失败，仍然是待支付页面，用户仍然可以点击微信支付按钮进行微信支付，此时网页小程序组件内页面可以实现微信支付，再见

如果使用原生小程序组件来实现商城支付，虽然不会那么麻烦，但是工作量会很大。 将公众号网页直接移植到小程序中，大大节省了开发时间，对于小商户来说非常方便。 我们现在可以说是懒惰了。 毕竟投入不大，优先级不够。 我们必须先准备好可以使用的东西。 小程序不做任何wx。 向服务器发出请求。 但我心里其实是拒绝的。 。 。 。 。 因为用户体验和产品视角很低……

附上付款截图吧？

熟悉开发的朋友应该知道这个页面是什么时候出现的。 其实只是后台生成的订单，此时与支付无关（商户订单是微信支付时序图中生成的）。此时，当用户点击微信支付按钮时，序列图中为5。 调用统一订单API()---》生成预付费订单----》返回预付费订单信息()。 6 生成页面调用的支付参数并签名（ ） 返回支付参数（等） 以上其实都是在微信公众号下的订单。 只有获取到支付参数并判断为小程序环境时，才会生成支付逻辑。

var 路径 = '///'+;

//传递的API使小程序跳转到指定的小程序页面

wx..({url: 路径});

该API将支付参数传递给页面。至此通信过程完成

附微信公众号支付时序图。 附微信公众号支付时序图参考。

如何联系我：博客主页