WXS語(yǔ)法：

在傳統(tǒng)的網(wǎng)頁(yè)開(kāi)發(fā)中， HTML 中是可以寫 JavaScript 代碼的，而在小程序中，是不允許在 WXML 文件中寫 JavaScript 的，但是有些時(shí)候，我們需要在 wxml 中實(shí)現(xiàn)一些邏輯的處理。比如舉個(gè)例子，我們渲染一個(gè)數(shù)字到 wxml 中，在 wxml 文件中根據(jù)這個(gè)數(shù)字來(lái)渲染具體星期幾。這時(shí)候通過(guò) wxml 文件中就做不了了，或者只能在 JavaScript 先計(jì)算好再渲染。示例代碼如下：

Page({data: {day: 1},onLoad: function(options) {var weekday = "";switch (this.data.day) {case 1:weekday = "星期一";break;case 2:weekday = "星期二";break;case 3:weekday = "星期三";break;case 4:weekday = "星期四";break;case 5:weekday = "星期五";break;case 6:weekday = "星期六";break;case 7:weekday = "星期天";break;}this.setData({weekday: weekday});} });

這時(shí)候小程序就提供了一個(gè)新的語(yǔ)法叫做 wxs 可以幫我們直接在 wxml 中解決。示例代碼如下：

< wxs module = "index" > var getWeekDay = function(day) {var weekday = "";switch (day) {case 1:weekday = "星期一";break;case 2:weekday = "星期二";break;case 3:weekday = "星期三";break;case 4:weekday = "星期四";break;case 5:weekday = "星期五";break;case 6:weekday = "星期六";break;case 7:weekday = "星期天";break;}return weekday; } module.exports.getWeekDay = getWeekDay; < /wxs> <view>{{index.getWeekDay(day)}}</view >

wxs 可以理解為 javascript 的一個(gè)閹割版本。使用 wxs 的好處如下：

在 iOS 上，在 wxs 中代碼執(zhí)行效率是在 js 中執(zhí)行的 2-20 倍。

可以把更多的邏輯在 wxml 文件中完成。
wxs代碼：

wxs 代碼可以寫在 wxml 文件中。也可以單獨(dú)放在 .wxs 后綴的文件中。如果是寫在 wxml 文件中，則必須要放在 wxs 標(biāo)簽中，如果是單獨(dú)放在 .wxs 后綴文件中，就不需要放在 wxs 標(biāo)簽中了。并且必須要給 wxs 一個(gè) module 屬性，用來(lái)標(biāo)記這個(gè) wxs 的名稱。以下是使用 .wxs 的語(yǔ)法。

// /pages/tools.wxs文件 <wxs module="tools"> var person = { "username": "zhiliao", "age": 18 } module.exports = person; < /wxs>

以后想使用的時(shí)候，就直接在 wxml 代碼中使用 wxs 來(lái)引用 wxs 文件。示例代碼如下：

<wxs src="./.. / tools.wxs " module="tools " /> <view> {{tools.username}} </view>"

另外，我們?cè)?wxs 中寫完了代碼，還需要導(dǎo)出才能夠使用。使用 module.exports 即可導(dǎo)出。
require函數(shù)：
如果在一個(gè) wxs 文件中，想引用另外一個(gè) wxs 文件，那么可以使用 require 函數(shù)引用。示例代碼如下：

// tools.wxs var person = {"username": "zhiliao","age": 18 } module.exports.person = person;

在另外一個(gè) wxs 文件中就可以進(jìn)行引用了。示例代碼如下：

var tools = require("./tools.wxs"); console.log(tools.person.username);

變量：

變量的定義跟 javascript 一致。

請(qǐng)查看：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/02variate.html 。
注釋：

注釋使用 /注釋/ 以及 //注釋 的方式，

