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

這是微信小程序近期引入的一個(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)閱讀:

小北微信小程序小白系列教程第三篇-- 樣式(WXSS)

小北微信小程序小白系列教程第二篇 -- 入口

小北微信小程序小白系列教程第一篇-- Hello World

本文作者:北哥 個(gè)人站長(zhǎng) @ 北哥兄弟連
原文地址:小北微信小程序之小白教程系列之-腳本語(yǔ)言(WXS)-新手教程-小程序社區(qū)-微信小程序-微信小程序開(kāi)發(fā)社區(qū)-小程序開(kāi)發(fā)論壇-微信小程序聯(lián)盟

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市迄薄,隨后出現(xiàn)的幾起案子琅关,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涣易,死亡現(xiàn)場(chǎng)離奇詭異画机,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)新症,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門步氏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人徒爹,你說(shuō)我怎么就攤上這事荚醒。” “怎么了隆嗅?”我有些...
    開(kāi)封第一講書人閱讀 164,960評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵界阁,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我胖喳,道長(zhǎng)泡躯,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 58,750評(píng)論 1 294
  • 正文 為了忘掉前任丽焊,我火速辦了婚禮精续,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘粹懒。我一直安慰自己,他們只是感情好顷级,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布凫乖。 她就那樣靜靜地躺著,像睡著了一般弓颈。 火紅的嫁衣襯著肌膚如雪帽芽。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 51,604評(píng)論 1 305
  • 那天翔冀,我揣著相機(jī)與錄音导街,去河邊找鬼。 笑死纤子,一個(gè)胖子當(dāng)著我的面吹牛搬瑰,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播控硼,決...
    沈念sama閱讀 40,347評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼泽论,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了卡乾?” 一聲冷哼從身側(cè)響起翼悴,我...
    開(kāi)封第一講書人閱讀 39,253評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎幔妨,沒(méi)想到半個(gè)月后鹦赎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體谍椅,經(jīng)...
    沈念sama閱讀 45,702評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評(píng)論 3 336
  • 正文 我和宋清朗相戀三年古话,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了雏吭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,015評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡煞额,死狀恐怖思恐,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情膊毁,我是刑警寧澤胀莹,帶...
    沈念sama閱讀 35,734評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站婚温,受9級(jí)特大地震影響描焰,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜栅螟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評(píng)論 3 330
  • 文/蒙蒙 一荆秦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧力图,春花似錦步绸、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,934評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至赘那,卻和暖如春刑桑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背募舟。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,052評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工祠斧, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人拱礁。 一個(gè)月前我還...
    沈念sama閱讀 48,216評(píng)論 3 371
  • 正文 我出身青樓琢锋,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親觅彰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子吩蔑,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 引言 WXS(WeiXin Script)是小程序的一套腳本語(yǔ)言,結(jié)合 WXML填抬,可以構(gòu)建出頁(yè)面的結(jié)構(gòu)烛芬。 注意 w...
    OzanShareing閱讀 1,391評(píng)論 0 3
  • 因新工作主要負(fù)責(zé)微信小程序這一塊,最近的重心就移到這一塊,該博客是對(duì)微信小程序整體的整理歸納以及標(biāo)明一些細(xì)節(jié)點(diǎn)赘娄,初...
    majun00閱讀 7,341評(píng)論 0 9
  • 作為一名后端開(kāi)發(fā)人員仆潮,我希望能從后端語(yǔ)言的某些模式來(lái)理解小程序,讓我快速的入門遣臼。 今天我們依然模擬一個(gè)女項(xiàng)目經(jīng)理和...
    極樂(lè)叔閱讀 688評(píng)論 0 0
  • 2.4.2 WXS WXS(WeiXin Script)是小程序的一套腳本語(yǔ)言性置,結(jié)合 WXML,可以構(gòu)建出頁(yè)面的結(jié)...
    wangbu2閱讀 1,259評(píng)論 0 2
  • 假如你不夠快樂(lè) 也不要把眉頭深鎖 人生本來(lái)短暫 為什么 還要栽培苦澀 打開(kāi)塵封的門窗 讓陽(yáng)光雨露灑遍每個(gè)角落 走向...
    簡(jiǎn)小取閱讀 301評(píng)論 6 5