开发微信小程序

1、注册微信小程序

1.1、注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

1.2、登录后的一些设置

点击左侧的"设置"

设置用户名头像

查看自己的AppId（这个值非常重要，开发会遇到）

1.3、开发者工具下载以及使用

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

开发工具的使用

• 1、打开工具，使用自己的微信扫描二维码进行登录

• 2、根据自己的需求填写项目信息（AppID就是上上边注册账号后的那个值）
  
• 3、创建好之后，进入开发的主界面，有如下三大区域
  
• 4、主界面介绍
  

注意：新建子页面的时候，只需要自己在pages文件夹下新建后缀是wxml的文件即可，在app.json注册这个页面后，其他三个对应的文件会自动创建

2、小程序配置、组件介绍

2.1、目录结构说明

在小程序中，对于html、js、css均做了扩展与限制，并且对其文件后缀有了新的定义
主体文件，由三个文件组成，必须放在项目的根目录，如下：

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式表

每个页面由四部分组成：

文件类型	必填	作用
js	是	页面逻辑 ( 微信小程序没有window和document对象 )
wxml	是	页面结构 ( WeiXin Markup Language，不是HTML语法 )
wxss	否	页面样式表 (WeiXin Style Sheets 拓展了rpx尺寸单位，微信专属响应式像素 )
json	否	页面配置

2.2、配置说明

2.2.1、app.json 配置项列表

app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
示例：

