国产精品久久精品视,草草影院最新网址,久久久网站亚洲第一

停更了有一段時間了&＃xff0c;首先得和大家說一聲抱歉&＃xff0c;前段時間家里的事情有一點(diǎn)多&＃xff0c;常出門幫家里做點(diǎn)事情&＃xff0c;有一些空閑的時間&＃xff0c;也在寫代碼&＃xff0c;人也不能總處于一直學(xué)習(xí)新事物的路上&＃xff0c;每收獲一些內(nèi)容&＃xff0c;停下來鞏固鞏固&＃xff0c;實際操練一下在我看來還是非常重要的&＃xff0c;如何平衡學(xué)習(xí)&＃43;輸入文章以及寫一些小 Demo以及項目確實是一個難點(diǎn)&＃xff0c;寫一篇文章&＃xff0c;比我寫代碼要費(fèi)事多了&＃xff0c;首先得讓別人能看懂&＃xff0c;有時候就需要大量的文字或者配圖、代碼來配合演示&＃xff0c;包括后期的上傳發(fā)&＃xff0c;針對不同社區(qū)圖片地址、文章格式的處理&＃xff0c;我認(rèn)為都是很繁瑣的工作&＃xff0c;在寫代碼的日子中&＃xff0c;這些瑣碎的工作會打斷我的思路&＃xff0c;所以這次擱了有一段時間了。愛掏網(wǎng) - it200.com

其實關(guān)于小程序最基本的一些文章&＃xff0c;早就寫好了&＃xff0c;但是看來看去&＃xff0c;總感覺差強(qiáng)人意&＃xff0c;只能后面一邊修改&＃xff0c;一遍考慮再發(fā)出來&＃xff0c;其實很多內(nèi)容爬著官方的文檔&＃xff0c;都是可以找到答案的&＃xff0c;只不過可能會比較隱蔽、晦澀。愛掏網(wǎng) - it200.com雖然&＃xff0c;現(xiàn)在寫的一些東西&＃xff0c;已經(jīng)能配合自己寫的后臺實現(xiàn)我的一些需求了&＃xff0c;?但是畢竟我只是一個后端狗&＃xff0c;前臺也只是用一些原生的代碼寫的&＃xff0c;優(yōu)化等也都不是很專業(yè)&＃xff0c;總感覺寫的沒什么底氣。愛掏網(wǎng) - it200.com

沒更新的日子&＃xff0c;還是看到有很多小伙伴在后臺私聊&＃xff0c;或者每天有一些小小的關(guān)注&＃xff0c;還是非常高興&＃xff0c;我還是盡可能給大家更新一些文章&＃xff0c;和大家分享一些我對小程序也好&＃xff0c;Java 系列相關(guān)的或者別的技術(shù)的一些學(xué)習(xí)記錄&＃xff0c;以及我的理解和思路&＃xff0c;和大家一起交流~

9月份我的時間就相對穩(wěn)定了&＃xff0c;如果最近更新有所延遲&＃xff0c;希望大家見諒&＃xff0c;最后仍然非常感謝大家的支持&＃xff01;&＃xff01;&＃xff01;(一) WXML 是什么

官方說明&＃xff1a;WXML(WeiXin Markup Language)是框架設(shè)計的一套標(biāo)簽語言&＃xff0c;結(jié)合基礎(chǔ)組件、事件系統(tǒng)&＃xff0c;可以構(gòu)建出頁面的結(jié)構(gòu)

在前面我們就已經(jīng)提過&＃xff0c;WXML&＃xff0c;就可以理解為我們傳統(tǒng)頁面中的HTML&＃xff0c;它是微信為我們提供的一套標(biāo)簽語言&＃xff0c;可以說它就是我們小程序的臉面(雖然沒經(jīng)過CSS裝飾前不一定光鮮亮麗)&＃xff0c;開發(fā)中 WXML 頁面就作為我們一些邏輯行為的入口&＃xff0c;以及效果展示的承載者。愛掏網(wǎng) - it200.com

