微信小程式學習總結(三)條件、模板、檔案引用例項分析
阿新 • • 發佈:2020-06-05
本文例項講述了微信小程式條件、模板、檔案引用。分享給大家供大家參考,具體如下:
上一節的在遍歷的時候控制檯中會報錯
<view wx:for="{{content}}" wx:for-item='item' wx:for-index='index'> {{item.name}} </view>
控制檯中會顯示這個東西
Now you can provide attr "wx:key" for a "wx:for" to improve performance.
當然了不處理也不影響程式執行,但是看著好不爽啊。
wx:key用來對列表渲染的資料指定一個"主鍵”,以加快列表渲染的速度。以下是官方文件原話:
如不提供 wx:key,會報一個 warning, 如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。如果你一定想去掉這個警告,加wx:key="name"就不會報錯了。
條件
<view wx:if='{{false}}'>TEST</view> <view wx:else>oh no</view>
block
如果要一次性判斷多個元件標籤,可以使用一個
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
模板
可以在模板中定義程式碼片段,然後在不同的地方呼叫。
這就類似公共程式碼的意思
common.wxml
<template name="common"> <text>這是一個模板</text> </template>
我把它引用到wxml中
<import src="common.wxml" />
使用模板,is宣告需要的使用的模板
<template is="common"/>
引用wxss檔案
@import "news-item/news-item-template.wxss";
import有作用域
就問你傲不傲嬌
看看官方給的解釋
它只會 import 目標檔案中定義的 template,而不會 import 目標檔案 import 的 template。
如:C import B,B import A,在C中可以使用B定義的template,在B中可以使用A定義的template,但是C不能使用A定義的template。
希望本文所述對大家微信小程式設計有所幫助。