一区二区日本_久久久久久久国产精品_无码国模国产在线观看_久久99深爱久久99精品_亚洲一区二区三区四区五区午夜_日本在线观看一区二区

前端wxml取后臺(tái)js變量值_微信小程序WXML頁(yè)面常用語(yǔ)法（講解+示例）

99eaa04c77b7b9984a86dacd29b87f77.png
停更了有一段時(shí)間了&＃xff0c;首先得和大家說(shuō)一聲抱歉&＃xff0c;前段時(shí)間家里的事情有一點(diǎn)多&＃xff0c;常出門幫家里做點(diǎn)事情&＃xff0c;有一些空閑的時(shí)間&＃xff0c;也在寫代碼&＃xff0c;人也不能總處于一直學(xué)習(xí)新事物的路上&＃xff0c;每收獲一些內(nèi)容&＃xff0c;停下來(lái)鞏固鞏固&＃xff0c;實(shí)際操練一下在我看來(lái)還是非常重要的&＃xff0c;如何平衡 學(xué)習(xí)&＃43;輸入文章 以及 寫一些小 Demo以及項(xiàng)目確實(shí)是一個(gè)難點(diǎn)&＃xff0c;寫一篇文章&＃xff0c;比我寫代碼要費(fèi)事多了&＃xff0c;首先得讓別人能看懂&＃xff0c;有時(shí)候就需要大量的文字或者配圖、代碼來(lái)配合演示&＃xff0c;包括后期的上傳發(fā)&＃xff0c;針對(duì)不同社區(qū)圖片地址、文章格式的處理&＃xff0c;我認(rèn)為都是很繁瑣的工作&＃xff0c;在寫代碼的日子中&＃xff0c;這些瑣碎的工作會(huì)打斷我的思路&＃xff0c;所以這次擱了有一段時(shí)間了。愛(ài)掏網(wǎng) - it200.com
其實(shí)關(guān)于小程序最基本的一些文章&＃xff0c;早就寫好了&＃xff0c;但是看來(lái)看去&＃xff0c;總感覺(jué)差強(qiáng)人意&＃xff0c;只能后面一邊修改&＃xff0c;一遍考慮再發(fā)出來(lái)&＃xff0c;其實(shí)很多內(nèi)容爬著官方的文檔&＃xff0c;都是可以找到答案的&＃xff0c;只不過(guò)可能會(huì)比較隱蔽、晦澀。愛(ài)掏網(wǎng) - it200.com雖然&＃xff0c;現(xiàn)在寫的一些東西&＃xff0c;已經(jīng)能配合自己寫的后臺(tái)實(shí)現(xiàn)我的一些需求了&＃xff0c;?但是畢竟我只是一個(gè)后端狗&＃xff0c;前臺(tái)也只是用一些原生的代碼寫的&＃xff0c;優(yōu)化等也都不是很專業(yè)&＃xff0c;總感覺(jué)寫的沒(méi)什么底氣。愛(ài)掏網(wǎng) - it200.com
沒(méi)更新的日子&＃xff0c;還是看到有很多小伙伴在后臺(tái)私聊&＃xff0c;或者每天有一些小小的關(guān)注&＃xff0c;還是非常高興&＃xff0c;我還是盡可能給大家更新一些文章&＃xff0c;和大家分享一些我對(duì)小程序也好&＃xff0c;Java 系列相關(guān)的或者別的技術(shù)的一些學(xué)習(xí)記錄&＃xff0c;以及我的理解和思路&＃xff0c;和大家一起交流~
9月份我的時(shí)間就相對(duì)穩(wěn)定了&＃xff0c;如果最近更新有所延遲&＃xff0c;希望大家見(jiàn)諒&＃xff0c;最后仍然非常感謝大家的支持&＃xff01;&＃xff01;&＃xff01;
(一) WXML 是什么

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

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

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

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

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

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

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>

看一下效果

e9262acabae5970ac707a9d8db6412d6.png
(二) 數(shù)據(jù)綁定

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

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

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

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

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

A&＃xff1a;字符串

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

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

{{msg}}view>

B&＃xff1a;數(shù)值

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

{{status}}view>

C&＃xff1a;布爾類型

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

{{isLogin}}view>

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


????checkbox>
view>

D&＃xff1a;對(duì)象

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

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

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

9e0dcebd7bd5cc76c0c18e99263b17f0.png

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

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

view>

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

f32b60363cad6f55dd11befdef6a9e48.png
(三) 運(yùn)算

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

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é)果是一個(gè)拼接的效果