{
	"pages": ["pages/index/index", "pages/logs/index"],
	"window": {
		"navigationBarTitleText": "Demo"
	},
	"tabBar": {
		"list": [{
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/logs/logs",
				"text": "日志"
			}
		]
	},
	"networkTimeout": {
		"request": 10000,
		"downloadFile": 10000
	},
	"debug": true,
	"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

属性：

属性	类型	必填	描述	支持版本
pages	StringArray	是	页面路径列表
window	Object	否	全局的默认窗口表现
tabBar	Object	否	底部 tab 栏的表现
networkTimeout	Object	否	网络超时时间
debug	Boolean	否	是否开启 debug 模式，默认关闭
functionalPages	Boolean	否	是否启用插件功能页，默认关闭	2.1.0
subpackages	Object Array	否	分包结构配置	1.7.3
workers	String	否	worker代码放置的目录	1.9.90
requiredBackgroundModes	String Array	否	需要在后台使用的能力，如「音乐播放」
plugins	Object	否	使用到的插件	1.9.6
preloadRule	Object	否	分包预下载规则	2.3.0
resizable	Boolean	否	iPad 小程序是否支持屏幕旋转，默认关闭	2.3.0
navigateToMiniProgramAppIdList	String Array	否	需要跳转的小程序列表，详见 wx.navigateToMiniProgram	2.4.0
usingComponents	Object	否	全局自定义组件配置，开发者工具 1.02.1810190 及以上版本支持此字段

2.2.2、window配置

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持以下值： default 默认 样式 custom 自定义导航栏，只保留右上角胶 囊按钮	微信版本6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色	微信版本6.6.0
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	String	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信版本6.5.16
backgroundColorBottom	String	#ffffff	底部窗口的背景色，仅 iOS 支持	微信版本6.5.16
enablePullDownRefresh	Boolean	false	是否开启当前页面的下拉刷新。 详见Page.onPullDownRefresh
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单 位为px。 详见 Page.onReachBottom
pageOrientation	String	portrait	屏幕旋转设置，仅支持 auto / portrait 详 见 响应显示区域变化	微信版本6.7.3

• 注：HexColor（十六进制颜色值），如"#ff00ff"
• 注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉
• 注：客户端 6.7.2 版本开始，navigationStyle: custom 对 组件无效
  
  示例：

{
	"pages": [
		"pages/index/index",
		"pages/logs/logs"
	],
	"window": {
		"backgroundTextStyle": "light",
		"navigationBarBackgroundColor": "#33FF00",
		"navigationBarTitleText": "我的微信小程序",
		"navigationBarTextStyle": "black"
	}
}

效果：

2.2.3、tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
backgroundColor	HexColor	是·		tab 上的文字选中时的颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	String	否	black	tabbar上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最 多5个 tab
position	String	否	bottom	tabBar的位置，仅支持 bottom / top

其中 list 接受一个数组，只能配置最少2个、最多5个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性 值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支 持网络图片。 当 postion 为 top 时，不显示 icon。
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 postion 为 top 时，不显示 icon。

示例：

{
	"pages": [
		"pages/index/index",
		"pages/logs/logs"
	],
	"window": {
		"backgroundTextStyle": "light",
		"navigationBarBackgroundColor": "#33FF00",
		"navigationBarTitleText": "我的微信小程序",
		"navigationBarTextStyle": "black"
	},
	"tabBar": {
		"list": [{
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/logs/logs",
				"text": "日志"
			}
		]
	}
}

会发现，下面的tabBar文字不居中，实际上这是编辑器的问题，在真机上测试是正常的。
问题来了，如何在真机上测试呢？

用手机微信扫码该二维码即可进行真机调试，非常的方便。

2.3、组件

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/

2.3.1、视图组件

2.3.1.1、view

视图容器，相当于html中的div

属性名	类型	默认值	说明	最低版本
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stoppropagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	按住后多久出现点击态，单位毫秒	手指松开后点击态保留时间，单位毫秒

示例：

<view class="section">
	<view class="section__title">flex-direction: row</view>
	<view class="flex-wrp" style="flex-direction:row;">
		<view class="flex-item bc_green">1</view>
		<view class="flex-item bc_red">2</view>
		<view class="flex-item bc_blue">3</view>
    </view>
</view>
<view class="section">
	<view class="section__title">flex-direction: column</view>
	<view class="flex-wrp" style="height: 300px;flex-direction:column;">
		<view class="flex-item bc_green">1</view>
		<view class="flex-item bc_red">2</view>
		<view class="flex-item bc_blue">3</view>
	</view>
</view>

样式（wxss文件）：

/* pages/demo/index.wxss */
.page-section{
margin-bottom: 20rpx;
} .
flex-wrp {display: flex;}
.bc_green {background: green;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}

2.3.1.2、swiper

滑块视图容器

属性名	类型	默认值	说明	最低版本
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0,0, 0, .3)	指示点颜色	1.1.0
indicator-activecolor	Color	#000000	当前选中的指示点颜色	1.1.0
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String	""	当前所在滑块的 item-id ，不能与 current 被同时指定	1.9.0
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	"0px"	前边距，可用于露出前一项的一小部分， 接受 px 和 rpx 值	1.9.0
next-margin	String	"0px"	后边距，可用于露出后一项的一小部分， 接受 px 和 rpx 值	1.9.0
display-multipleitems	Number	1	同时显示的滑块数量	1.9.0
skip-hidden-itemlayout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失 隐藏状态滑块的布局信息	1.9.0
bindchange	EventHandle		current 改变时会触发 change 事件， event.detail = {current: current, source: source}
bindanimationfinish	EventHandle		动画结束时会触发 animationfinish 事 件，event.detail 同上	1.9.0

示例：

<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
	<swiper-item>
		<image src="http://itcast-haoke.oss-cnqingdao.aliyuncs.com/images/2018/11/30/15435106627858721.jpg" width="375"
		height="150"/>
	</swiper-item>
	<swiper-item>
		<image src="http://itcast-haoke.oss-cnqingdao.aliyuncs.com/images/2018/11/30/15435107119124432.jpg" width="375"
		height="150"/>
	</swiper-item>
</swiper>

效果：

2.3.2、基础组件

2.3.2.1、icon图标

属性名	类型	默认值	说明
type	String	false	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	Number / String	23px	icon的大小，单位px（2.4.0起支持rpx）
color	Color		icon的颜色，同css的color

示例：

<view class="group">
	<icon type="success" size="20" />
	<icon type="success_no_circle" size="30" />
	<icon type="waiting" size="40" />
	<icon type="search" size="50" />
