微信小程序 - 日常笔记1

117 阅读2分钟

##2.2.6 模板

WXML提供模板,可以在模板中定义代码片段,然后在不同地方调用。使用name属性,作为模板的名字。然后在<template> 定义代码片段,如:

<template name="msgItem">
	<view>
		<text>{{ index }}: {{msg}}</text>
		<text>Time: {{time}}</text>
	</view>
</template>

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如代码2-17所示。

<!--
item: {
  index: 0,
  msg: 'this is a template',
  time: '2016-06-18'
}
-->

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<template is="msgItem" data="{{...item}}"></template>

is可以动态决定具体需要渲染那个模板,如代码2-18所示

<template name="odd">
	<view> odd </view>
</template>

<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1,2,3,4]}}">
	<template is="{{item % 2 == 0 ? 'even' : 'odd'}}">
</block>

##2.2.7 引用

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

import 可以在该文件中使用目标文件定义的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'}}"/>

需要注意的是 import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。

include 可以将目标文件中除了 <template/> 外的整个代码引入,相当于是拷贝到 include 位置,如代码2-22、代码2-23、代码2-24所示。

代码清单2-22 index.wxml

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

<view> body </view>

<include src="footer.wxml"/>

代码清单2-23 header.wxml

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

代码清单2-24 footer.wxml

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

#2.3 WXSS 样式 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。

##2.3.3 WXSS引用

在CSS中,开发者可以这样引用另一个样式文件:@import url('./test_0.css')

在小程序中,我们依然可以实现样式的引用,样式引用是这样写:

@import './test_0.wxss'

由于WXSS最终会被编译打包到目标文件中,用户只需要下载一次,在使用过程中不会因为样式的引用而产生多余的文件请求。

小程序支持动态更新内联样式:

<!--index.wxml-->

<!--可动态变化的内联样式-->
<!--
{
  eleColor: 'red',
  eleFontsize: '48rpx'
}
-->

<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>