- ### WXML提供模板(template),可以在模板中定義代碼片段,然后在不同的地方調用
~~~
//定義模板
<template name="temp">
<view>
<view>收件人:{{name}}</view>
<view>聯系方式:{{phone}}</view>
</view>
</template>
//is使用模板
<template is="temp" data ="{{...item}}">
</template>
~~~
is 屬性可以使用 Mustache 語法,來動態決定具體需要渲染哪個模板:
~~~
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
~~~
- ### 引用
WXML 提供兩種文件引用方式`import`和`include`。
- import 只引入template模板
在 `item.wxml` 中定義了一個叫item的template
~~~
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
~~~
在`index.wxml`中引入
~~~
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
~~~
- 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>
~~~
- 0.豆瓣接口文檔
- 1.開發環境配置
- 2.hello world
- 3.wxml語法
- 第一節 數據綁定
- 第二節 列表渲染
- 第三節 條件渲染
- 第四節 模板引用
- 第五節 事件
- 第6節 輪播
- 第7節 skill
- 第8節 小程序接口調用
- 第9節 獲取自定義的屬性值
- 4.wxs
- 5.小程序的運行機制及框架
- 6.生命周期
- 7.小程序api
- 第1節 調用緩存
- 第2節 彈出框
- 第3節 模態框
- 第4節 分享showActionSheet
- 第5節 音樂播放
- 第6節 定義全局的數據
- 第7節 target
- 第8節 previewImage
- 第9節 用戶授權-獲取用戶信息
- 第10節 判斷用戶是否授權
- 8.組件
- 第1節 toolbar的配置
- 第2節 動態設置導航
- 第3節 數據加載loading
- 第4節 下拉刷新
- 第5節 地圖
- 第6節 component
- 第7節 scroll-view
- 第8節 form搜索
- 第9節 自定義事件的激活與監聽
- 第10節 自定義組件
- 1.屬性值改變時會觸發observer函數
- 2.組件的behaviors屬性可以將組件公共部部分抽離
- 第11節 slot
- 12 向組件傳遞外部樣式
- 13wxs
- 1.寫在wxml中的wxs
- 第14open-data
- 第15節 自定義button-slot實現授權組件
- 實例
- B.項目實戰
- 第一章 發送http請求
- 第1節 豆瓣調用限定數據的數據
- 第二章 可用的豆瓣接口
- 第三章 處理豆瓣列表頁的數據
- 第四章 電影更多頁面的數據加載
- 9.skill
- 第一節 e6解決this指向
- 第二節 使用class封裝一個簡單的http
- 第1點 封裝一個帶錯誤的http
- 第2點 使用models再次封裝http
- 第三節 http狀態碼
- 第四節 回調函數
- 第五節 小程序組件wx:if會觸發detached,hidden不會
- 第六節 使用promise封裝http
- 1.使用models再次封裝http
- 第七節 增加歷史數據到緩存中
- 第八節 Page向子組件傳遞上拉下拉
- 第九節 async,await語法支持