微信小程序知識點整理(二)——wxs簡介

一、WXS 腳本簡介

官方文檔：WXS語法參考

什麼是 wxs

• wxs 是小程序的一套腳本語言，結合 wxml ，可以構建出頁面的結構

wxs 的注意事項

• 沒有兼容性
  • wxs 不依賴於運行時的基礎庫版本，可以在所有版本的小程序中運行，不能使用高級語法（只能使用var來定義變量）
• 與 javascript 不同
  • wxs 與 javascript 是不同的語言，有自己的語法，並不和 javascript 一致
• 隔離性
  • wxs 的運行環境和其他 javascript 代碼是隔離的
  • wxs 中不能調用其他 javascript 文件中定義的函數，也不能調用小程序提供的API
• 不能作爲事件回調
  • wxs 函數不能作爲組件的事件回調
• iOS設備上比 javascript 運行快
  • 由於運行環境的差異，在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。
  • 在 android 設備上二者運行效率無差異

wxs 遵循 CommonJS 模塊化規範

CommonJS 是 javascript 的模塊化規範之一，小程序的腳本語言 wxs 遵循了 CommonJS 規範，因此，使用 wxs 時的體驗和使用 node.js 的體驗比較相似。

• module 對象
  • 每個 wxs 都是獨立的模塊，每個模塊均有一個內置的 module 對象，每個模塊都有自己獨立的作用域。
• module.exports
  • 由於 wxs 擁有獨立作用域，所以在一個模塊裏面定義的變量與函數，默認爲私有的，對其他模塊不可見，
  • 通過 module.exports 屬性，可以對外共享本模塊的私有變量與函數。
• require函數
  • 在 wxs 模塊中引用其他 wxs 文件模塊，可以使用 require 函數。

二、wxs 基礎語法

使用 module.exports 向外共享成員

• 通過 module.exports 屬性，可以對外共享本模塊的私有變量與函數

var foo = "hello world from wxs"; // 定義私有變量 foo
var bar = function (d) {            // 定義私有函數 bar
  return d
}

// 通過 modules.exports 向外共享私有成員
module.exports = {
  foo: foo, // 向外共享私有變量 foo
  bar: bar, // 向外共享私有函數 bar
};

// module.exports 中掛載 msg 變量
module.exports.msg = "hello world"

使用 require 引入其它 wxs 模塊 以及注意事項

• 在 wxs 模塊中引用其他 wxs 文件模塊，可以使用 require 函數。

// 使用 require 導入 tools.wxs 腳本
var tools = require("./tools.wxs")

// 得到的 tools 對象，可以直接訪問到 tools.wxs 中向外暴露的變量和方法
console.log(tools)

注意事項 ：

• 只能引用 wxs 文件模塊，且必須使用相對路徑
• wxs 模塊均爲單例
  • wxs 模塊在第一次被引用時，會自動初始化爲單例對象。
  • 多個頁面，多個地方，多次引用，使用的都是同一個 wxs 模塊對象。
• 如果一個 wxs 模塊在定義之後，一直沒有被引用，則該模塊不會被解析與運行。

支持的數據類型

• WXS 語言目前共有以下8種數據類型：
  • number 數值類型
  • string 字符串類型
  • boolean 布爾類型
  • object 對象類型
  • function 函數類型
  • array 數組類型
  • date 日期類型
  • regexp 正則

注意事項

注意：由於wxs 與 javascript 是不同的語言，有自己的語法，並不和 javascript 一致，

三、內嵌 wxs 腳本

使用規則

• wxs 代碼可以編寫在 wxml 文件中的 <wxs></wxs> 標籤內，就像 javascript 代碼可以編寫在 html 文件中的 <script></script> 標籤內一樣。
• wxml 文件中的每個 <wxs></wxs> 標籤，必須提供一個 module 屬性，用來指定當前 <wxs></wxs> 標籤的模塊名。在單個 wxml 文件內，建議其值唯一。
• module 屬性值的命名必須符合下面兩個規則：
  • 首字符必須是：字母（a-z A-Z），下劃線（_）
  • 剩餘字符可以是：字母（a-z A-Z），下劃線（_）， 數字（0-9）

案例代碼

<!--module名+暴露出來的變量-->
<view>{{ info.msg }}</view>

<wxs module='info'>
<!--只能用 var 來聲明 變量，不可以用const、let-->
  var msg = '我在等風來'

  module.exports = {
  <!--不能用高級語法 當屬性名與屬性值一樣時還是要都寫，不能省略-->
    msg: msg
  }
</wxs>

四、外聯 wxs 腳本文件

使用規則

• wxs 代碼可以編寫在以 .wxs 爲後綴名的文件內，就像 javascript 代碼可以編寫在以 .js 爲後綴名文件中一樣。
• 在 wxml 中如果要引入外聯的 wxs 腳本，必須爲 <wxs></wxs> 標籤添加 module 和 src 屬性。
  • module 用來爲 <wxs></wxs> 標籤指定模塊名，作爲當前頁面訪問這個模塊的標識名稱；
  • src 用來指定當前 <wxs></wxs> 標籤要引入的腳本路徑，必須是相對路徑；

案例代碼

// demo.wxs 文件

var msg = 'hello,world'
var handle = function (params) {
    return params
}

module.exports = {
  msg: msg,
  handle: handle
}

<!-- wxml頁面 -->
<wxs src='./demo.wxs' module='feng'></wxs>
<view>{{ feng.msg }}</view>
<view>{{ feng.handle('我在等風') }}</view>

注意：在 wxs中不要使用高級的JS語法

五、wxs過濾器寫法

Page({
 	data: {
       time: Date.now()
  	}
})

<!-- time 來自data裏的time-->
<view>{{tool.dateformat(time)}}</view><!--2019-12-19-->
 <wxs module="tool">
	// wxs 不是 js 裏面沒有Date()方法，但有getDate()
	// 註釋要用js的，不然報錯
	function dateformat(time){
	console.log(time)
	 var date = getDate(time)
	 var y = date.getFullYear()
	 var m = date.getMonth()+1
	 var d = date.getDate()
	 return y + '-' + m + '-' + d
	}
	module.exports = {
	 dateformat:dateformat
	}
</wxs>