再大白話一點(diǎn)&＃xff1a;你所看到的小程序頁面長什么樣(不涉及背后做了什么行為&＃xff0c;只說表面)&＃xff0c;就是 WXML(主要) &＃43; WXSS (美化) 實現(xiàn)的

這一篇&＃xff0c;我們主要涉及到的是 WXML 中例如數(shù)據(jù)綁定、或者運(yùn)算等等&＃xff0c;但是學(xué)習(xí)之前&＃xff0c;很顯然&＃xff0c;我們需要認(rèn)識幾個常見的標(biāo)簽&＃xff0c;后面我們會總結(jié)一些常用的標(biāo)簽&＃xff0c;下面會用到的有&＃xff1a;

、 > 還有一些標(biāo)簽&＃xff0c;大家去看官網(wǎng)文檔就可以了&＃xff0c;寫的非常清楚&＃xff0c;我們這里重點(diǎn)還是說一下關(guān)于其中的一些標(biāo)簽語法問題

官網(wǎng)——WXML語法文檔

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

官網(wǎng)——組件文檔

https://developers.weixin.qq.com/miniprogram/dev/component/

這是text標(biāo)簽1text> 這是text標(biāo)簽2text> 這是div標(biāo)簽1view> 這是div標(biāo)簽2view> ?? ??image> view>

看一下效果

(二) 數(shù)據(jù)綁定

雖然還不涉及到什么頁面的美化&＃xff0c;以及復(fù)雜的標(biāo)簽&＃xff0c;不過一個極為簡單的靜態(tài)頁面現(xiàn)在已經(jīng)可以構(gòu)造出來了&＃xff0c;歸根結(jié)底&＃xff0c;我們最后都是要進(jìn)行前后臺數(shù)據(jù)的交互的&＃xff0c;而微信小程序就為我們提供了很多很好用的用法&＃xff0c;能很快的進(jìn)行數(shù)據(jù)的綁定操作

有一個前提條件&＃xff0c;我們先模擬一些數(shù)據(jù)&＃xff0c;我們只需要在頁面的 js 文件中的 data對象中定義小程序初始化的數(shù)據(jù)&＃xff0c;例如下面代碼&＃xff0c;我們隨便拿一些常見的數(shù)據(jù)類型來模擬一下

Page({ ??/** ???*?頁面的初始數(shù)據(jù) ???*/ ??data:?{ ????msg:?"你好&＃xff0c;微信小程序", ????status:?100, ????isLogin:?true, ????person:{ ??????name:?"張三", ??????age:?22, ??????profession:?"student" ????}, ????isChecked:?true ??}, })

如何在 WXML 標(biāo)簽組件中進(jìn)行數(shù)據(jù)的綁定其實是非常簡單的&＃xff0c;微信小程序中通過 {{}} 來解析剛才在 JS 中模擬的變量

要注意&＃xff1a;直接通過 {{}} 解析的變量都是頁面 js 文件中 Page --> data 下的

A&＃xff1a;字符串

字符串內(nèi)容直接用兩個大括號括住接收就可以了&＃xff0c;在上面我們有這樣的定義&＃xff1a;

msg: "你好&＃xff0c;微信小程序", 所以直接括住 msg 就可以獲取到后面的值了

{{msg}}view>

B&＃xff1a;數(shù)值

數(shù)值也是一樣直接可以獲取

{{status}}view>

C&＃xff1a;布爾類型

布爾類型第一個代碼是直接打印出其布爾類型 true 或者 false

{{isLogin}}view>

而下面配合 checkbox 就可以實現(xiàn)是否選中的效果

????checkbox> view>

D&＃xff1a;對象

對象這塊如果你直接打印 person 就會輸出一個 Object 類型&＃xff0c;所以如果想要拿到對象的屬性值&＃xff0c;一定要指定到具體的屬性

{{person.name}}view> {{person.age}}view> {{person.profession}}view>

看一下上述所有的綁定效果

例如我們 view 組件的 id 值前綴是固定的 user- 后面就是用戶的序號&＃xff0c;這時候就可以通過變量來進(jìn)行巧妙的解析到屬性中了

