由于小程序是轻量级的,所以架构设计方面不像移动端,有MVP、MVVM、插件化、组件化这么多成熟的架构可以使用,现在市面上关于小程序架构方面的设计还是很少的。当然这些都是一些思想。我们可以从一个小模块去思考该怎么去设计。总之,能达到降低耦合性,减少代码冗余,提高复用性为目的。 在这里插一句,小程序的表现形式,倒是跟Android的MVVM很类似,都是可以直接在xml文件中直接响应数据源的变化、可视化。但是,Android的MVVM太耗内存,维护性而言,个人觉得比较困难。 点击我查看完整项目
先上图,来表达本文的大概设计思想:
一、wxml的嵌入
1、import
1)import可以在该文件中使用目标文件定义的template,如:
复制代码
在 index.wxml 中引用 item.wxml,就可以使用item模板:
<import src="../item/item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
复制代码
2)import 有作用域:
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
2、include
可以将目标文件除了<template/>、<wxs/>
标签外的整个代码引入,相当于是拷贝到 include 位置。如:
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
复制代码
include引人:
<!-- index.wxml -->
<include src="../header/header.wxml"/>
<view> body </view>
<include src="../footer/footer.wxml"/>
复制代码
3、引用的注意事项
1、import、include引用的src目录一定要是全路径,即目录下的文件路径,如:"../header/header.wxml" 2、在被引入的子View页面,如果含有scroll-view,则可能会布局错误。这个时候慎用。
二、wxss的复用
我们知道,每个应用的字体大小、字体颜色,基本上都只有几种全局风格的。又或者,按钮的风格也只有几种,像这样的情况,我们可以把这样的全局性的,应用统一的属性在app.wxss中,供所有的page中的view使用
/**************************** 字体大小 ***************************/
.fontMax{
font-size: 60rpx;
}
.fontMiddle{
font-size: 30rpx;
}
.fontDefault{
font-size: 26rpx;
}
.fontSmall{
font-size: 24rpx;
}
.fontMin{
font-size: 20rpx;
}
/**************************** 颜色色值 ***************************/
.defaultColor{
color: #F3F3F3;
}
.red{
color: #c81432;
}
.white{
color: #ffffff;
}
.grey{
color: #999;
}
.black{
color: #333;
}
复制代码
三、page.js的设计
1、定义一个全局性的base.js文件,关于涉及到多个页面需要用到的方法,可以放到base中处理。 2、如果页面逻辑比较复杂(一般地首页逻辑比较复杂),对于这样的页面,如home.js,我们可以另外新设计一个control控制层。
- control控制层: 处理具体的业务逻辑,包括网络请求,其他函数的执行等,执行完后,将执行的结果返回给home层,可以通过回调的方法、或者直接返回数据结果。 2)home层: 实际的page页面。此时的home层逻辑就比较简单了,主要是 a、执行一些响应的方法,如点击事件、滑动事件等。 b、响应control层,接收返回的结果,从而设置数据,刷新view视图
总之,这只是一种思路,我们可以沿着这个思路,让每个模块的业务耦合性低,同时已与扩展。