{{&＃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>

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

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

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

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

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

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

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

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

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

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

27da70bb965de1769d5a6dcb31c5d77d.png
(四) 列表循環(huán)(列表渲染)

依舊我們給一些模擬數(shù)據(jù)&＃xff0c;一個(gè)是 person 這樣的對(duì)象內(nèi)部有一些屬性&＃xff0c;還有一個(gè)就是 studentList 學(xué)生集合&＃xff0c;其中有三個(gè)學(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:"女"
??????}
????]
??},
})

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

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

先舉個(gè)例子


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

我們分別來(lái)解釋一下&＃xff1a;

  • wx:for&＃xff1a;數(shù)組或者對(duì)象

  • wx:for-item&＃xff1a;循環(huán)項(xiàng)(數(shù)組或集合)的變量名稱&＃xff0c;同時(shí)一般默認(rèn)為 item

  • wx:for-index&＃xff1a;循環(huán)項(xiàng)(數(shù)組或集合)的索引(下標(biāo))&＃xff0c;同時(shí)一般默認(rèn)為 index

  • wx:key&＃xff1a;綁定一個(gè)唯一的值&＃xff0c;可以提高列表渲染的性能&＃xff0c;可以簡(jiǎn)單理解為主鍵的概念&＃xff0c;例如這里我傳入了 studentList 中不可能重復(fù)的值 sid

  • 如果你的數(shù)組只是一個(gè)普通的數(shù)組&＃xff0c;例如 [11,22,65,23,3,6] 沒(méi)有所謂唯一的值&＃xff0c;就可以使用 wx:key&＃61;"this"&＃96; 即表示你的數(shù)組是一個(gè)普通的數(shù)組&＃xff0c;&＃96;this 表示的是 item 本身

如果傳這個(gè) key 值&＃xff0c;會(huì)有一個(gè)警告彈出

9cbd7e336ce8d2ead57742b8b1c2879e.png

  • 如果你的循環(huán)只有一層&＃xff0c;那么 wx:for-item&＃61;"item" ?wx:for-index&＃61;"index" ?這兩個(gè)內(nèi)容實(shí)際上是可以省略的&＃xff0c;小程序會(huì)自動(dòng)把這兩個(gè)內(nèi)容設(shè)置為 item 和 index

  • 如果你的循環(huán)是一個(gè)嵌套的效果&＃xff0c;那么切記一定 item 和 index 的值一定不要重復(fù)…

嵌套的正確寫法


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

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


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

看一下執(zhí)行效果

7ceec241b30daf0eaa7b923f4fbb687d.png

