引用
一、前言
微信小程序设定上传限制为1M,所有代码需要考虑到模块化，下文将分别介绍小程序的模块化方法
二、模块化
杂乱房间.png
1、WXML模板和模板引用
模板的使用可以有效的减少小程序大小
1.1 template 定义模板
使用name 属性，作为模板的名字， 然后在<template/> 中定义代码
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
1.2 template 模板引用
使用is属性，声明需要使用的模板，然后将模板所需要的data传入
<template is="msgItem" data="{{...item}}"/>
说明： （1）模板拥有自己的作用域，只能使用data传入的数据 （2）inport 可以在该文件中使用目标文件中，定义的template, 例如： 在item.wxml中定义了 一个name 是 item 的template, 可以先引入item.wxml
<import src="item.wxml"/>
（3）import 有作用域的概念， 只会import目标文件中定义的template, 而不会import 目标文件import 的template
1.3 include 方式引用模板
include可以将目标文件除了<template/>的整个代码引入， 相当于是copy 到include 的位置
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
2、WXSS样式引入
2.1 样式引入
wxss样式的引入，不会减少小程序的大小， 但是能方便代码的书写
使用@import 语句可以导入外联样式表，后面跟上需要导入的外联样式表的相对路径，用;表示语句结束
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
2.2 内联样式
框架组件上支持使用style, class 属性来控制组件的样式 style: 静态的样式统一写到class 中， style接收动态的样式，在运行时候会进行解析， 尽量避免将静态的样式写进style中，避免影响渲染速度 class: 用于指定样式规则， 其属性值是样式规则中类选择器名的集合， 样式类名不需要加 ., 样式类名之间使用空格分隔
<view class="normal_view other_view" />
说明： 在wxss中，可以使用, 将不同的class 一次指定样式
.type , other-type{
float: left;
width: 750rpx;
margin-top: 1px;
}
3、JS模块化
模块化茶几.png
