小程式開發學習記錄(四)

2022-07-28 01:03:08 字數 2628 閱讀 7344

這節,我們來講一下小程式的開發語言--wxml。

用過vue等開發框架或者使用過雙花括號的同學對於本節的內容應該會比較熟悉。

wxml跟vue語法十分的相似,有類似於vue的資料繫結,v-for、v-if、模板(template)的結構。

1.資料繫結:

wxml:

<

view

>}

view

>

page.js:

page(

})

this

.setdata()

2.列表渲染:

wxml:

<

view

wx:for

="}"

>}

view

>

page.js:

page(

})

在元件上使用wx:for控制屬性繫結乙個陣列,即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為index,陣列當前項的變數名預設為item。當然也可以使用wx:for-item可以指定陣列當前元素的變數名,使用wx:for-index可以指定陣列當前下標的變數名。

<

view

wx:for

="}"

wx:for-index

="idx"

wx:for-item

="itemname"

>

}: }

view

>

!!!注意:當wx:for的值為字串時,會將字串解析成字串陣列

<

view

wx:for

="array"

>

}view

>

得到的結果就是:array

3.條件渲染:

wxml:

<

view

wx:if

="}"

>關注xinsira

view

>

<

view

wx:elif

view

>

<

view

wx:else

="}"

>mina

view

>

page.js:

page(

})

注意:關鍵字也需要在雙花括號內,例如true/false,不要直接寫 wx:if="false",其計算結果是乙個字串,轉成 boolean 型別後代表真值。

官方給出的解釋:

因為wx:if之中的模板也可能包含資料繫結,所以當wx:if的條件值切換時,框架有乙個區域性渲染的過程,因為它會確保條件塊在切換時銷毀或重新渲染。

同時wx:if也是惰性的,如果在初始渲染條件為false,框架什麼也不做,在條件第一次變成真的時候才開始區域性渲染。

相比之下,hidden就簡單的多,元件始終會被渲染,只是簡單的控制顯示與隱藏。

一般來說,wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。因此,如果需要頻繁切換的情景下,用hidden更好,如果在執行時條件不大可能改變則wx:if較好。

我給的解釋就是,hidden就像v-show一樣。

4.模板:

wxml提供模板(template),可以在模板中定義**片段,然後在不同的地方呼叫。

使用 name 屬性,作為模板的名字。然後在內定義**片段

<

template

name

="msgitem"

>

<

view

>

<

text

>}: }

text

>

<

text

>time: }

text

>

view

>

template

>

使用 is 屬性,宣告需要的使用的模板,然後將模板所需要的 data 傳入,如:

wxml:

<

template

is="msgitem"

data

="}"

/>

page.js:

page(

}})

小程式開發學習記錄(二)

上一節,我已經給大家介紹了小程式的概念以及安裝小程式編譯器。這節,我們就來講講小程式的基本結構 主要是從官方文件總結下來 tabbar networktimeout debug true 更多的具體配置項可以到官方文件去了解 全域性配置 2.pages 用於指定小程式由哪些頁面組成,每一項都對應乙個...

小程式開發記錄 02

1.使用者輸入內容 插入資料庫 再通過記錄id 查詢資料顯示給使用者 2.新建main 資料夾 在根目錄json 配置為首頁 4.呼叫雲函式login 獲取openid的 存在模板中 index.js ongetopenid 5.傳送資料 先從data中獲取對應資料值 頁面和data一一對應 在元素...

志願匹配演算法開發記錄(四) 小優化

由於跟學校的匹配結果相比,我的演算法得到的分配結果還有比較大的差距,所以進行了一些小小的優化,但是效果並不是很明顯。public static int allocatetherest int studata,int projectdata if allocated false return stud...