在前面的章節中講過WXML用于描述頁面的結構、WXS用于結合WXML構建出頁面的結構、WXSS用于描述頁面的樣式，它們三者都有特定的語法。其中，WXSS與CSS相差不大，所以就不單獨列出了。本章主要講解WXML和WXS中常用的語法，只有掌握了常用的語法，我們才能得心應手地使用代碼完成頁面的構建。

文章目錄

• 4.1　WXML語法
• • 4.1.1　數據綁定
  • 4.1.2　列表渲染
  • 4.1.3　條件渲染
• 4.2　WXSS數據類型
• • 4.2.1　boolean
  • 4.2.4　array
  • 4.2.5　object
  • 4.2.6　function
  • 4.2.7　datedate
• 4.3　WXS語法
• • 4.3.1　變量與運算符
  • 4.3.2　條件判斷與循環
  • • 1．條件判斷
  • 4.3.3　WXS模塊
  • 4.3.4　使用注釋
• 4.4　小結

上一篇組件使用及屬性參考

本章主要涉及的知識點有：

• WXML語法
• WXS數據類型
• WXS語法

4.1　WXML語法

首先講一講WXML，它的語法并不復雜，主要分為數據綁定、列表渲染、條件渲染等。如果有前端開發經驗，學習起來會更加得心應手。

4.1.1　數據綁定

數據綁定（Data Binding）可以讓數據的變更實時地展現到界面中。在小程序中，并不支持雙向綁定，所以我們只能通過改變變量的值讓UI跟隨改變，而不能反向操作。接下來通過編寫示例代碼來講解。

【示例4-1】新建一個項目grammar，用來學習本章的內容。清空index.wxml和index.js的代碼，并輸入以下代碼：

//index.wxml <view>小程序語法測試</view><button style="margin-top:15px" bindtap="testDataBinding">數據綁定</button><button style="margin-top:15px" bindtap="testListRendering">列表渲染</button><button style="margin-top:15px" bindtap="testConditionalRendering">條件渲染</button> //index.js testDataBinding() { wx.navigateTo({url:'../data-binding/data-binding',})},testListRendering(){wx.navigateTo({url:'../list-rendering/list-rendering'})},testConditionalRendering() {wx.navigateTo({url:'../conditional-rendering/conditional-rendering',})}, //index.wxss view {margin:16px;}

運行代碼，首頁效果如下圖所示。在接下來的小節里，我們通過點擊不同的按鈕進入對應的組件展示中。

數據綁定使用Mustache語法（雙大括號）將變量包起來。新建一個頁面data-binding，用來展示本小節的內容，代碼如下：

//data-binding.wxml <!--pages/data-binding/data-binding.wxml--><view style="text-align: center"><text>姓名:{{username}}\n</text><text>性別:{{userInfo.sex}}\n</text><text>年齡:{{userInfo.age}}</text><button bindtap="addAge">增加年齡</button> </view> // data-binding.js // pages/data-binding/data-binding.js Page({ /** *頁面的初始數據 */ data:{username:'張三',userInfo:{ sex:'男', age:18}},addAge() {this.setData({userInfo:{sex:this.data.userInfo.sex,age:this.data.userInfo.age +1}})} })

運行效果如圖所示。

【代碼解析】我們分別演示了3種不同的數據綁定，姓名直接使用了固定參數username，性別則使用了一個對象userInfo，并在里面增加了參數sex，所以我們在wxml中要寫userInfo.sex。年齡與性別的展示方式相同，為了演示綁定參數的變化，我們增加了一個按鈕，點擊后會在addAge方法中通過賦值讓年齡增加。學者可以自行測試。

4.1.2　列表渲染

說完了基本的視圖容器，繼續來看一下列表渲染（list-rendering）。列表渲染一般通過wx:for來實現，它的功能像for循環一樣，可以重復地從數組中取值并顯示出來。

【示例4-2】代碼如下：

// list-rendering.wxml <!--pages/list-rendering/list-rendering.wxml--><view wx:for="{{users}}" wx:for-item="user" style="margin: 15px;"><text>姓名:{{user.username}}\n</text><text>性別:{{user.sex}}\n</text><text>年齡:{{user.age}}</text> </view> // list-rendering.js //pages/list-rendering/list-rendering.js Page({/***頁面的初始數據*/data:{ users:[{num:'1',username:'張三', sex:'男', age:18},{num:'2',username:'李四', sex:'女', age:20},{num:'3',username:'王五', sex:'男', age:19},]},})

運行效果如圖所示。

【代碼解析】wx:for的用法很簡單，直接綁定上JS文件同名的數組即可進行循環，參數則使用wx:for-item來確定。其中，wx:for-item的參數是可以自定義的，寫什么都可以。代碼中使用user作為wx:for-item的參數，之后取數組中對象的參數時，直接用user.username就可以了。細心的讀者可能會發現，控制臺中報了一個警告，

