【小程序】前端架构浅谈

前些日子，在架构师带领下，我和另一个前端从零开始开发微信小程序。这是一个比较完整的项目开发，基于此项目，从以下几个点，我对小程序的架构进行一些分析和介绍。

由于本人能力有限，可能会有缺漏和错误，欢迎指出。

内容

1. 项目介绍

此是一个轻量的小程序，全部由原生小程序页面组成。我们将之划分为7个模块，用户、地址、优惠券、团购商城、订单、红包、退款。

项目初始是只有产品原型，服务端开发、UI设计、前端开发是同步进行的。一开始，我们是按照原型进行架构和页面开发，UI设计图和服务端接口后面陆陆续续提供出来的时候，我们再进行修改，这边会有一个很重要的，就是mock数据，这个会在后面讲到。

2. 项目结构

项目结构主要分为公用组件、图片资源、页面、数据格式处理、工具类。

 ├─ components（公用组件）
 ├─ images（图片资源）
 ├─ libs（库）
 │   ├─ mock.js（mock数据）
 │   ├─ sdk.js（接口封装）
 ├─ pages（页面）
 │   ├─ account（用户相关）
 │   ├─ address（地址相关）
 │   ├─ coupon（优惠券相关）
 │   ├─ group（团购商城相关）
 │   ├─ order（订单相关）
 │   ├─ redPackage（红包相关）
 │   └─ refund（退款相关）
 ├─ service（数据格式处理）
 └─ utils（工具类）
     ├─ public.js
     └─ request.js

3. 组件化开发

大家都知道，组件化开发有很多好处。

组件复用，代码量少，提高编译速度。
组件的逻辑独立，修改不会影响其它文件。
文件结构清楚，方便其他人员的使用。

不过，如果组件设计不合理，业务拆分不对，也会造成重复代码、组件通信混乱和多工作量等问题。这个就需要项目开发者统筹全局，进行分析判断。所以，我们研究了原型图，分析其中的功能模块和业务模块，我们将相同或可复用的模块提取出来，放到全局组件库下。同时，我们将单个模块也进行了组件化拆分，放在各自的模块组件库下。

在模块中，我们在页面中也抽了一些逻辑相对独立的代码出来，写成组件，有些是可以复用，有些单纯就是为了页面可读性高些。复用举例：在订单详情和订单列表中，有关订单的状态及功能按钮是一致的，我们就将这一块抽了出来，写成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中，对Java程序员返回的数据格式进行了一层处理，所以我们在开发对接的时候很方便，速度很多。同时，在调试对接的时候，UI图中对于细节的处理不同，也在同时修改一些缺乏的字段或者服务端没有提供或者一开始SDK没有包入，在API文档说明都有做修改内容说明，多人协作时，文档真的很重要。

这个项目前期很慢，后期很快。快到项目上线日期了，其实我们有些接口还没调完（测试已经在陆陆续续测试我们已经写好的模块了），不过有了前面的打底，速度进行的很快，如约上了。

这是我写的第二个小程序的项目，是完整的整一个项目。前一个小程序项目只写了一个小模块，因此感觉成长还是挺大的。比较其他以往的开发项目，类似vue、react、支付宝小程序，感觉开发框架都是大同小异的，基本理念和流程都大致相似，只是开发语言或方法的实现有所差异。

----------------------------------------

小程序系列：

基础使用： component使用、 wxs使用、节点操作、页面跳转、缓存

前端架构浅谈