国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡

?

微信小程序開發(fā)入門(四)

2023-04-24 11:03任亞飛
電腦報 2023年15期
關(guān)鍵詞:字符串數(shù)組模擬器

任亞飛

一、數(shù)據(jù)綁定

數(shù)據(jù)綁定:WXML(WeiXin MarkupLanguage)是框架設(shè)計的一套標(biāo)簽語言,結(jié)合基礎(chǔ)組件、事件系統(tǒng),可以構(gòu)建出頁面的結(jié)構(gòu)。

通過這個簡單的例子來看看 WXML 具有什么能力:

App.json 里面新建頁面shuju。打開Pages 里的shuju 頁面的標(biāo)簽語言--wxml,寫入view 組件,用兩個大括號包裹字符串屬性message(名稱)。

<!-- 新建頁面shuju 里面的wxml-->

{{message}}

打開標(biāo)簽語言--js, 刪除data 里面的函數(shù),保留data,寫入字符串屬性message( 名稱) 冒號, 單引號屬性值Hello MINA。編譯保存查看模擬器效果。

// 新建頁面shuju 里的.js

Page({

data: {message: 'Hello MINA!' }

})

接著我們再看數(shù)字屬性和布爾屬性。

(參考代碼1,請至壹零社公眾號下載)

里面有數(shù)字類型:num:10000, 年齡:age18, 身高h(yuǎn)eigh:168, 體重:weight98,布爾類型:isgirl:true,字符串類型:name:" 美女"。

組件checkbox——復(fù)選框(多選項目)有以下屬性項:

1.value string 默認(rèn)否 checkbox標(biāo)識, 選中時觸發(fā)checkbox-group的 change 事件, 并攜帶 checkbox 的value

2.disabled boolean 默認(rèn)false否 是否禁用

3.checked boolean 默認(rèn)false否 當(dāng)前是否選中,可用來設(shè)置默認(rèn)選中

4.color string #09BB07 默認(rèn) 否checkbox 的顏色,同css的color

參考代碼如下(用wxml 組件包裹了checkbox,文本標(biāo)題為:選中):

<!-- 新建頁面/shuju/shuju. checkbox( 復(fù)選框)wxml-->

選中

// 新建頁面shuju 里的.js

checkbox:true

保存編譯后查看模擬器效果。數(shù)據(jù)綁定參考圖1(紅色框為新建頁面shuju)。

二、運(yùn)算

運(yùn)算,可以在花括號(也就是兩個大括號)中加入一些簡單的運(yùn)算,如表達(dá)式和語句型,表達(dá)式指的是一些簡單運(yùn)算和數(shù)字運(yùn)算,如數(shù)字的加減,字符串拼接,三元表達(dá)式等運(yùn)算。語句指的是:帶有條件的邏輯運(yùn)算,如 if- else 語句;switch 語句; dowhile 語句; for 等語句。

<!-- 新建頁面/yunsuan/.wxml. 數(shù)字運(yùn)算-->

{{1+1}}

<!-- 新建頁面/yunsuan/.wxml. 字符串拼接-->

{{"1"+"1"}}

<!-- 新建頁面/yunsuan/.wxml. 三元表達(dá)式-->

{{10%2===0?' 偶數(shù)':' 奇數(shù)'}}

App.json 里面新建頁面yunsuan。打開Pages 里的shuju 頁面的標(biāo)簽語言--wxml, 寫入view 組件, 用兩個大括號包裹運(yùn)算表達(dá)式“1+1”,保存編譯后模擬器上查看輸出結(jié)果;字符串拼接,大家注意,加上雙引號的就是字符串,比如兩大括號里加的"1"+"1" 表達(dá)式就是兩個字符串拼接,大家參考上面字符串拼接代碼編寫完成后保存編譯,在模擬器上查看輸出結(jié)果,字符串拼接"1"+"1" 其實(shí)就是把兩個1 組合起來--11;三元表達(dá)式,這里用了10 除以2的余數(shù)等于0 輸出偶數(shù),不等于0 輸出奇數(shù),大家可以參考上面三元表達(dá)式的代碼寫后保存編譯,查看模擬器結(jié)果,然后把10 除以2 改成11 除以2 保存編譯后查看模擬器又會輸出什么結(jié)果。

