为微信开发填坑：微信网页支付的开发流程及填坑技巧

GitChat 做者：极笔北客
原文：为微信开发填坑：微信网页支付的开发流程及填坑技巧
关注微信公众号：「GitChat 技术杂谈」 一本正经的讲技术

【不要错过文末彩蛋】

小程序做为微信之父张小龙钦点，并屡次公开为之宣传造势的产品，在微信以后是仅有的一次。正由于这种特殊的优待，在小程序上线后，听说内测资格一度从100w被炒到300w，先不管是真是假，单是张小龙团队和市场对小程序的期待，就足以引发咱们的重视，作为一个开发人员，也很是有必要学习和了解小程序的开发原理及流程。若是你已经准备要作小程序开发，那么这篇文章就来的很及时。若是你的业务还不须要涉足小程序，你也能够经过本文对小程序的开发作一个基本的了解，以备不时之需。

本文会从小程序前端开发，小程序服务端开发及小程序的发布与审核三个方面来阐述小程序的开发流程。

###1、小程序前端介绍及开发

小程序的开发涉及到前端开发和后端开发，前端指的是在手机上能看到的部分，主要负责页面的布局排版及展现，后端提供数据和业务处理能力，指的是咱们写给前端调用的API接口。

####注册帐号

小程序的注册比较简单，首先，登陆微信公众号平台：mp.weixin.qq.com ，点击右上角“当即注册”按钮。

enter image description here

选择小程序

enter image description here

注册小程序

enter image description here

在注册小程序时，这里输入的邮箱，必定要是未在腾讯平台未使用过的邮箱，不然会提示邮箱已经被使用。注意这里说的腾讯平台，好比你用来注册微信公众号的邮箱、用来注册企鹅号的邮箱，都是不能用的。

注册成功以后，须要进入邮箱激活。激活后，按照要求，选择申请类型，进行注册开通。

####建立工程

为了支持小程序的开发， 微信官方研发了一个叫作微信开发者工具的东西，这个工具最初是为了协助微信公众号开发者作开发时用的，当微信小程序上线之后，微信开发者工具同步更新，也支持了小程序的开发。因为小程序中的页面及部分语法，彻底是微信本身封装好的，同时小程序的编译发布，都只能在微信开发者工具中完成，因此，微信开发者工具成为了大部分小程序开发者使用的开发工具。跟其余开发工具相比，微信开发者工具的易用性仍是比较差，因此，一部分人用其余的开发工具作开发，只用微信开发者工具编译和发布，虽然比较麻烦，可是效率提升很多，比价推荐的工具是国产的EgretWing。

微信开发者工具下载地址：

mp.weixin.qq.com/debug/wxado…

点击蓝色字体“开发者工具”便可。

enter image description here

安装完微信开发者工具，第一次打开，会提示让扫描二维码，这只是一个开发受权，只要微信在小程序后台被绑定为开发者的微信，扫描均可以。扫描完成后登陆开发工具。

登陆成功以后，进入项目列表页面，若是以前打开太小程序，则会以列表显示。

enter image description here

点击“添加项目”，进入建立小程序页面。

enter image description here

这里的APPID，是小程序开发权限的认证，若是不填，选择“无APPID”也能够进行开发，可是没法正常发布小程序。APPID在小程序后台能够拿到，如图：

enter image description here

小程序的项目名称，能够根据本身的实际项目填写，支持中英文。

项目目录，是指开发目录，选择指向到要开发的小程序目录便可。点击肯定，一个新的小程序项目就建立成功。

enter image description here

enter image description here

####工程结构

新建的小程序项目如图：

enter image description here

上图中，区块1是菜单栏，关于小程序的操做菜单都在这里。

编辑：也是默认模式，在此模式下，能够对小程序源码进行编辑；

编译：在此模式下，能够编译调试小程序，小程序的日志输出会在日志区域打印出来；

项目：在此模式下，能够对已经开发完成的或者能够提测的小程序进行打包发布。

区块2是预览区域，小程序的页面展现，页面间的交互，都在这里，这块的小程序跟发布出去在手机上点开的小程序显示是彻底同样的。

区块3是工程代码结构，展现出项目中全部的文件及文件间的关系。

区块4是代码区域，开发主要在这个区域进行编码。

每个微信小程序，都会有三个公共入口文件：

app.json：配置文件，配置路由列表、程序信息等。

app.js：公共入口文件，小程序启动时的 Init 逻辑。

app.wxss ：公共样式文件，公共样式用于每一个视图 View 中。

同时，也会有pages这个文件夹，文件夹内就是全部的前端页面文件。

####主要文件

小程序前端的文件有四类，js、json、wxml、wxss。

js：主要负责调用后端接口作数据交互，页面逻辑处理；

json：主要用来存储数据内容，通常用的较少；

wxml：至关于html，主要用来展现页面信息；

wxss：至关于css，跟css语法基本一致；

如图：

enter image description here

在小程序中，每个页面须要建立一个文件夹，如上图中的list，该文件夹下须要建立以上四个文件，须要注意的是，这四个文件的文件名要和文件夹保持一致。

####经常使用方法

微信小程序自己并无创造出新的编程语言，其本质仍是h五、css、js，是最基础的前端技术。因此，小程序的技术门槛较低，不少小程序都是一周时间开发并上线的。

可是微信对以上三种前端技术都作了必定的封装，用wxml来代替h5，其中的标签作了大量封装，如图：

enter image description here

同时，把css封装为wxss，这个几乎没什么变化。

再说js，封装了不少微信内部的js，在小程序中，这些被封装的js方法叫作组件。比较经常使用的有这些：

wx.request：用来作网络请求，小程序前端跟后端API交互，就用的是这个组件；

