【小程序】前端架构浅谈
前些日子，在架构师带领下，我和另外一个前端从零开始开发微信小程序。这是一个比较完整的项目开发，基于此项目，从如下几个点，我对小程序的架构进行一些分析和介绍。php
因为本人能力有限，可能会有缺漏和错误，欢迎指出。html
目录
- 项目介绍
- 项目结构
- 组件化开发
- HTTP请求封装
- 文档书写
- 总结
内容
1. 项目介绍
此是一个轻量的小程序，所有由原生小程序页面组成。咱们将之划分为7个模块，用户、地址、优惠券、团购商城、订单、红包、退款。前端
项目初始是只有产品原型，服务端开发、UI设计、前端开发是同步进行的。一开始，咱们是按照原型进行架构和页面开发，UI设计图和服务端接口后面陆陆续续提供出来的时候，咱们再进行修改，这边会有一个很重要的，就是mock数据，这个会在后面讲到。vue
2. 项目结构
项目结构主要分为公用组件、图片资源、页面、数据格式处理、工具类。react
├─ components（公用组件） ├─ images（图片资源） ├─ libs（库） │ ├─ mock.js（mock数据） │ ├─ sdk.js（接口封装） ├─ pages（页面） │ ├─ account（用户相关） │ ├─ address（地址相关） │ ├─ coupon（优惠券相关） │ ├─ group（团购商城相关） │ ├─ order（订单相关） │ ├─ redPackage（红包相关） │ └─ refund（退款相关） ├─ service（数据格式处理） └─ utils（工具类） ├─ public.js └─ request.js ├─ components（公用组件） ├─ images（图片资源） ├─ libs（库） │ ├─ mock.js（mock数据） │ ├─ sdk.js（接口封装） ├─ pages（页面） │ ├─ account（用户相关） │ ├─ address（地址相关） │ ├─ coupon（优惠券相关） │ ├─ group（团购商城相关） │ ├─ order（订单相关） │ ├─ redPackage（红包相关） │ └─ refund（退款相关） ├─ service（数据格式处理） └─ utils（工具类） ├─ public.js └─ request.js
3. 组件化开发
你们都知道，组件化开发有不少好处。程序员
- 组件复用，代码量少，提升编译速度。
- 组件的逻辑独立，修改不会影响其它文件。
- 文件结构清楚，方便其余人员的使用。
不过，若是组件设计不合理，业务拆分不对，也会形成重复代码、组件通讯混乱和多工做量等问题。这个就须要项目开发者统筹全局，进行分析判断。 因此，咱们研究了原型图，分析其中的功能模块和业务模块，咱们将相同或可复用的模块提取出来，放到全局组件库下。同时，咱们将单个模块也进行了组件化拆分，放在各自的模块组件库下。json
在模块中，咱们在页面中也抽了一些逻辑相对独立的代码出来，写成组件，有些是能够复用，有些单纯就是为了页面可读性高些。复用举例：在订单详情和订单列表中，有关订单的状态及功能按钮是一致的，咱们就将这一块抽了出来，写成behaviors。可读性举例：确认订单页中，选择红包的弹窗，就单独写成组件，只要将红包选择的最终结果传给父组件就行，二者的边界很清晰。小程序
4. HTTP请求封装
微信小程序进行网络通讯，要先设置域名，否则会提示不合法。设置域名的信息能够在开发者工具-详情-域名信息中看到。后端
使用wx.request能够发起一个http请求微信小程序
wx.request({
url: 'test.php', // 开发者服务器接口地址 data: { // 请求的参数 x: '', y: '' }, method: 'GET', // HTTP 请求方法, 默认GET header: { // 设置请求的 header 'content-type': 'application/json', // 默认值 'cookie': 'token=' + token }, dataType: 'json', // 返回的数据格式, 默认json responseType: 'text', // 响应的数据类型, 默认text success (res) { // 接口调用成功的回调函数 console.log(res.data) }, fail () { // 接口调用失败的回调函数 }, complete () { // 接口调用结束的回调函数（调用成功、失败都会执行） } })
在平时项目使用中，咱们每每会对HTTP请求作一层封装。
从图中能够看到，在自定义的SDK中封装HTTPS请求的数据或MOCK的数据。在各个七个模块的services中分派，而后再在页面pages或者组件components中调用。
- request模块封装，方便网络请求。
- 定义了一个名为SDK的类，集成全部接口获取的方法。
- 在app.js中，经过new命令生成对象实例，将初始化后的sdk赋值globalData.API_SDK，方便项目中中调用。
- Services中获取globalData.API_SDK对象实例中的接口方法，并导出。
- 在页面中引用Services中的方法，并调用方法。
5. 文档书写
软件开发文档是软件开发使用和维护过程当中的必备资料。它能提升软件开发的效率，保证软件的质量，并且在软件的使用过程当中有指导，帮助，解惑的做用，尤为在维护工做中，文档是不可或缺的资料。
在项目中，咱们维护了两份文档，分别为API文档和组件README文档。 在API文档中，将每次SDK修改的内容都写在文档中，标注版本、时间、说明。并说明SDK接口的使用方式、传参说明、API响应说明等。在README文档中，则写明目录结构说明和全局组件说明。这样，开发者就能够经过文档来比较方便的了解此项目的状况。
6. 总结
在写这个项目前，前端约定了小程序开发规范。明确了页面、命名、样式、行为等规范。所以，在开发过程当中，咱们格外注意开发的风格，尽可能作到统一。
在原型出来之后，架构师根据原型图进行了模块和功能的划分，明确了每一个人所作的开发内容，制定了前端开发排期。
在开发过程当中，由于UI图还没出来，咱们根据原型图先进行了开发，后来在修改样式的时候，感受仍是挺麻烦的。不过，虽然存在样式返工问题，可是加快了后续的开发速度。
由于架构师封装了所有的接口到SDK中，而且跟后端程序员约好了数据内容（全局统筹能力很强了，懂后端知识），咱们在对接的时候方便了不少，速度也快了不少。同时，在调试对接的时候，也修改了一些缺少的字段服务端没有提供或者SDK没有包的，这个咱们后续加进去的，在API文档说明都有作修改内容说明（因此多人协做时，文档真的很重要）。
这个项目前期很慢，后期很快。快到项目上线日期了，其实咱们有些接口还没调完（测试已经在陆陆续续测试咱们已经写好的模块了），感受挺着急的，虽然上线日期定了，架构师说能够延期的，不过很神奇的是，咱们如约上了。
这是我写的第二个小程序的项目，是完整的整一个项目。前一个小程序项目只写了一个小模块，所以感受成长仍是挺大的。比较其余以往的开发项目，相似vue、react、支付宝小程序，感受开发框架都是大同小异的，基本理念和流程都大体类似，只是开发语言或方法的实现有所差别。
----------------------------------------
小程序系列：
基础使用： component使用 、 wxs使用 、 节点操做 、 页面跳转 、 缓存
----------------------------------------