</view>

效果：

2.3.2.2、text文本

属性名	类型	默认值	说明	最低版本
selectable	Boolean	false	文本是否可选	1.1.0
space	String	false	显示连续空格	1.4.0
decode	Boolean	false	是否解码	1.4.0

space的有效值

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

说明：

• decode可以解析的有   < > & '    
• 各个操作系统的空格标准并不一致。
• text组件内只支持text嵌套。
• 除了文本节点以外的其他节点都无法长按选中。

<view class="container">
  <text>这是一段文本</text>
</view>

2.3.2.3、progress进度条

属性名	类型	默认值	说明	最低版本
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
border-radius	Number / String	0	圆角大小，单位px（2.4.0起支持rpx）	2.3.1
font-size	Number / String	16	右侧百分比字体大小，单位px（2.4.0起支 持rpx）	2.3.1
stroke-width	Number / String	6	进度条线的宽度，单位px（2.4.0起支持rpx）
color	Color	#09BB07	进度条颜色 （请使用 activeColor）
activeColor	Color		已选择的进度条的颜色
backgroundColor	Color		未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动 画从上次结束点接着播	1.7.0
bindactiveend	EventHandle		动画完成事件	2.4.1

示例：

<view>
	<progress percent="20" show-info />
	<progress percent="40" stroke-width="12" />
	<progress percent="60" color="pink" />
	<progress percent="80" active />
</view>

样式：

/* pages/demo/index.wxss */
progress{
margin: 10px
}

2.3.3

2.3.3.1、button按钮

属性名	类型	默认值	说明	生效时机
size	String	default	按钮的大小
type	String	default	按钮的样式类型

示例：

<view>
	<button size='default'>默认尺寸按钮</button>
	<button size='mini'>mini按钮</button>
	<button size='mini' type="primary">绿色mini按钮</button>
	<button size='mini' type="warn">红色mini按钮</button>
</view>

效果：

2.3.3.2、form表单

将组件内的用户输入的内容提交。
当点击表单中 form-type 为 submit 的按钮组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上name 来作为 key。

属性名	类型	说明	最低版本
reportsubmit	Boolean	是否返回 formId 用于发送模板消息
bindsubmit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreset	EventHandle	表单重置时会触发 reset 事件

页面：

<form bindsubmit="formSubmit" bindreset="formReset">
	<view class="section section_gap">
		<view class="section__title">switch</view>
		<switch name="switch" />
	</view>
	<view class="section section_gap">
		<view class="section__title">slider</view>
		<slider name="slider" show-value></slider>
	</view>
	<view class="section">
		<view class="section__title">input</view>
		<input name="input" placeholder="please input here" />
	</view>
	<view class="section section_gap">
	<view class="section__title">radio</view>
	<radio-group name="radio-group">
		<label>
			<radio value="radio1" /> radio1
		</label>
		<label>
			<radio value="radio2" /> radio2
		</label>
	</radio-group>
	</view>
	<view class="section section_gap">
		<view class="section__title">checkbox</view>
		<checkbox-group name="checkbox">
		<label>
			<checkbox value="checkbox1" /> checkbox1
		</label>
		<label>
			<checkbox value="checkbox2" /> checkbox2
		</label>
		</checkbox-group>
	</view>
	<view class="btn-area">
		<button form-type="submit">Submit</button>
		<button form-type="reset">Reset</button>
	</view>
</form>

点击事件：

Page({
	formSubmit: function(e) {
		console.log('form发生了submit事件，携带数据为：', e.detail.value)
	},
	formReset: function() {
		console.log('form发生了reset事件')
	}
})

效果：

2.3.4、image组件

属性名	类型	默认值	说明	最低版本
src	String		图片资源地址，支持云文件ID（2.2.3起）
mode	String	'scaleToFill'	图片裁剪、缩放的模式

• 注1：image组件默认宽度300px、高度225px
• 注2：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩 放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩 放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显 示出来。