注&＃xff1a;不要輕易的亂加空格&＃xff0c;否則可能會讀取失敗例如&＃xff1a;

view>

看一下 Wxml 的源碼 id 這個屬性中已經(jīng)進(jìn)行了拼接&＃xff0c;這種方式同樣還會常用在 class 或者 style 中&＃xff0c;配合三元運(yùn)行能不錯的實現(xiàn)一些需求&＃xff0c;下面我們會提到

(三) 運(yùn)算

首先我們依舊定義一些數(shù)據(jù)&＃xff0c;三個整數(shù)&＃xff0c;和兩個字符串

Page({ ??data:?{ ????a:?11, ????b:?22, ????c:?33, ????msg:?"姓名", ????name:?"張三" ??}, })

直接在 {{}} 中進(jìn)行加減乘除等的運(yùn)算&＃xff0c;直接就可以得到結(jié)算的結(jié)果&＃xff0c;例如&＃xff1a;

{{a?&＃43;?b?&＃43;?c}}view> {{a?&＃43;?b}}?&＃43;?{{c}}view>

如果是字符串類型的數(shù)據(jù)&＃xff0c;利用 &＃43; 進(jìn)行運(yùn)算&＃xff0c;結(jié)果是一個拼接的效果

{{&＃39;a&＃39;?&＃43;?&＃39;b&＃39;?&＃43;?&＃39;c&＃39;}}view> {{&＃39;11&＃39;?&＃43;?&＃39;22&＃39;?&＃43;?&＃39;33&＃39;}}view> {{msg &＃43;?&＃39;&＃xff1a;&＃39;?&＃43;name}}view>

這個就是常見的 if 判斷&＃xff0c;例如使用 wx:if 這個屬性&＃xff0c;那么就只有在后面的表達(dá)式為 true 的情況下才會顯示文本 a 大于 0

?0}}">a?大于?0view>

三元運(yùn)算的應(yīng)用場景還是很多的(等式 ? : true情況&＃xff0c;false的情況)

{{11?&＃43;?22?&＃61;&＃61;&＃61;?33???true?:?false}}view> {{11?&＃43;?22?&＃61;&＃61;&＃61;?33???&＃39;正確&＃39;?:?&＃39;錯誤&＃39;}}view> {{a?&＃43;?b?&＃61;&＃61;&＃61;?c???&＃39;等式成立&＃39;?:?&＃39;等式不成立&＃39;}}view>

三元補(bǔ)充&＃xff1a;

通過在屬性中解析變量的方式&＃xff0c;可以達(dá)到根據(jù)變量的值&＃xff0c;來指定不同的 class名&＃xff0c;以顯示不同的樣式

例如我們的 css 樣式是這樣的&＃xff0c;iconfont 是我們共用的&＃xff0c;所以直接寫在屬性中就可以了&＃xff0c;而究竟是用 ?icon-back 還是 icon-remove 就可以通過一個變量來操縱&＃xff0c;例如我們下面的 isClick 就是在 js 里 data 中定義的一個布爾類型的變量

.iconfont?{......} .icon-back:before?{......} .icon-remove:before?{......}

當(dāng) isClick 為 true 就執(zhí)行 class 就是這樣的為 false 就是用另一個&＃xff0c;我們就可以通過控制變量值來進(jìn)行不同的顯示

看一下上述所有運(yùn)算的執(zhí)行結(jié)果(不含補(bǔ)充的結(jié)果)


(四) 列表循環(huán)(列表渲染)
依舊我們給一些模擬數(shù)據(jù)&＃xff0c;一個是 person 這樣的對象內(nèi)部有一些屬性&＃xff0c;還有一個就是 studentList 學(xué)生集合&＃xff0c;其中有三個學(xué)生的數(shù)據(jù)
Page({
??data:?{
????person:{
??????pid:?1,
??????name:?"張三",
??????age:?22,
??????profession:?"student"
????},
????studentList:[{
????????sid:1,
????????name:"湯姆",
????????gender:"男"
??????},{
????????sid:2,
????????name:"杰克",
????????gender:"男"
??????},{
????????sid:3,
????????name:"瑪麗",
????????gender:"女"
??????}
????]
??},
})

