258资源分享网

前言、背景 本人目前的工作岗位是安卓工程师，在这之前对于前端和后台的知识基本是白纸，只是在日常的工作项目中有需要和小伙伴进行对接的时候接触了那么一丢丢，对于前端和后台的一些专业描述和理解有不当之处还请 ...

 

 

 

前言、背景

本人目前的工作岗位是安卓工程师，在这之前对于前端和后台的知识基本是白纸，只是在日常的工作项目中有需要和小伙伴进行对接的时候接触了那么一丢丢，对于前端和后台的一些专业描述和理解有不当之处还请各位指正。

目前部门的主营项目是一个电商项目，在本人入职之前整个项目系统的主营业务流程已经完备，也已经在正式运营，不过因为各种原因平台主要是在PC端和微信公众号进行运营。小程序其实出来的挺早的，但是优先级对于我们目前的规划来说其实还是很低的。直到17年11月的时候小程序推出了web-view组件，在当时被誉为移动电商的福音&&&&$$$...此处省略五千字。

有了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组件内网页微信支付。 实现方式和主要流程

先说明一下整个小程序实现webview调用支付的代码结构如图：

整个结构很清晰、简单，不做过多解释。微信小程序采用的MVVM的模式。
xxxx.wxml类似于安卓activity的xml文件。
xxxx.js类似于安卓中MVC模式的控制层。
xxxx.wxss类似于前端的CSS样式。我们目前几乎没用到，因为只用到了小程序的webview组件。

原理分析

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

上面已经提到如果需要小程序的webview组件调起微信支付，需要网页内部统一下单得到支付参数，然后通过小程序API调起微信支付,如下： wx.requestPayment( { 'timeStamp': '', 'nonceStr': '', 'package': '', 'signType': 'MD5', 'paySign': '', 'success':function(res){}, 'fail':function(res){}, 'complete':function(res){} })