如圖所示。

出現這種情況是因為我們在循環的時候缺少了一個wx:key參數。這個參數的作用是，當數據改變觸發渲染層重新渲染時會校正帶有key的組件，框架會確保它們被重新排序，而不是重新創建，這樣以確保組件保持自身的狀態，并且提高列表渲染時的效率。修改代碼如下：

<!--pages/list-rendering/list-rendering.wxml--> <view wx:for="{{users}}" wx:for-item="user"wx:key="num" style="margin: 15px;"><text>姓名:{{user.username}}\n</text><text>性別:{{user.sex}}\n</text><text>年齡:{{user.age}}</text> </view>

我們直接使用在JS中留下的num參數作為key，即可消除警告。

注意：除非可以確定列表是靜態不變的，否則在使用循環時最好加上這個參數。

4.1.3　條件渲染

在微信小程序中，條件渲染（conditional-rendering）判斷是否需要渲染該代碼塊，通常使用wx:if=""來實現。

【示例4-3】結合之前兩個小節的內容來展示條件渲染的用法，代碼如下：

conditional-rendering.wxml <!--pages/conditional-rendering/conditional-rendering.wxml--> <viewwx:for="{{users}}" wx:for-item="user" wx:key="num"wx:if="{{user.age>18}}" style="margin: 15px;"><text>姓名:{{user.username}}\n</text><text>性別:{{user.sex}}\n</text><text>年齡:{{user.age}}</text> </view> // conditional-rendering.js // pages/conditional-rendering/conditional-rendering.js Page({/** * 頁面的初始數據 */ data:{ users:[ { num:'1', username:'張三', sex:'男', age:18}, { num:'2', username:'李四', sex:'女', age:20}, { num:'3', username:'王五', sex:'男', age:19}, ] }, })

運行效果如圖所示。

【代碼解析】實現條件判斷，只需要在需要隱藏的標簽上寫入wx:if和條件即可，本例中設置的條件是user.age>18，也就是年齡大于18的才進行展示。注意有一些前端框架，列表循環和條件循環是不能寫在同級的，而微信小程序是可以寫在同級的，所以不需要再新建一層view進行展示。

注意：有一些前端框架，列表循環和條件循環是不能寫在同級的，而微信小程序是可以寫在同級的，所以不需要再新建一層view進行展示。

4.2　WXSS數據類型

本節將介紹WXS中常見的數據類型，并會在每一小節給出相關的示例代碼。

4.2.1　boolean

與大多數語言一樣，WXS中布爾類型的值為true/false。

【示例4-4】定義一個布爾類型的變量，賦值為false并輸出：

var str1 = 'Hello'; var str2 = "WXSS"; console.log('${str1} ${str2}!');//輸出結果：Hello WXSS!

4.2.4　array

WXSS中定義數組的方式與在JavaScript中的基本相同。

【示例4-7】初始化一個新的數組，增加新的值并輸出：

var arr = {1, 2, 3}; arr.push(4, 5); console.log(arr);//輸出結果：{1, 2, 3, 4, 5}

4.2.5　object

object是一種無序的鍵值對，也就是所謂的對象類型。【示例4-8】定義一個對象，增加新的值并輸出：

var obj = { name: '張三', sex: '男' } obj.age = 18; console.log{obj};//輸出結果：{name:"張三", sex:"男"， age:18}

4.2.6　function

function是函數類型，實際是把一個函數當成對象來使用。

【示例4-9】展示兩種不同的定義方式:

//方法1 function a (x) { return xi//方法2 var b = function(x) { return x;

4.2.7　datedate

從字面上可以理解為時間類型。小程序中有一個getDate()方法，便于我們獲取時間對象。

【示例4-10】獲取、轉換時間對象：

var date=getDate(); //返 回當前時間對象 date=getDate(1588953600000); //Sat May 09 2020 00:00:00 GMT+0800(中國標準時間)

4.3　WXS語法

WXSS不依賴于運行時的基礎庫版本，可以在所有版本的小程序中運行。在開發過程中，可以按照js的寫法來使用，但它有自己的語法，并不和JavaScript完全一致，遇到問題還是要及時查閱資料。

**提示:**根據官方資料，由于運行環境的差異，在iOS設備上小程序內的WXS會比JavaScript代碼快2～20倍。在Android設備上二者的運行效率無差異。基本上來說，熟悉JavaScript的讀者，學習WXS時是有一定優勢的。

4.3.1　變量與運算符

在WXSS中，變量和在JavaScript中一樣屬于弱類型，不需要指定類型即可使用。如果只聲明變量而不賦值，則默認值為undefined，代碼如下：

var age =18; var name="張三"; var numberi // number === undefined

不論是數字類型還是字符串類型，使用var修飾后直接賦值即可，如果不進行賦值，則為undefined。

