由于小程序是轻量级的，所以架构设计方面不像移动端，有MVP、MVVM、插件化、组件化这么多成熟的架构可以使用，现在市面上关于小程序架构方面的设计还是很少的。当然这些都是一些思想。我们可以从一个小模块去思考该怎么去设计。总之，能达到降低耦合性，减少代码冗余，提高复用性为目的。
在这里插一句，小程序的表现形式，倒是跟Android的MVVM很类似，都是可以直接在xml文件中直接响应数据源的变化、可视化。但是，Android的MVVM太耗内存，维护性而言，个人觉得比较困难。
点击我查看完整项目
先上图，来表达本文的大概设计思想：
小程序架构.png
一、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视图
总之，这只是一种思路，我们可以沿着这个思路，让每个模块的业务耦合性低，同时已与扩展。
网友评论