小程序学习（一）

1、绑定值

1 // img = '/images/1.jpg'
2 <image src="{{img}}"></image>
3 
4 // msg = 'hello world'
5 <view>{{ msg }}</view>

 

2、数组遍历（wx:for 控制属性绑定一个数组或对象，使用 wx:key 来指定列表中项目的唯一的标识符。）

 1 // arr=['apply', 'bar', 'menu']
 2 <view wx:for="{{arr}}" wx:key="index">
 3     //默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
 4     {{index}}{{item}}
 5 </view>
 6 
 7 
 8 // list=[{name: 'jack', age: 22}, {name: 'lili', age: 20}]
 9  <view wx:for="{{list}}" wx:key="index">
10    {{index}}{{item.name}}{{item.age}}
11  </view>

 

3、对象遍历（使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。）

1 /*
2     obj = { a: { title: '成功', type: 'success' }, b: { title: '失败', type: 'danger' }, a: { title: '警告', type: 'warnig' } }
3 */
4 
5 <view wx:for="{{obj}}" wx:key="key" wx:for-index="key" wx:for-item="item">
6     {{key}}--{{item.title}}---{{item.type}}
7 </view>*

 

4、条件渲染

　　（一） if、elif、else（不在DOM中渲染。）

1 // value = 10
2 <view wx:if="{{value>0}}">value大于0</view>
3 <view wx:else>value不大于0</view>
4 
5 // value2 = 16
6 <view wx:if="{{ value2 === 0 }}">0</view>
7 <view wx:elif="{{ value2 > 1000 }}">很大的值</view>
8 <view wx:else>{{ value2 }}</view>

　　（二）hidden（在DOM中渲染，绑定值为true时隐藏，false时显示。）

1 // isLogin = true
2 <view hidden="{{isLogin}}">未登录</view>
3 
4 // isHidden = false
5 <view hidden="{{isLogin}}">hidden绑定值为false，所有显示了。</view>

 

5、模板

　　第一步 定义模板（使用name属性作为模板的名字，在<template></template>中定义代码片段。）

1 <template name="testItem">
2   <icon type="success" color="red" size="30"></icon>
3   <view>{{msg}}</view>
4 </template>

　　第二步 使用模板（使用is属性，声明要使用的模板，将模板所需的data传入。）

1 // msg = '你好呀'
2 <template is="testItem" data="{{msg}}"></template>

 

 1 // is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：
 2 <template name="odd">
 3   <view> odd </view>
 4 </template>
 5 <template name="even">
 6   <view> even </view>
 7 </template>
 8 
 9 <block wx:for="{{[1, 2, 3, 4, 5]}}">
10   <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
11 </block>

　　* 模板的作用域。模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

6、引用

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

　　（一）import  import 可以在该文件中使用模板文件定义的 template，如：

　　　　在 item.wxml 中定义一个叫 testItem 的 template:

1 <!-- item.wxml -->
2 
3 <template name="testItem">
4   <text>{{text}}</text>
5 </template>

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

1 <import src="item.wxml"/>     // src路径为相对路径
2 <template is="testItem" data="{{ text: 'hello' }}"/>

　　　　* import 的作用域

　　　　import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

　　　　如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

1 <!-- A.wxml -->
2 <template name="A">
3   <text> A template </text>
4 </template>

1 <!-- B.wxml -->
2 <import src="a.wxml"/>
3 <template name="B">
4   <text> B template </text>
5 </template>

1 <!-- C.wxml -->
2 <import src="b.wxml"/>
3 <template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
4 <template is="B"/

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

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

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

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