微信小程序开发webview组件中的网页实现微信原生支付

前言、背景

我现在的工作是安卓工程师。在此之前，我对前端和后端的知识基本上是空白的，但我只在日常工作项目中需要与很多人交流时才与他们见面。请更正一些关于前端和后端的专业描述和理解。

目前，该部门的主要项目是一个电子商务项目。在我加入公司之前，整个项目系统的主要业务流程已经完成并正式运营。但由于种种原因，该平台主要在PC端和微信公众号上运营。小程序很早就推出了，但对于我们目前的计划来说，优先级仍然很低。直到2017年11月，小程序才推出了网络视图组件，这在当时被称为移动电子商务的福音&；&；&；$$$。。。这里省略了五千字。

有了webview，公众号内容、官方网站和带有域名的网页可以直接扔进小程序的webview组件，大大降低了开发成本，这是一个穿梭机。。。。

关于小程序

小程序的解释不是巴拉巴拉，但干货开发文档没有解释太多

关于小程序web视图组件

首先交付门户

官方解释：web视图组件是一个可以用来承载网页的容器。它将自动填充整个小程序页面。个人和海外小程序暂时不受支持。

web视图组件打开的时间不长，因此仍有许多限制。

最好在小程序后台配置webview指向的链接（如果不配置webview，则无法访问）。必须支持https，如图所示：

Applet wevview服务器域名配置

示例代码：

示例代码

做过微信公众号的童鞋应该知道，微信支付的功能可以通过在公众号的商家H5页面中调用JSSDK来实现。但是看过webview组件API文档的童鞋应该知道，webview中的网页（从公众号迁移的网页）不能称外部微信支付为什么……虽然微信支付确实提供了小程序的微信支付API，但我们整个小程序的内容是嵌入在公众号内容中的网页，在网页下单过程中，无法通过webview的api接口通知小程序调用微信支付。查看微信支付小程序的支付文档。如果我们的小程序想要调用微信支付，只需要获得以下参数。

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

小程序调用微信支付参数

和示例代码

示例代码

当我们看到所有这些事情时，一切都会很清楚。只要我们能够以某种方式在webview页面中获取订单下单后生成的相关参数，我们就可以调用微信支付来实现webview组件中的微信支付。

实施方法及主要流程

首先，说明整个小程序实现webview呼叫支付的代码结构，如图所示：

项目代码结构

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

Xxxx.wxml类似于Android活动的xml文件。

Xxxx.js类似于Android中MVC模式的控制层。

xxxx。Wxss类似于前端的CSS样式。我们目前几乎不使用它，因为我们只使用applet的webview组件。

原理分析

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

付款流程顺序图

上面已经提到，如果您需要小程序的webview组件调用微信支付，您需要在内部下单以获取支付参数，然后通过小程序API调用微信付款，如下所示：

wx.请求付款(

{

“timeStamp”：“”，

“nonceStr”：“”，

“包”：“”，

“signType”：“MD5”，

'paySign'：''，

“成功”：函数（res）｛｝，

“fail”：函数（res）｛｝，

“完成”：函数（res）｛｝

})

那么小程序如何获取支付参数？查看webview的API文档，发现webview内部网页可以通过JSSDK的API实现webview网页的内控小程序。

wx.miniProgram.navigateBack跳转到小程序页面。例如，我们的项目在索引中。wxml的webview页面在内部使用此API来控制小程序从索引页面跳转到wxpay页面。

具体实施步骤

在index.wxml文件中添加webview组件以加载原始公众号中的网页内容

<；/web视图>

此url是由index.js中的数据定义的变量“”，w