三、數(shù)組和循環(huán)列表

在組件上使用 wx:for 控制屬性綁定一個數(shù)組,即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。

數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為index,數(shù)組當(dāng)前項的變量名默認(rèn)為item。

(參考代碼2,請至壹零社公眾號下載)

注:Wx:for=“{{ 數(shù)組或者對象的名稱}}”;wx:for-item=“ 循環(huán)項的名稱”(軟件默認(rèn)項名稱為item);wx:for-index=“ 循環(huán)項的索引”。在新建頁面yunsuan.js 里data 寫入數(shù)組list-- 中括號,大括號id:1 第一項, 名字name:“電腦報”,每項寫完后不要忘了英文狀態(tài)下的逗號,依次寫到第三項。在新建頁面/yunsuan/.wxml 里面,用一個view 組件包裹另一個組件。在另一個view 組件里寫入wx:for="{{list}}" ( 循環(huán)數(shù)組名字);wx:for-item="item"( 循環(huán)項的名稱);wx:for-index="index"( 循環(huán)項的索引),寫入組件屬性“索引”:花括號index(索引的項),“值”:花括號item.name(索引每項name 的東西)(圖2)。

wx:key="id":如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中,并且希望列表中的項目保持自己的特征和狀態(tài)(如 input 中的輸入內(nèi)容,switch 的選中狀態(tài)),需要使用wx:key 來指定列表中項目的唯一的標(biāo)識符。

wx:key 的值以兩種形式提供

字符串, 代表在 for 循環(huán)的array 中 item的某個 property, 該property的值需要是列表中唯一的字符串或數(shù)字,且不能動態(tài)改變。

保留關(guān)鍵字 *this 代表在 for 循環(huán)中的 item 本身,這種表示需要 item本身是一個唯一的字符串或者數(shù)字。

當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候,會校正帶有 key的組件,框架會確保它們被重新排序,而不是重新創(chuàng)建,以確保使組件保持自身的狀態(tài),并且提高列表渲染時的效率。

如不提供 wx:key, 會報一個warning, 如果明確知道該列表是靜態(tài),或者不必關(guān)注其順序,可以選擇忽略。

(參考代碼3,請至壹零社公眾號下載)

以上代碼涉及數(shù)組、函數(shù)、嵌套循環(huán),讀者們可以試著去操作寫代碼,發(fā)現(xiàn)數(shù)組和函數(shù)與wxml 里的屬性綁定,使用數(shù)組與函數(shù)中各項的數(shù)據(jù)重復(fù)渲染該組件。要知道數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為 index,數(shù)組當(dāng)前項的變量名默認(rèn)為item。到這里小程序開發(fā)四就結(jié)束了,希望讀者們多多練習(xí)多多寫,這樣有助于對代碼的理解和對結(jié)構(gòu)的熟悉,尤其語法是多聯(lián)系記憶加深更強(qiáng)。

猜你喜歡
字符串數(shù)組模擬器
JAVA稀疏矩陣算法
了不起的安檢模擬器
盲盒模擬器
劃船模擬器
基于文本挖掘的語詞典研究
JAVA玩轉(zhuǎn)數(shù)學(xué)之二維數(shù)組排序
Excel數(shù)組公式在林業(yè)多條件求和中的應(yīng)用
尋找勾股數(shù)組的歷程
動態(tài)飛行模擬器及其發(fā)展概述
一種新的基于對稱性的字符串相似性處理算法
将乐县| 雷州市| 阿克苏市| 徐汇区| 嘉定区| 玉溪市| 肥西县| 隆尧县| 偃师市| 玉树县| 泗阳县| 长葛市| 鲁甸县| 乌兰察布市| 买车| 连南| 巨鹿县| 元氏县| 彭水| 翁牛特旗| 芦溪县| 建平县| 神木县| 纳雍县| 马关县| 凤冈县| 兴宁市| 肇源县| 博白县| 安庆市| 齐齐哈尔市| 东至县| 彝良县| 句容市| 临沧市| 郯城县| 玉溪市| 融水| 石柱| 册亨县| 遵义县|