wx.navigateTo：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack能够返回到原页面；

wx.pageScrollTo：将页面滚动到目标位置；

wx.setNavigationBarTitle：动态设置当前页面的标题。

全部的组件能够在这里查看文档：

mp.weixin.qq.com/debug/wxado…

###2、小程序服务端介绍及开发

小程序前段负责内容的展现，若是咱们开发的是纯静态页面，那么只须要掌握上面的就能够。可是，若是咱们要作动态页面，也就是页面内容是跟数据库交互的，就须要服务端来提供数据的交互。在小程序中，服务端是以接口的方式实现的，结果以json数据格式返回。

####服务接口介绍

服务端的接口开发跟通常的接口是同样的，能够用任何一种后端开发语言来实现，接口开发完成后，小程序前段经过组件wx.request调用接口，来实现跟服务端的交互，如图：

enter image description here

看到这个方法你们应该很眼熟，对，实际上wx.request就是jquery中的ajax，使用方法彻底同样。在这个接口调用中，小程序前端调用后端接口，获取到了新闻列表，而后将结果集赋值给list的变量。

在小程序对应的前端页面news.wxml中，将list进行遍历展现，如图：

enter image description here

这样，咱们就完成了一个小程序中的列表页面。其余的服务端交互都是相似的，小程序的开发工做，到这里其实已经结束，下面都是相关的配置。

####安全证书的申请

前面说到，在小程序中服务端接口的开发跟通常的接口是同样的，通常的接口大部分都采用的http协议，可是，小程序要求必须是https安全协议，不然接口调用会失败，这是强制的。因此，咱们的服务端必须安装安全证书，采用https协议对外发布接口。

网络上提供安全证书的服务商不少， 好比赛门铁克，有收费何免费的证书。若是是企业应用，建议去买一个企业级的安全证书，若是只是我的开发研究的话，这里给你们介绍一个比较靠谱的免费安全证书——阿里云。阿里云给我的用户提供不限时长的免费证书，注意必定是我的用户，企业用户是没有这个福利的。首先，以我的用户帐户登录阿里云，找到“CA证书服务”，如图：

enter image description here

进入证书服务页面后，点击“当即购买”，如图：

enter image description here

选择免费证书，当即购买：

enter image description here

在控制台中，找到“证书服务”，按照要求填写信息就能生成绑定指定域名的证书。

enter image description here

证书生成后，能够下载，在下载的证书文件中，有详细的说明文档，告诉你在不一样的环境中如何快速安装配置安全证书，这里就不赘述。

###3、小程序的发布与审核

####提交与发布

小程序开发完成以后，就能够在微信开发者工具中进行提交，如图：

enter image description here

在项目模式下，点击上传，便可完成小程序代码的上传，上传完成后，须要登录到小程序管理后台，须要设置相关项，如图：

enter image description here

首先，设置合法域名，也就是服务端接口的域名地址，这里注意不要填错。

其次，填写小程序基础信息：

enter image description here

这里须要注意的是服务类目的选择，必定要选择跟本身小程序对应的类目，一点类目选择不匹配，会审核不经过，再次提交再次审核，就须要3到5个工做日，不少人在这个地方一耗就是一个多月。

只要基础信息审核经过，就能够进性小程序发布审核，如图：

enter image description here

小程序发布审核经过后，就能够在微信中搜索到已经发布的小程序，至此，小程序的开发流程完成。

###4、总结

小程序的开发从开发技能上讲，彻底是前端开发，不涉及任何新的技能，基本上也没有什么开发难度，只要是掌握h五、css、js的开发人员，均可以胜任。比较麻烦的是小程序开发流程及开发完成后的各类资质的审核，微信官方的文档讲的不清楚，不少时候不知道本身的小程序属于那种类目，就得去试，错一次多的话会浪费一周，因此，这篇文章没有详细讲解小程序的开发部分，相关文章网上不少，而是着重讲解了小程序的开发流程及审核发布，但愿能帮到正在或将要作小程序开发的朋友，有问题能够关注微信公众号“极笔北客”或微博“极笔北客”。

实录：《王冬强：小程序快速上手开发实战解析》

---

彩蛋

重磅 Chat 分享：

《高效学习，快速变现：不走弯路的五大学习策略》

分享人：
一名会在 B 站直播写代码，会玩杂耍球、弹 Ukulele、极限健身、跑步、写段子、画画、翻译、写做、演讲、培训的程序员。喜欢用编程实现本身的想法，在 Android 市场上赚过钱，有屡次创业经历。擅长学习，习惯养成，时间管理。身体力行地影响他人作出积极的改变！目前就任于 ThoughtWorks，致力于传播快乐高效的编程理念。业余创立软件匠艺社区 CodingStyle.cn，组织超过30场技术活动。

Chat简介：
说到学习呀，真是头大哟：碎片化，没有较长的连续时间来学习难专一，捧起书，手机却在召唤：来呀，快活呀~ 反正有，大把时光~作不到，看了不少书，生活中却作不到然并卵，学了方法和工具，找不到使用场景效率低，学习速度跟不上知识产生的速度记不牢，学习速度赶不上遗忘速度在这个知识泛滥、跨界竞争的年代，学习能力才是核心竞争力。你想一想，过去一周，有没有哪一件工做是不须要学习就能完成的？尽管如此重要，大部分人却没研究过学习这件事，觉得上下班路上打开「获得」听本书，就是碎片时间终身学习者了。

我是程序员，咨询师，培训师，这几个角色都要求我必须学得又快又好。本场 Chat 将分析学习的「趋势，原则，策略」，帮你站在更高的视角看待学习，从「内容，动机，交互，收益，资源」五方面制定策略，解决学习痛点，助你成为高效学习者！