示例：

<image src="http://itcast-haoke.oss-cnqingdao.aliyuncs.com/images/2018/11/30/15435106627858721.jpg"></image>
<image src="http://itcast-haoke.oss-cnqingdao.aliyuncs.com/images/2018/11/30/15435106627858721.jpg" mode="top"></image>

效果：

2.4、注册程序

• App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
  App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

Object 参数说明：

属性	类型	描述	触发时机
onLaunch	Function	生命周期回调—监听小程序初始化	小程序初始化完成时（全局只 触发一次）
onShow	Function	生命周期回调—监听小程序显示	小程序启动，或从后台进入前 台显示时

• 前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是
  进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入
  后台一定时间，或者系统资源占用过高，才会被真正的销毁

示例：

App({
	onLaunch(options) {
		// Do something initial when launch.
	},
	onShow(options) {
		// Do something when show.
	},
	onHide() {
		// Do something when hide.
	},
	onError(msg) {
		console.log(msg)
	},
	globalData: 'I am global data'
})

2.5、场景值

场景值	说明
1001	发现栏小程序主入口，「最近使用」列表（基础库2.2.4版本起包含「我的小程序」列表）
1005	顶部搜索框的搜索结果页

示例：

App({
onLaunch(options) {
	// Do something initial when launch.
	console.log(options.scene);
},
onShow(options) {
	// Do something when show.
},
onHide() {
	// Do something when hide.
},
onError(msg) {
	console.log(msg)
},
	globalData: 'I am global data'
})

模拟器：

2.6、注册页面

• Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、
  事件处理函数等。

Object 参数说明：

属性	类型	描述
data	object	页面的初始数据
onLoad	Function	生命周期回调—监听页面加载

2.6.1、初始化数据

• data 是页面第一次渲染使用的初始数据。
  页面加载时， data 将会以 JSON 字符串的形式由逻辑层传至渲染层，因此 data 中的数据必须是可以转成 JSON的类型：字符串，数字，布尔值，对象，数组；渲染层可以通过 WXML 对数据进行绑定。

示例：

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

Page({
	data: {
		text: 'init data',
		array: [{msg: '1'}, {msg: '2'}]
	}
})

效果：

2.6.2、生命周期回调函数

Page({
	data: {
		text: 'init data',
		array: [{
		msg: '1'
	}, {
		msg: '2'
	}]
	},
	onLoad(options) {
		console.log("页面加载完成",options);
	},
	onReady() {
		console.log("页面初次渲染完成");
	},
	onShow() {
		console.log("页面显示");
	},
	onHide() {
		console.log("页面隐藏");
	},
	onUnload() {
		console.log("页面卸载");
	}
})

生命周期函数说明：

函数	说明
onLoad(Object query)	页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页 面路径中的参数。
onShow()	页面显示/切入前台时触发

2.6.3、组件事件处理函数

• Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定
  义的事件处理函数

<!--绑定点击事件-->
<view bindtap="viewTap">click me</view>

Page({
	viewTap() {
		console.log('view tap')
	}
})

2.6.4、setData()

Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

参数说明

字段	类型	必填	描述	最低版本
data	Object	是	这次要改变的数据
callback	Function	否	setData引起的界面更新渲染完毕后的回调函数	1.5.0

注意：

1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2. 仅支持设置可 JSON 化的数据。
3. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
4. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题

示例：

<view>{{text}}</view>
<button bindtap="changeText">Change normal data</button>
<view>{{num}}</view>
<button bindtap="changeNum">Change normal num</button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray">Change Array data</button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject">Change Object data</button>
<view>{{newField.text}}</view>
<button bindtap="addNewField">Add new data</button>

js：

