微信小程序?qū)W習(xí)總結(jié)（三）條件、模板、文件引用實(shí)例分析
本文實(shí)例講述了微信小程序條件、模板、文件引用。分享給大家供大家參考，具體如下：
上一節(jié)的在遍歷的時(shí)候控制臺(tái)中會(huì)報(bào)錯(cuò)
<view wx:for="{{content}}" wx:for-item='item' wx:for-index='index'>
{{item.name}}
</view>
控制臺(tái)中會(huì)顯示這個(gè)東西
Now you can provide attr "wx:key" for a "wx:for" to improve performance.
當(dāng)然了不處理也不影響程序運(yùn)行，但是看著好不爽啊。
wx：key用來對(duì)列表渲染的數(shù)據(jù)指定一個(gè)"主鍵”，以加快列表渲染的速度。以下是官方文檔原話：
如不提供 wx:key，會(huì)報(bào)一個(gè) warning， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以選擇忽略。如果你一定想去掉這個(gè)警告，加wx:key="name"就不會(huì)報(bào)錯(cuò)了。
條件
<view wx:if='{{false}}'>TEST</view>
<view wx:else>oh no</view>
block
如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè)
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
模板
可以在模板中定義代碼片段，然后在不同的地方調(diào)用。
這就類似公共代碼的意思
common.wxml
<template name="common"> <text>這是一個(gè)模板</text> </template>
我把它引用到wxml中
<import src="common.wxml" />
使用模板，is聲明需要的使用的模板
<template is="common"/>
引用wxss文件
@import "news-item/news-item-template.wxss";
import有作用域
就問你傲不傲嬌
看看官方給的解釋
它只會(huì) import 目標(biāo)文件中定義的 template，而不會(huì) import 目標(biāo)文件 import 的 template。
如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。
希望本文所述對(duì)大家微信小程序設(shè)計(jì)有所幫助。
- 微信小程序?qū)W習(xí)總結(jié)（二）樣式、屬性、模板操作分析
- 微信小程序自定義導(dǎo)航欄（模板化）
- 微信小程序模板消息推送的兩種實(shí)現(xiàn)方式
- 微信小程序模板消息限制實(shí)現(xiàn)無限制主動(dòng)推送的示例代碼
- 微信小程序template模板與component組件的區(qū)別和使用詳解
- 微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能示例【通過openid推送消息給用戶】
- 微信公眾平臺(tái) 發(fā)送模板消息(Java接口開發(fā))
- 微信小程序模板template簡(jiǎn)單用法示例
- 微信小程序模板與設(shè)置WXML實(shí)例講解
相關(guān)文章
面向JavaScript入門初學(xué)者的二叉搜索樹算法教程
二叉搜索樹則是二叉樹的一種,但它只允許你在左側(cè)節(jié)點(diǎn)儲(chǔ)存比父節(jié)點(diǎn)小的值,右側(cè)只允許儲(chǔ)存比父節(jié)點(diǎn)大的值,這篇文章主要給大家介紹了關(guān)于JavaScript二叉搜索樹算法的相關(guān)資料,需要的朋友可以參考下2021-09-09
等號(hào)和非等號(hào)的同類運(yùn)算符是全等號(hào)和非全等號(hào)。這兩個(gè)運(yùn)算符所做的與等號(hào)和非等號(hào)相同，只是它們?cè)跈z查相等性前，不執(zhí)行類型轉(zhuǎn)換。接下來通過本文給大家介紹JS中的全等和不全等、等于和不等于，一起看看吧2021-09-09
瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
defer和async特性相信是很多JavaScript開發(fā)者"熟悉而又不熟悉"的兩個(gè)特性，從字面上來看，二者的功能很好理解，分別是"延遲腳本"和"異步腳本"的作用2016-01-01
在登錄頁經(jīng)常會(huì)用到通過點(diǎn)擊文本框的類似小眼睛圖片來實(shí)現(xiàn)隱藏顯示密碼的功能。下面給大家介紹基于JS實(shí)現(xiàn)登錄頁密碼的顯示和隱藏功能，需要的朋友參考下吧2017-12-12
使用bootstrapValidator插件進(jìn)行動(dòng)態(tài)添加表單元素并校驗(yàn)
動(dòng)態(tài)添加表單元素，并調(diào)用bootstrapValidator的方法為表單添加校驗(yàn)規(guī)則，調(diào)用addField()方法實(shí)現(xiàn)功能。下面通過本文看下具體實(shí)現(xiàn)方法吧2016-09-09
這篇文章介紹了判定是否原生方法的JS代碼，有需要的朋友可以參考一下2013-11-11
JavaScript實(shí)時(shí)更新當(dāng)前的時(shí)間的示例代碼
這篇文章主要介紹了JavaScript實(shí)時(shí)更新當(dāng)前的時(shí)間的示例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
JS代碼隨機(jī)生成姓名、手機(jī)號(hào)、身份證號(hào)、銀行卡號(hào)
下面小編自己寫的一個(gè)js生成器代碼，代碼比較簡(jiǎn)單，實(shí)用性非常高，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧
這篇文章主要介紹了淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
一個(gè)php+js實(shí)時(shí)顯示時(shí)間問題
本文給大家分享的是解決的php+js實(shí)時(shí)顯示時(shí)間問題，主要是自己當(dāng)時(shí)的理解有問題，也許大家有和我一樣的情況，這里分享給大家2015-10-10