另外增加了一種 /* xxx 的方式，這種方式會(huì)把 /* 后的所有代碼全部都注釋了。
運(yùn)算符：

請(qǐng)查看：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/04operator.html 。語(yǔ)句：
包括有 if 語(yǔ)句、 for 循環(huán)語(yǔ)句、 while 循環(huán)語(yǔ)句、 switch 分支語(yǔ)句。
具體查看：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/05statement.html 。

數(shù)據(jù)類型：

• number ： 數(shù)值
• string ：字符串
• boolean：布爾值
• object：對(duì)象
• function：函數(shù)
• array : 數(shù)組
• date：日期
• regexp：正則

其中每種數(shù)據(jù)類型的方法請(qǐng)參考：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/06datatype.html 。
內(nèi)置類庫(kù)：

wxs 提供了一些內(nèi)置的類庫(kù)，方便開(kāi)發(fā)者調(diào)用。

具體請(qǐng)看：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/07basiclibrary.html 。

wxs案例：

根據(jù)時(shí)間，來(lái)顯示距離現(xiàn)在的時(shí)間間隔。

如果時(shí)間間隔小于1分鐘以內(nèi)，那么就顯示“剛剛”

如果是大于1分鐘小于1小時(shí)，那么就顯示“xx分鐘前”

如果是大于1小時(shí)小于24小時(shí)，那么就顯示“xx小時(shí)前” 4.如果是大于24小時(shí)小于30天以內(nèi)，那么就顯示“xx天前”

否則就是顯示具體的時(shí)間2017/10/20 16:15。

view和scroll-view： view：
視圖容器。相當(dāng)于是傳統(tǒng)網(wǎng)頁(yè)中的 div ，可以用來(lái)存放任何的其他子元素。

相關(guān)的屬性請(qǐng)參考：

https://developers.weixin.qq.com/miniprogram/dev/component/view.html
scroll-view：

有時(shí)候我們的一些視圖在手機(jī)指定的寬度和高度不夠存放。那么可以放在 scroll-view 中。

設(shè)置橫向滾動(dòng)：

給 scroll-view 添加 scroll-x=“true” 屬性。

給 scroll-view 添加 white-space:nowrap; 樣式。

給 scroll-view 中的子元素設(shè)置為 display:inline-block; 。
示例代碼如下：
index.wxml代碼：

<scroll-view class='scroll-x-view' scroll-x><view class='scroll-view-item bg_red'></view><view class='scroll-view-item bg_blue'></view><view class='scroll-view-item bg_green'></view><view class='scroll-view-item bg_yellow'></view> </scroll-view>

index.wxss代碼：

.scroll - x - view {width: 100 % ;height: 100px;background: gray;white - space: nowrap; }.scroll - x - view.scroll - view - item {width: 200px;height: 100px; }.bg_red {background: red; }.bg_blue {background: blue; }.bg_green {background: green; }.bg_yellow {background: yellow; }

設(shè)置豎向滾動(dòng)：

給 scroll-view 添加 scroll-y=“true” 屬性。

給 scroll-view 設(shè)置高度。
wxml 和 wxss 示例代碼如下：

<scroll-view class='scroll-x-view' scroll-y><view class='scroll-view-item bg_red'></view><view class='scroll-view-item bg_blue'></view><view class='scroll-view-item bg_green'></view><view class='scroll-view-item bg_yellow'></view> </scroll-view> .scroll-x-view{ width: 100%; height: 200px; background: gray; } .scroll-x-view .scroll-view-item{ width: 100%; height: 100px; } .bg_red{ background: red; } .bg_blue{ background: blue; } .bg_green{ background: green; } .bg_yellow{ background: yellow; }

scrolltoupper和scrolltolower事件：鼠標(biāo)滾動(dòng)到距離頂部或者左邊、鼠標(biāo)滾動(dòng)到底部或者右邊多少距離的時(shí)候會(huì)執(zhí)行這個(gè)事件。默認(rèn)的間隔是 50 像素。示例代碼如下：

< scroll - view class='scroll-x-view' scroll - y bindscrolltoupper="scrollToUpper"><view style="height:1000px;"></view></scroll - view>Page({ scrollToUpper: function(event) { console.log(event); } });

bindscroll事件：

只要 scroll-view 發(fā)生了滾動(dòng)，就會(huì)執(zhí)行這個(gè)事件。

< scroll - view class = 'scroll-x-view'scroll - y bindscrolltoupper = "scrollEvent" > <view style = "height:1000px;" > </view> </scroll - view > Page({scrollEvent: function(event) {console.log(event);} });

總結(jié)

以上是生活随笔為你收集整理的微信小程序学习笔记（七）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。