接下來講一講運算符。在WXSS中，運算符主要分為基本運算符、比較運算符、等值運算符、賦值運算符、一元運算符、位運算符和二元邏輯運算符。

（1）基本運算符基本運算符的主要內容是加、減、乘、除，示例代碼如下：

vara=10，b=20; //加法運算 console.log(30 === a + b);//減法運算 console.log(-10===a-b);//乘法運算 console.log(200 === a * b);//除法運算 console.log(0.5 === a / b);//取余運算 console.log(10 === a b);

除了這些功能以外，加號還可以用作字符串的拼接。

vara='.w',b='xs'; // 字符串拼接 console.log('.wxs'=== a + b);

（2）比較運算符、等值運算符在我們的開發過程中，使用條件判斷語句時經常會用到比較運算符和等值運算符，示例代碼如下：

//比較運算符 vara=10，b=20; // 小于 console.log(true === (a<b));// 大于 console.log(false=== (a>b));// 小于等于 console.log(true=== (a<= b));// 大于等于 console.log(false===(a>=b)); //等值運算符 varc=10，d=20; //等號 console.log(false=== (c== d));//非等號 console.log(true===(c!=d));// 全等號 console.log(false===(c=== d));//非全等號 console.log(true===(c!== d));

（3）賦值運算符賦值運算符實際上就是使用等號進行賦值。唯一需要注意的是，寫條件判斷的時候，不要誤把“==”寫成“=”。

（4）二元邏輯運算符二元邏輯運算符主要就是與和或，通常用在條件判斷之中，示例代碼如下：

vara=10,b=20;//邏輯與 console.log(20=== (a && b));// 邏輯或 console.log(10 ===(a||b));

（5）一元運算符一元運算符主要是自增、自減等，使用頻率較低，示例代碼如下：

vara=10，b=20;//自增運算 console.log(10===a++); console.log(12 === ++a);//自減運算 console.log(12 === a--); console.log(10=== --a);// 正值運算 console.log(10=== +a);//負值運算 console.log(0-10 === -a);// 否運算 console.log(-11 === ~a);//取反運算 console.loq(false===!a);// delete運算 console.loq(true===deletea.fake);// void 運算 console.log(undefined===void a);// typeof 運算 console.log("number" === tvpeof a);

（6）位運算符位運算符是直接對整數在內存中的二進制位進行操作運算，優點是運算效率比乘除法運算快；缺點是理解起來比較復雜，并不常用。示例代碼如下：

var a = 10,b=20;// 左移運算 console.log(80 === (a << 3));//無符號右移運算 console.log(2 === (a >> 2));//帶符號右移運算 console.log(2 === (a >>> 2));//與運算 console.log(2 === (a &3));//異或運算 console.log(9 === (a^ 3));// 或運算 console.log(11===(a|3));

4.3.2　條件判斷與循環

在每個圖靈完備的程序語言中都會有條件判斷語句和循環語句，WXS當然也不例外。接下來分別介紹WXS中的條件判斷語句和循環語句。

1．條件判斷

條件判斷語句還是我們最熟悉的if和switch語句。示例代碼如下：

// if if(表達式){代碼塊; } else if(表達式){代碼塊; }else if(表達式){代碼塊;}else {代碼塊;// switch switch(表達式){ case 變量:語句; case 數字:語句; break; case 字符串:語句; default:語句;

2．循環循環語句有for、while和do while，其中for更常用一些。示例代碼如下：

// for for(語句;語句;語句){代碼塊;// while while(表達式){代碼塊;}// do while do { 代碼塊; } while(表達式)

4.3.3　WXS模塊

WXS代碼可以通過標簽編寫在WXML文件中，實現在頁面中運行WXS代碼的效果。標簽必須指定一個標簽的模塊名module，通過module即可將值傳遞到WXML中。舉個簡單的例子，代碼如下：

<wxs module="user"> var name = "張三"; module.exports ={ name:name</wxs> <view>{{user.name}}</view>

我們建立了一個名叫user的module，從中讀取了name參數。運行代碼即可看到“張三”顯示在屏幕上。

4.3.4　使用注釋

WXS的注釋有3種寫法，示例代碼如下：

// 方法一:單行注釋/* 方法二:多行注釋 在區間內的都會被注釋掉*/ /* 方法三:結尾注釋，即從/*開始往后的所有wXS 代碼均被注釋

4.4　小結

本章介紹了微信小程序語法，包括WXML的語法、WXS的數據類型和WXS語法。WXS作為微信小程序獨創的一個語言，從設計中就可以看出它有著自己獨特的優點。習慣于JavaScript的讀者基本上練習幾次就可以輕松上手。如果不適應，只使用JavaScript也是可以完成程序的。語法的學習可能比較枯燥，但是熟練掌握了語法，我們就能在開發過程中降低出現BUG的概率，更高效地完成編碼。

總結

以上是生活随笔為你收集整理的【微信小程序】零基础学 | 小程序语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。