小程序模板網(wǎng)

小北微信小程序之小白教程系列之 -- 腳本語(yǔ)言(WXS)

發(fā)布時(shí)間:2018-04-25 09:57 所屬欄目:小程序開(kāi)發(fā)教程

這是微信小程序近期引入的一個(gè)概念,我們可以在開(kāi)發(fā)者工具中直接以獨(dú)立文件的形式建立它們。

當(dāng)然你也可以使用wxs標(biāo)簽直接在wxml文件中使用。

兩種訪(fǎng)問(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)我們寫(xiě)一個(gè) /* 時(shí)候,代表從 /* 開(kāi)始往后的所有 wxs 代碼均被注釋?zhuān)@里的所有代表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...

話(huà)說(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...

寫(xiě)的相當(dāng)不錯(cuò)。

數(shù)據(jù)類(lèi)型

官方文檔:https://mp.weixin.qq.com/debu...

我們把"hello world"叫做字符串類(lèi)型,909叫做整數(shù)類(lèi)型,wxs一共支持如下幾種數(shù)據(jù)類(lèi)型。

number / string / boolean / object / function / array / date / regexp

你可能會(huì)差異為何function還是一種數(shù)據(jù)類(lèi)型,完全沒(méi)問(wèn)題的,看下圖我定義的函數(shù)類(lèi)型的變量b

你能用的函數(shù)

官方文檔:https://mp.weixin.qq.com/debu...

很多很多,一種是類(lèi)庫(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è)模塊都有類(lèi)似下面的語(yǔ)句

其實(shí)在js中也是這樣的。

當(dāng)我們要使用一個(gè)外部的 .wxs時(shí)候

如果此刻你是一個(gè).wxs文件,那就直接使用 類(lèi)似于 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ā)工具,要寫(xiě)寫(xiě)代碼啦。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23998.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)