微信小程式學習總結(三)
阿新 • • 發佈:2019-02-20
上一節的在遍歷的時候控制檯中會報錯
<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>
模板
可以在模板中定義程式碼片段,然後在不同的地方呼叫。
這是我練習的時候其中使用的模板,這就類似公共程式碼的意思
<template name="newsItem">
<view class="news-container">
<view class="news-author-date">
<image class="news-author" src="{{item.avatar}}"></image>
<text class="news-date">{{item.date}}</text>
</view>
<text class="news-title">{{item.title}}</text>
<image class="news-image" src="{{item.imgSrc}}"></image>
<text class="news-content">{{item.content}}
</text>
<view class="news-like">
<image class="news-like-image"
src="/imgs/icon/chat.png"></image>
<text class="news-like-font">{{item.collection}}</text>
<image class="news-like-image"
src="/imgs/icon/view.png"></image>
<text class="news-like-font">{{item.reading}}</text>
</view>
</view>
</template>
我把它引用到wxml中
<import src="news-item/news-item-template.wxml" />
使用模板,is宣告需要的使用的模板
<block wx:key="title" wx:for='{{newsList}}'>
<template is="newsItem" data="{{item}}" />//這裡的newsItem要和模板的name值一致
</block>
這個地方newsList是資料
引用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。
來,做個有趣的小實現
先在/pages/haha/haha.wxml中下如下程式碼
<import src='/pages/logs/logs.wxml' />
<template is='test1' />
<template name='test'>
<text>pages/haha/haha.wxml</text>
</template>
引用logs的模板,並且定義了一個模板
完了之後我們在/pages/index/index.wxml中呼叫
<import src="../haha/haha.wxml" />
<template is='test' />
證明了import的作用域它只會 import 目標檔案中定義的 template,而不會 import 目標檔案 import 的 template。