小程序减肥过程

引用

微信小程序官方文档

一、前言

微信小程序设定上传限制为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