第五篇：小程序之关于项目优化的思考-CSDN博客

由于小程序是轻量级的，所以架构设计方面不像移动端，有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视图

总之，这只是一种思路，我们可以沿着这个思路，让每个模块的业务耦合性低，同时已与扩展。