如果我們接受到了后臺的一些集合或者數(shù)組等內(nèi)容&＃xff0c;循環(huán)遍歷是一個非常常用的操作

組件(標(biāo)簽)上使用 wx:for 就可以綁定一個數(shù)組或集合內(nèi)容&＃xff0c;就可用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件
先舉個例子

????
????????{{index}}?---?{{item.name}}?
????view>
view>

我們分別來解釋一下&＃xff1a;

wx:for&＃xff1a;數(shù)組或者對象
wx:for-item&＃xff1a;循環(huán)項(數(shù)組或集合)的變量名稱&＃xff0c;同時一般默認(rèn)為 item
wx:for-index&＃xff1a;循環(huán)項(數(shù)組或集合)的索引(下標(biāo))&＃xff0c;同時一般默認(rèn)為 index
wx:key&＃xff1a;綁定一個唯一的值&＃xff0c;可以提高列表渲染的性能&＃xff0c;可以簡單理解為主鍵的概念&＃xff0c;例如這里我傳入了 studentList 中不可能重復(fù)的值 sid
如果你的數(shù)組只是一個普通的數(shù)組&＃xff0c;例如 [11,22,65,23,3,6] 沒有所謂唯一的值&＃xff0c;就可以使用 wx:key&＃61;"this"&＃96; 即表示你的數(shù)組是一個普通的數(shù)組&＃xff0c;&＃96;this 表示的是 item 本身

如果傳這個 key 值&＃xff0c;會有一個警告彈出


如果你的循環(huán)只有一層&＃xff0c;那么 wx:for-item&＃61;"item" ?wx:for-index&＃61;"index" ?這兩個內(nèi)容實際上是可以省略的&＃xff0c;小程序會自動把這兩個內(nèi)容設(shè)置為 item 和 index
如果你的循環(huán)是一個嵌套的效果&＃xff0c;那么切記一定 item 和 index 的值一定不要重復(fù)…

嵌套的正確寫法

??
????
??????{{i}}?*?{{j}}?&＃61;?{{i?*?j}}
????view>
??view>
view>

再舉一個例子(遍歷對象的所有屬性)&＃xff1a;

????
????{{key}}?---?{{value}}?
????view>
view>

看一下執(zhí)行效果

如果我們使用兩種不同的組件(標(biāo)簽)看看最終渲染出來的結(jié)果有什么區(qū)別呢&＃xff1f;
方法一(view 標(biāo)簽)

????{{key}}?---?{{value}}?
view>

結(jié)果一
?pid?---?1?view>
?name?---?張三?view>
?age?---?22?view>
?profession?---?student?view>

方法二(block 標(biāo)簽)

????{{key}}?---?{{value}}?
block>

結(jié)果二
pid?---?1?name?---?張三?age?---?22?profession?---?studen

通過控制臺中 Wxml 界面&＃xff0c;可以看到&＃xff0c;只有在 view 組件下遍歷內(nèi)容時才真正的生成了 dom 結(jié)構(gòu)&＃xff0c;而直接使用 block 則只是將內(nèi)容重復(fù)寫了幾次&＃xff0c;不會變成真正的dom元素
(五) 邏輯判斷(條件渲染)
這塊理解沒什么難點(diǎn)&＃xff0c;無非就是關(guān)于邏輯的幾種判斷&＃xff0c;看一個例子就清楚了
說明&＃xff1a;isLogin 是在 js 中模擬的一個數(shù)據(jù)&＃xff0c;分別賦予 true false 或者其他的 例如 null&＃xff0c;會根據(jù)邏輯值顯示不同的內(nèi)容
已經(jīng)登錄&＃xff0c;邏輯為?trueview>
未登錄&＃xff0c;邏輯為?falseview>
不確定邏輯view>


