• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

【小程序】前端架构浅谈

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

目录

  1. 项目介绍
  2. 项目结构
  3. 组件化开发
  4. HTTP请求封装
  5. 文档书写
  6. 总结

内容

 

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中调用。

  1. request模块封装,方便网络请求。
  2. 定义了一个名为SDK的类,集成所有接口获取的方法。
  3. 在app.js中,通过new命令生成对象实例,将初始化后的sdk赋值globalData.API_SDK,方便项目中中调用。
  4. Services中获取globalData.API_SDK对象实例中的接口方法,并导出。
  5. 在页面中引用Services中的方法,并调用方法。

 

5. 文档书写

软件开发文档是软件开发使用和维护过程中的必备资料。它能提高软件开发的效率,保证软件的质量,而且在软件的使用过程中有指导,帮助,解惑的作用,尤其在维护工作中,文档是不可或缺的资料。

在项目中,我们维护了两份文档,分别为API文档和组件README文档。 在API文档中,将每次SDK修改的内容都写在文档中,标注版本、时间、说明。并说明SDK接口的使用方式、传参说明、API响应说明等。在README文档中,则写明目录结构说明和全局组件说明。这样,开发者就可以通过文档来比较方便的了解此项目的情况。

 

6. 总结

在写这个项目前,前端约定了小程序开发规范。明确了页面、命名、样式、行为等规范。因此,在开发过程中,我们格外注意开发的风格,做到统一。

在原型出来以后,我们根据原型图进行了模块和功能的划分,明确了每个人所做的开发内容,制定了前端开发排期。

在开发过程中,因为UI图还没出来,我们根据原型图先进行了开发,后来在修改样式的时候,感觉还是挺麻烦的。不过,虽然存在样式返工问题,但是加快了后续的开发速度。

因为我们封装了全部的接口到SDK中,对Java程序员返回的数据格式进行了一层处理,所以我们在开发对接的时候很方便,速度很多。同时,在调试对接的时候,UI图中对于细节的处理不同,也在同时修改一些缺乏的字段或者服务端没有提供或者一开始SDK没有包入,在API文档说明都有做修改内容说明,多人协作时,文档真的很重要。

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

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

 

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

小程序系列:

  前言

  项目结构

  生命周期

  请求与封装

  数据绑定

  事件

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

  前端架构浅谈

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序UI组件、开发框架、实用库...发布时间:2022-07-18
下一篇:
微信小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap