官方解釋
-
WXS 與 JavaScript 是不同的語言，有自己的語法，並不和 JavaScript 一致。
-
WXS 的運行環境和其他 JavaScript 代碼是隔離的，WXS 中不能調用其他 JavaScript 文件中定義的函數，也不能調用小程序提供的API。
-
WXS 函數不能作為組件的事件回調。
-
由於運行環境的差異，在 iOS 設備上小程序內的 WXS 會比 JavaScript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異
使用方法
-
wxs 代碼可以寫在wxml 文件中 的<wxs>標簽內， 或者 以 .wxs 為后綴名的文件內。(
ps: 一般建議寫在 .wxs 文件中） -
每個 .wxs 文件 或者 <wxs> 標簽都是一個單獨的模塊， 當我們想在外部引入其中的私有變量或者函數時， 需要 module.exports 實現。
示例代碼：
// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
-
然后在 wxml 頁面中引用
<wxs src="./tools.wxs" module="tools" />
<view>{{tools.FOO}}</view>
<view>{{tools.bar(5)}}</view>
<view>{{tools.msg}}</view>
-
頁面中會顯示
注意事項
wxs 跟js 相比還是有很多限制的。
比如：
-
它不支持 es6 語法， 所以我們平常編碼過程中使用的 解構， 箭頭函數...都是不支持的。
-
定義變量只能用 var 或者不寫 代表全局。因為 let ，cons是 es6 的
-
數據類型 wxs 語法是沒有 symbol null undefined 的。 其他的數據類型都支持。
具體都有：
-
number： 數值 -
string：字符串 -
boolean：布爾值 -
object：對象 -
function：函數 -
array: 數組 -
date：日期 -
regexp：正則
判斷wxs中的數據類型我們知道 在 js 中判斷數據類型可以用 typeof && Object.prototype.toString.call（）
typeof undefined === 'undefined' // true
typeof true === 'bollean' // true
typeof 25 === 'number' // true
typeof 'shit' === 'string' // true
typeof { name: 'mars'} === 'object' // true
// 以及 es6中的Symbol
typeof Symbol() === 'symbol' // true
typeof function a() {} === 'function' // true
以上6種數據類型都有與之同名的字符串與之對應。 但是 mull是 不再其中 的
typeof null === 'object' // true我們知道當 遇到 Array Date Object... 時 typeof 都會識別為
object此時需要
Object.prototype.toString.call（）
但是在wxs 中 有屬性
constructor會返回相應數據類型的字符串如圖：
-
-
<wxs>模塊只能在定義模塊的 WXML 文件中被訪問到。使用<include>或<import>時，<wxs>模塊不會被引入到對應的 WXML 文件中。 -
<template>標簽中，只能使用定義該<template>的 WXML 文件中定義的<wxs>模塊。
使用場景
因為 wxml 的雙括號數據綁定中對表達式的支持不夠完善，因此我們可以用wxs 來增強wxml 的表達式。 也就是可以在 wxml 中寫函數。
接下來講兩個實際的應用場景的例子
-
展示天氣進行數據展示
// index.wxs
// 濕度判斷
humidity: function(h) {
if (h) {
return '濕度 ' + h + '%'
}
return h
},
// 風的等級判斷
windLevel: function(level) {
if (level === '1-2') {
return '微風'
} else {
return level + '級'
}
},
// 風的類型
wind: function(code, level) {
if (!code) {
return '無風'
}
if (level) {
level = level.toString().split('-')
level = level[level.length - 1]
return code + ' ' + level + '級'
}
return code
},
-
因為后台返回給我們的數據數組是時間戳, 但是要處理成我們想要的時間格式，比如：2019-07-17
一般處理是遍歷數組然后對數組中的每個時間戳對象調用時間轉化函數。
但是在wxs 中 我們的轉換函數可以這么寫
// utils.wxs
var formatTime = function (date) {
var date = getDate(date)
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return ([year, month, day].map(formatNumber).join("-") + " " + [hour, minute].map(formatNumber).join(':'));
}
var formatNumber = function (n) {
n = n.toString();
return n[1] ? n : "0" + n;
}
module.exports = {
formatTime: formatTime,
}
// pages/index/index.html
<wxs src='./utils.wxs' module="utils">
<block wx:for="{{list}}" wx:key="index"></block>
<view >{{utils.formateTime(item.time)}}</view>
最終實現效果如下：
【完】
【作者簡介】 Mars 蘆葦科技web前端開發工程師 喜歡 看電影 ，擼鐵 還有學習。擅長 微信小程序開發， 系統管理后台。訪問 www.talkmnoney.cn了解更多。
作者主頁：