Page({
	data: {
		text: 'init data',
		num: 0,
		array: [{ text: 'init data' }],
		object: {
		text: 'init data'
		}
	},
	changeText() {
		// this.data.text = 'changed data' // 不要直接修改 this.data
		// 应该使用 setData
		this.setData({
		text: 'changed data'
		})
	},
	changeNum() {
		// 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段
		this.data.num = 1
		this.setData({
		num: this.data.num
		})
	},
	changeItemInArray() {
		// 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
		this.setData({
		'array[0].text': 'changed data'
		})
	},
	changeItemInObject() {
		this.setData({
		'object.text': 'changed data'
		})
	},
	addNewField() {
		this.setData({
		'newField.text': 'new data'
		})
	}
})

2.6.5、图解生命周期

2.7、模块化

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者exports 才能对外暴露接口

注意：

• exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。
• 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中或者使用小程序支持的 npm 功能

// common.js
function sayHello(name) {
 console.log(`Hello ${name} !`)
} 
function sayGoodbye(name) {
 console.log(`Goodbye ${name} !`)
} 
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中，使用 require(path) 将公共代码引入

const common = require('common.js')
Page({
	helloMINA() {
	common.sayHello('MINA')
},
goodbyeMINA() {
	common.sayGoodbye('MINA')
	}
})

3、视图层

3.1、WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

3.1.1、数据绑定

<!--wxml-->
<view>{{message}}</view>

// page.js
Page({
	data: {
	message: 'Hello MINA!'
	}
})

3.1.2、列表渲染

<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
	data: {
	array: [1, 2, 3, 4, 5]
	}
})

3.1.3、条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>

// page.js
Page({
	data: {
	view: 'MINA'
	}
})

3.1.4、模板

<!--wxml-->
<template name="staffName">
	<view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
	data: {
		staffA: {firstName: 'Hulk', lastName: 'Hu'},
		staffB: {firstName: 'Shang', lastName: 'You'},
		staffC: {firstName: 'Gideon', lastName: 'Lin'}
	}
})

3.1.5、引用

WXML 提供两种文件引用方式 import 和 include 。

3.1.5.1、import

import 可以在该文件中使用目标文件定义的 template ，如：
在 item.wxml 中定义了一个叫 item 的 template ：

<!-- item.wxml -->
<template name="item">
	<text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用 item 模板：

<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />

3.1.5.2、import 的作用域

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的template。
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不
能使用A定义的template。

<!-- A.wxml -->
<template name="A">
	<text>A template</text>
</template>
<!-- B.wxml -->
<import src="a.wxml" />
<template name="B">
	<text>B template</text>
</template>
<!-- C.wxml -->
<import src="b.wxml" />
<template is="A" />
<!-- Error! Can not use tempalte when not import A. -->
<template is="B" />

3.1.5.3、include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，
如：

<!-- index.wxml -->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />

<!-- header.wxml -->
<view>header</view>

<!-- footer.wxml -->
<view>footer</view>

3.2、WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

3.2.1、尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

3.2.2、样式导入

使用 @import 语句可以导入外联样式表， @import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。
示例代码：

/** common.wxss **/
.small-p {
	padding:5px;
} /
** app.wxss **/
@import "common.wxss";
.middle-p {
	padding:15px;
}

3.2.3、内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上 . ，样式类名之间用空格隔。

<view class="normal_view" />

3.2.4、选择器

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件

3.2.5、全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

3.3、WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML ，可以构建出页面的结构。

注意：

1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
4. wxs 函数不能作为组件的事件回调。
5. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

以下是一些使用 WXS 的简单示例：
页面渲染:

<!--wxml-->
<wxs module="m1">var msg = "hello world"; module.exports.message = msg;</wxs>
<view>{{m1.message}}</view>

页面输出：

hello world

数据处理：

// page.js
Page({
	data: {
		array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
	}
})

<!--wxml-->
<!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 -->
<wxs module="m1">
	var getMax = function(array) { var max = undefined; for (var i = 0; i <
	array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ?
	max : array[i]); } return max; } module.exports.getMax = getMax;
</wxs>
<!-- 调用 wxs 里面的 getMax 函数，参数为 page.js 里面的 array -->
<view>{{m1.getMax(array)}}</view>

页面输出：

5

更多资料：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/