補(bǔ)充用法(hidden)&＃xff1a;
通過上面的 if else 等可以控制組件例如 view 的顯示&＃xff0c;而有一個屬性 hidden 同樣可以實現(xiàn)根據(jù)邏輯值控制組件的顯示
例如給 hidden 傳入一個 false 就會顯示出來
不隱藏view>


那么既然一定程度上都可以達(dá)到這種效果&＃xff0c;我們選擇那個呢&＃xff1f;
先來看一下
----?分界線?-----view>
if?隱藏view>
隱藏view>

看一下渲染出來的結(jié)構(gòu)&＃xff0c;關(guān)于 wx:if 的那塊直接就沒有渲染出來了&＃xff0c;只有 hidden 的那個&＃xff0c;由此可以得出&＃xff1a;

wx:if 是直接把標(biāo)簽從頁面結(jié)構(gòu)中移除掉了
hidden 是通過添加樣式的方式的隱藏&＃xff0c;標(biāo)簽結(jié)構(gòu)還在

所以&＃xff0c;當(dāng)標(biāo)簽不總是切換顯示的時候&＃xff0c;可以考慮先用 ?wx:if &＃xff0c;標(biāo)簽切換頻繁的時候用 hidden
(六) ?模板
模板的字面意思就是&＃xff0c;一個可以應(yīng)用在多處&＃xff0c;通用的一個版塊&＃xff0c;如何去用呢&＃xff1f;
使用 name 屬性&＃xff0c;作為模板的名字。愛掏網(wǎng) - it200.com然后在  內(nèi)定義代碼片段


我們需要在想引用模板的頁面中引入模板&＃xff0c;WXML 提供兩種文件引用方式 import 和 include 
如果沒有效果&＃xff0c;可以看一下是不是路徑寫錯了&＃xff0c;要根據(jù)自己定義的來寫哦




這兩者的區(qū)別就是 import 有作用域的問題&＃xff0c;官網(wǎng)這里寫的挺清楚&＃xff0c;我直接貼一下&＃xff1a;
import 有作用域的概念&＃xff0c;即只會 import 目標(biāo)文件中定義的 template&＃xff0c;而不會 import 目標(biāo)文件 import 的 template。愛掏網(wǎng) - it200.com
如&＃xff1a;C import B&＃xff0c;B import A&＃xff0c;在C中可以使用B定義的template&＃xff0c;在B中可以使用A定義的template&＃xff0c;但是C不能使用A定義的template。愛掏網(wǎng) - it200.com

使用 is 屬性&＃xff0c;聲明需要的使用的模板&＃xff0c;也就是與上面的 name 一致就可以了&＃xff0c;然后將模板所需要的 data 傳入&＃xff0c;如(直接傳入)&＃xff1a;

賦值方式還有一種常用的
它的意思就是將調(diào)用這個模板頁面中的 student 對象變量賦值給這個模板&＃xff0c;三個點(diǎn)就是一個擴(kuò)展運(yùn)算符&＃xff0c;作用就是將這個student 對象展開

例如
Page({
??data:?{
????student:?{
??????id:?0,
??????name:?&＃39;張三&＃39;,
????}
??}
})
結(jié)尾郵箱&＃xff1a;ideal_bwh&＃64;163.com
如果能幫到你的話&＃xff0c;那就來關(guān)注我吧&＃xff01;
如果您更喜歡微信文章的閱讀方式&＃xff0c;可以關(guān)注我的公眾號
如果您更加喜歡PC端的閱讀方式&＃xff0c;可以訪問我的個人博客
域名&＃xff1a;www.ideal-20.cn

在這里的我們素不相識&＃xff0c;卻都在為了自己的夢而努力 ?
一個堅持推送原創(chuàng)開發(fā)技術(shù)文章的公眾號&＃xff1a;理想二旬不止

聲明：所有內(nèi)容來自互聯(lián)網(wǎng)搜索結(jié)果,不保證100%準(zhǔn)確性,僅供參考。如若本站內(nèi)容侵犯了原著者的合法權(quán)益，可聯(lián)系我們進(jìn)行處理。