如果我們使用兩種不同的組件(標(biāo)簽)看看最終渲染出來(lái)的結(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

通過(guò)控制臺(tái)中 Wxml 界面&＃xff0c;可以看到&＃xff0c;只有在 view 組件下遍歷內(nèi)容時(shí)才真正的生成了 dom 結(jié)構(gòu)&＃xff0c;而直接使用 block 則只是將內(nèi)容重復(fù)寫了幾次&＃xff0c;不會(huì)變成真正的dom元素

(五) 邏輯判斷(條件渲染)

這塊理解沒(méi)什么難點(diǎn)&＃xff0c;無(wú)非就是關(guān)于邏輯的幾種判斷&＃xff0c;看一個(gè)例子就清楚了

說(shuō)明&＃xff1a;isLogin 是在 js 中模擬的一個(gè)數(shù)據(jù)&＃xff0c;分別賦予 true false 或者其他的 例如 null&＃xff0c;會(huì)根據(jù)邏輯值顯示不同的內(nèi)容

已經(jīng)登錄&＃xff0c;邏輯為?trueview>
未登錄&＃xff0c;邏輯為?falseview>
不確定邏輯view>

補(bǔ)充用法(hidden)&＃xff1a;

通過(guò)上面的 if else 等可以控制組件例如 view 的顯示&＃xff0c;而有一個(gè)屬性 hidden 同樣可以實(shí)現(xiàn)根據(jù)邏輯值控制組件的顯示

例如給 hidden 傳入一個(gè) false 就會(huì)顯示出來(lái)

不隱藏view>

那么既然一定程度上都可以達(dá)到這種效果&＃xff0c;我們選擇那個(gè)呢&＃xff1f;

先來(lái)看一下

----?分界線?-----view>
if?隱藏view>
隱藏view>

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

  • wx:if 是直接把標(biāo)簽從頁(yè)面結(jié)構(gòu)中移除掉了

  • hidden 是通過(guò)添加樣式的方式的隱藏&＃xff0c;標(biāo)簽結(jié)構(gòu)還在

所以&＃xff0c;當(dāng)標(biāo)簽不總是切換顯示的時(shí)候&＃xff0c;可以考慮先用 ?wx:if &＃xff0c;標(biāo)簽切換頻繁的時(shí)候用 hidden

1be1534606f0d7965413cbbbdb87c206.png
(六) ?模板

模板的字面意思就是&＃xff0c;一個(gè)可以應(yīng)用在多處&＃xff0c;通用的一個(gè)版塊&＃xff0c;如何去用呢&＃xff1f;

使用 name 屬性&＃xff0c;作為模板的名字。愛(ài)掏網(wǎng) - it200.com然后在 內(nèi)定義代碼片段

我們需要在想引用模板的頁(yè)面中引入模板&＃xff0c;WXML 提供兩種文件引用方式 import 和 include

如果沒(méi)有效果&＃xff0c;可以看一下是不是路徑寫錯(cuò)了&＃xff0c;要根據(jù)自己定義的來(lái)寫哦




這兩者的區(qū)別就是 import 有作用域的問(wèn)題&＃xff0c;官網(wǎng)這里寫的挺清楚&＃xff0c;我直接貼一下&＃xff1a;

import 有作用域的概念&＃xff0c;即只會(huì) import 目標(biāo)文件中定義的 template&＃xff0c;而不會(huì) import 目標(biāo)文件 import 的 template。愛(ài)掏網(wǎng) - it200.com

如&＃xff1a;C import B&＃xff0c;B import A&＃xff0c;在C中可以使用B定義的template&＃xff0c;在B中可以使用A定義的template&＃xff0c;但是C不能使用A定義的template。愛(ài)掏網(wǎng) - it200.com

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

賦值方式還有一種常用的

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

例如

Page({
??data:?{
????student:?{
??????id:?0,
??????name:?&＃39;張三&＃39;,
????}
??}
})

結(jié)尾

郵箱&＃xff1a;ideal_bwh&＃64;163.com

如果能幫到你的話&＃xff0c;那就來(lái)關(guān)注我吧&＃xff01;

如果您更喜歡微信文章的閱讀方式&＃xff0c;可以關(guān)注我的公眾號(hào)

如果您更加喜歡PC端的閱讀方式&＃xff0c;可以訪問(wèn)我的個(gè)人博客

域名&＃xff1a;www.ideal-20.cn

在這里的我們素不相識(shí)&＃xff0c;卻都在為了自己的夢(mèng)而努力 ?

一個(gè)堅(jiān)持推送原創(chuàng)開發(fā)技術(shù)文章的公眾號(hào)&＃xff1a;理想二旬不止

f5ade253f158f1fa4c33e370fa2d9516.png




聲明：所有內(nèi)容來(lái)自互聯(lián)網(wǎng)搜索結(jié)果,不保證100%準(zhǔn)確性,僅供參考。如若本站內(nèi)容侵犯了原著者的合法權(quán)益，可聯(lián)系我們進(jìn)行處理。
發(fā)表評(píng)論
更多 網(wǎng)友評(píng)論 （0 條評(píng)論）
暫無(wú)評(píng)論

返回頂部
主站蜘蛛池模板： 亚洲精选一区 | 国内精品在线视频 | 中文字幕在线人 | 欧州一区二区 | 国产一区二区三区在线视频 | 国产精品精品久久久 | 成人一区二区视频 | 97视频网站 | 成人在线一区二区三区 | 亚洲成人网在线播放 | 精品乱码一区二区三四区 | 一级片在线观看 | 天天干.com | 国产欧美一区二区三区在线看 | av国产精品| 自拍中文字幕 | 日韩视频二区 | 国产精品久久久久久一区二区三区 | 日韩在线电影 | 久久久久久久亚洲精品 | 免费在线观看黄视频 | 日韩av在线免费 | 91av亚洲| 中文字幕第一页在线 | 国产精品国产成人国产三级 | 欧美久久久久久 | 国产精品爱久久久久久久 | av看看| 欧美日韩视频网站 | 91精品国产乱码久久久久久久 | 可以免费观看的av片 | www.99热.com| 国产免费一区二区三区 | 欧美一区二区成人 | 日韩一区二区三区视频 | 亚洲精品日韩在线 | 亚洲成人精品一区 | 国产精品日韩一区二区 | 精品久久久久久红码专区 | 99国产精品久久久 | 人人干人人舔 |