什麼是wxs?
wxs(WeiXin Script)是小程式的一套指令碼語言,結合WXML,可以構建出頁面結構.
wxs標籤
<wxs module="utils" src="../../wxs/test.wxs"></wxs>
複製程式碼

module屬性:

當前標籤的模組名,建議該值唯一,若存在同名的模組名,則按照先後順序覆蓋(後者會覆蓋前者).

src屬性:

a. 只能引用.wxs檔案,且必須是相對路徑;
b. wxs模組均為單例,wxs模組在第一次被引用時,會自動初始化為單例物件，多個頁面、多個地方、多次使用,使用的都是同一個wxs模組物件;
c. 如果一個wxs模組在定義後一直沒有被引用,則該模組不會被解析與執行;

wxs模組
wxs程式碼可編寫在wxml檔案中的標籤內,或以.wxs為字尾的檔案內(在微信開發者工具裡面,右鍵直接建立.wxs檔案,在裡面直接編寫wxs指令碼)
寫法1如下:
// test.wxml
<wxs module="utils">
module.exports = {
msg: 'hello world'
}
</wxs>
<view> {{utils.msg}}</view>
// 螢幕輸出: hello world
複製程式碼
寫法2如下:
// text.wxml
<wxs module="utils" src="../../common/wxs/test.wxs"></wxs>
// 也可直接使用單標籤閉合的寫法
// <wxs module="utils" src="../../common/wxs/test.wxs" />
<view> {{utils.msg}}</view>
// test.wxs
module.exports = {
msg: 'hello world'
}
複製程式碼

wxs程式碼一般建議寫在.wxs檔案中.

模組說明

每一個.wxs檔案和wxs標籤都是一個單獨的模組;
每個模組都有獨立的作用域,即在一個模組裡面定義的變數與函式，預設都是私有的,對其它模組不可見.
若一個模組想對外暴露其內部的私有變數與函式、只能通過module.exports來實現.

Q1: 若同一wxml引入多個wxs,其中存在同名的變數or函式,會是什麼表現呢?
// test.wxml
<wxs module="utils" src="../../wxs/test.wxs"></wxs>
<wxs module="utils1" src="../../wxs/test1.wxs"></wxs>
<view> {{utils.msg}} + {{utils.say()}}</view>
<view> {{utils1.msg}} +{{utils1.say()}}</view>

// test.wxs
module.exports = {
msg: 'hello test.wxs',
say: function (){
return 'test.wxs的say()'
}
}
// test1.wxs
module.exports = {
msg: 'hello test1.wxs',
shttp://www.cppcns.comay: function (){
return 'test1.wxs的say()'
}
}
// 螢幕輸出
// hello test.wxs + test.wxs的say()
// hello test1.wxs + test1.wxs的say()
複製程式碼
經過驗證發現,每個模組是有獨立作用域的.
Q2: 若想在.wxs模組中引入其他wxs檔案模組,該如何實現呢？
通過require函式
// test.wxs
var test1 = require('./test1.wxs')
module.exports = {
msg: 'hello test.wxs',
say: function (){
console.log(test1.msg)
return 'test.wxs的say()'
}
}
// 控制檯輸出
// [WXS Runtime info] hehttp://www.cppcns.comllo test1.wxs
複製程式碼
wxs註釋
// wxml檔案
<wxs module="utils">
// .wxs-單行註釋

/**
* .wxs-多行註釋
*/

/*
var a = 1

</wxs>
複製程式碼
上述例子中,所有的wxs程式碼均被註釋了,第三種寫法比較少見,在學習的時候看到了順手記錄下.
若是.wxs檔案,則只有單行&多行2種註釋方式.
wxs基礎知識

加法運算（+）用作字串的拼接;

<wxs module="utils">
module.exports = {
getnum: function () {
var a = 10
var b = 20
var str = a + '+' + b + '=' + (a+b)
return str
}
}
</wxs>
<view>{{utils.getnum()}}</view>
複製程式碼
不能使用``拼接運算子、否則www.cppcns.com會報錯.

wxs目前支援以下幾種資料型別:

number(數值)、string(字串)、boolean(布林值)、array(陣列)、object(物件)、function(函式)、date(日期)、regexp(正則)

wxs 資料型別中時沒有null/undefined的.

生成date物件需要使用getDate(),返回一個當前時間的物件.

<wxs module="utils">
module.exports = {
getNowTime: function () {
return getDate()
}
}
</wxs>
<view>{{utils.getNowTime()}}</view>
// 螢幕輸出
// Sat May 01 2021 14:42:57 GMT+0800 (中國標準時間)
複製程式碼
不能使用new Date(),會報錯.

不支援es6語法,像解構啊,箭頭函式都是不支援的.
不能使用let/const申明變數、要用var,存在變數提升。

<wxs module="utils">
module.exports = {
getnum: function () {
let a = 10
return a
}
}
</wxs>
<view>{{utils.getnum()}}</view>
複製程式碼

應用場景

一般後端返回給前端的是時間戳格式,但是我們要處理成想要的時間格式,比如yyyy-mm-dd,此時我們就可用wxs呼叫時間轉換函式.

也許有人要問了,在js中用一個函式對資料進行包裝,然後再輸出到頁面中不也可行嗎? 答案是可行的,只是在追求一個你認為相對更優解.
<wxs module="utils">
module.exports = {
formatTime: function (timeStamp) {
var now = getDate(parseInt(timeStamp))
var year = now.getFullYear()
var month = now.getMonth()+1
month = month < 10 ? '0' + month: month
var day = now.getDate()
day = day < 10 ? '0' + day :day
return year + '-' + month + '-' + day
}
}
</wxs>
<view>{{utils.formatTime(1619852841428)}}</view>
// 螢幕輸出
// 2021-05-01
複製程式碼

有時候後臺返回的網路圖片地址是相對路徑,有時候又是完整的圖片路徑,若要把圖片顯示出來,需要加上配置好的域名字首.

<wxs module="utils">
module.exports = {
getImg: function (url = '') {
var origin = 'https://xxx.com'
if (url.indexOf('https') !== -1 || urhttp://www.cppcns.coml.indexOf('http') !== -1) {
return url
} else {
return origin + url
}
}
}
</wxs>
<image src="{{utils.getImg('/a.png')}}"></image>
// src輸出
// https://xxx.com/a.png
複製程式碼
踩坑記錄

在wxml中呼叫時使用編譯出現了Expected LineFeed

解決方案: 把ES6的東西全部換成ES5,www.cppcns.com用var申明.

作者：bug製造者
連結：https://juejin.cn/post/6957221120764280840
來源：掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。