這是微信小程序近期引入的一個(gè)概念,我們可以在開(kāi)發(fā)者工具中直接以獨(dú)立文件的形式建立它們。
當(dāng)然你也可以使用wxs標(biāo)簽直接在wxml文件中使用。
兩種訪問(wèn)均可以。
使用場(chǎng)景:比如我們可以在視圖里直接納入簡(jiǎn)單的邏輯代碼或是對(duì)page傳遞過(guò)來(lái)的變量進(jìn)行處理(例如篩選和格式化等等)着裹,讓你編碼更簡(jiǎn)單。
因此wxs有自己的變量和語(yǔ)法米同,接下來(lái)開(kāi)始流水賬骇扇。
變量
官方文檔地址為
https://mp.weixin.qq.com/debu...
變量提升問(wèn)題
微信官方說(shuō):“var表現(xiàn)與javascript一致,會(huì)有變量提升面粮。”
舉個(gè)例子
比如我們?cè)赑age里定義了一個(gè)m.msg變量少孝,如下圖
而你在wxml的wxs內(nèi)也定義了一個(gè)m.msg,如下圖
則我們?cè)谝晥D內(nèi)使用{{m.msg}}會(huì)輸出hello world 而不是abc熬苍。
對(duì)于聲明但是沒(méi)有定義的變量稍走。
還是上面的例子,比如你定于如下圖
我們用log打印下柴底,只是聲明的變量值統(tǒng)一為undefined婿脸,當(dāng)然你在視圖內(nèi)引用的時(shí)候并不會(huì)報(bào)錯(cuò),只是顯示為空而已柄驻。
保留標(biāo)識(shí)符
wxs內(nèi)部定義了一些標(biāo)識(shí)符狐树,有特殊的含義,不允許變量使用鸿脓,比如var抑钟、if涯曲、for、this在塔、case幻件、else等等,都是用來(lái)表示某種語(yǔ)法結(jié)構(gòu)的蛔溃。
詳細(xì)表看官方文檔绰沥,都已經(jīng)給出了,當(dāng)然你記不住也沒(méi)關(guān)系城榛,開(kāi)發(fā)工具會(huì)報(bào)錯(cuò)如下信息揪利。
注釋
官方文檔:https://mp.weixin.qq.com/debu...
這里有一點(diǎn)要說(shuō)下,就是wxs支持的第三種注釋方法狠持,當(dāng)我們寫一個(gè) /* 時(shí)候,代表從 /* 開(kāi)始往后的所有 wxs 代碼均被注釋瞻润,這里的所有代表wxs塊的結(jié)尾喘垂,有一點(diǎn)要注意,看圖绍撞。
注釋的范圍是當(dāng)前模塊正勒,因此m2的msg2變量依然可以在視圖上顯示出來(lái)。
運(yùn)算符
官方文檔:https://mp.weixin.qq.com/debu...
該有的都有了傻铣,比如最常用的大于小于不等于章贞、求余數(shù)、三元運(yùn)算符等等非洲,你在一個(gè)計(jì)算機(jī)語(yǔ)言中用的運(yùn)算符在wxs內(nèi)都有鸭限,具體都有哪些見(jiàn)官方文檔。
語(yǔ)句
官方文檔:https://mp.weixin.qq.com/debu...
話說(shuō)計(jì)算機(jī)語(yǔ)言無(wú)外乎真假問(wèn)題两踏、多少問(wèn)題败京!抽象過(guò)來(lái)就是判斷語(yǔ)句和循環(huán)語(yǔ)句,wxs的判斷和循環(huán)語(yǔ)句和其他語(yǔ)言都差不多梦染,相信大家自己看文檔就清楚赡麦,還是需要注意下truthy的問(wèn)題。
truthy是什么帕识?
wxs集成了js的邏輯泛粹,有truthy的概念,簡(jiǎn)單點(diǎn)說(shuō)每個(gè)變量隱藏著boolean屬性肮疗,而if是根據(jù)truthy來(lái)判斷分支而非狹義的boolean晶姊。
具體什么是truthy推薦大家看下面的這篇文章:http://blog.csdn.net/notzuono...
寫的相當(dāng)不錯(cuò)。
數(shù)據(jù)類型
官方文檔:https://mp.weixin.qq.com/debu...
我們把"hello world"叫做字符串類型族吻,909叫做整數(shù)類型帽借,wxs一共支持如下幾種數(shù)據(jù)類型珠增。
number / string / boolean / object / function / array / date / regexp
你可能會(huì)差異為何function還是一種數(shù)據(jù)類型,完全沒(méi)問(wèn)題的砍艾,看下圖我定義的函數(shù)類型的變量b
你能用的函數(shù)
官方文檔:https://mp.weixin.qq.com/debu...
很多很多蒂教,一種是類庫(kù),一種是每種數(shù)據(jù)變量的函數(shù)脆荷。
比如你是字符串的時(shí)候凝垛,就可以使用它的replace、search等等函數(shù)蜓谋,大部分函數(shù)的功能和命名和js中的都一樣梦皮,看官方文檔吧。
模塊
官方文檔:https://mp.weixin.qq.com/debu...
這些年js界出現(xiàn)了比如seajs桃焕、webpack等模塊化工具剑肯,wxs也是這個(gè)邏輯。
每一個(gè) .wxs 文件和 <wxs> 標(biāo)簽都是一個(gè)單獨(dú)的模塊观堂。
我們不能直接使用模塊內(nèi)的數(shù)據(jù)让网,只能和模塊暴露出的接口進(jìn)行溝通,所以每個(gè)模塊都有類似下面的語(yǔ)句
其實(shí)在js中也是這樣的师痕。
當(dāng)我們要使用一個(gè)外部的 .wxs時(shí)候
如果此刻你是一個(gè).wxs文件溃睹,那就直接使用 類似于 var msg = require("./msg.wxs");語(yǔ)法即可
如果此刻你是一個(gè)wxml文件,那需要使用wxs標(biāo)簽胰坟,指定src和module屬性因篇,如下語(yǔ)句 <wxs src="./../msg.wxs" module="msg" />
當(dāng)然有一些要注意的地方,這里不做陳述笔横,大家務(wù)必仔細(xì)看下官方文檔竞滓,我們必須要看的。
最后
以上5篇其實(shí)沒(méi)有太多技術(shù)問(wèn)題狠裹,更多是小程序的基礎(chǔ)課程虽界,我們只需要記住它、使用它即可涛菠。
接下來(lái)我們會(huì)對(duì)一些組件莉御、api進(jìn)行講解,希望電腦前的你安裝好微信小程序開(kāi)發(fā)工具俗冻,要寫寫代碼啦礁叔。
相關(guān)閱讀:
小北微信小程序小白系列教程第一篇-- Hello World
本文作者:北哥 個(gè)人站長(zhǎng) @ 北哥兄弟連
原文地址:小北微信小程序之小白教程系列之-腳本語(yǔ)言(WXS)-新手教程-小程序社區(qū)-微信小程序-微信小程序開(kāi)發(fā)社區(qū)-小程序開(kāi)發(fā)論壇-微信小程序聯(lián)盟