On the project front-end architecture applet

Recently, under the leadership of architect, I and another front-end from scratch to develop micro letter applet. This is a more complete project development, based on this project, from several points, I do some analysis and presentation of architecture applet.

Due to limited capacity, there may be omissions and errors, welcome that.

content

1. Projects

This is a lightweight applet, all former students applet pages. We will divide it into seven modules, users, addresses, coupons, buy store, order, red, refund.

The initial project is only a prototype, develop server, UI design, front-end development is synchronized. At first, we are in accordance with the prototype architecture and page developers, UI design and interface to the back end service time provided after another out, we'll make changes, there will be a very important here, it is the mock data, this will mentioned later.

2. Project Structure

Project structure divided into common components, picture resources, page, format the data processing tools.

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

3. The component-based development?

As we all know, component-based development has many advantages.

Component reuse, less code, faster compilation.
Logical components of independence, changes will not affect other files.
File structure clear, easy to use other personnel.

However, if the component design is unreasonable, not to split the business, will result duplicated code, chaos and multi-component communications workload and other issues. The project developers will need to co-ordinate the overall situation, analyze and judge. So, we looked at the prototype map, which analyzes the function module and a service module, we will be the same or reusable modules extracted out into the global component library. Meanwhile, we also carried out a single module assembly of split module assembly placed under the respective libraries.

In the module, we also draw on the page some logic relatively independent of the code out, written in assembly, some can be reused, some simple is to page readability higher. Multiplex example: the order details and order list, about the order status and function buttons are the same, we will be taken out of this one, written behaviors. Readability Example: Confirm Order page, select the red envelope of pop, written on a separate component, as long as the end result will be passed to the parent component selected red envelope on the line, the boundary between the two is clear.

4. HTTP request package

Small micro-channel network communication program, first set the domain name, or will prompt illegal. Information can set the domain name of developer tools -? Details - Domain information see.

使用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图还没出来，我们根据原型图先进行了开发，后来在修改样式的时候，感觉还是挺麻烦的。不过，虽然存在样式返工问题，但是加快了后续的开发速度。

Because the architect encapsulates all of the interfaces to the SDK, and back-end programmers made an appointment with the data content (global co-ordination are strong, and the knowledge to understand the back-end), when we docked a lot of convenience, faster speed a lot of. Meanwhile, in the butt when debugging, modify some of the lack of field service terminals are not provided or no SDK package, which we added to the list of follow-up, in the API documentation has to sit modify the content description (so multiplayer collaboration, document really important).

This project is very slow early, fast late. Project coming on-line date, in fact, we did not get it done some interfaces (already tested one after another test modules we've written up), I feel very worried, although given the date on the line, the architect said, can be extended, but it is amazing that we like about on.

This is the second project I wrote a small program, complete the entire project. Project before a small program written only a small module, so the feeling is still getting bigger growth. Compared with other development projects in the past, similar vue, react, Alipay small program, I feel very much the same development framework, the basic concepts and processes are similar, but the development of the implementation language or methods vary.