wxs
官方解釋
- WXS 與 JavaScript 是不同的語言，有自己的語法，并不和 JavaScript 一致。
- WXS 的運(yùn)行環(huán)境和其他 JavaScript 代碼是隔離的，WXS 中不能調(diào)用其他 JavaScript 文件中定義的函數(shù)，也不能調(diào)用小程序提供的API。
- WXS 函數(shù)不能作為組件的事件回調(diào)。
- 由于運(yùn)行環(huán)境的差異，在 iOS 設(shè)備上小程序內(nèi)的 WXS 會(huì)比 JavaScript 代碼快 2 ~ 20 倍。在 android 設(shè)備上二者運(yùn)行效率無差異
使用方法
wxs 代碼可以寫在wxml 文件中 的<wxs>標(biāo)簽內(nèi)， 或者 以 .wxs 為后綴名的文件內(nèi)。(
ps: 一般建議寫在 .wxs 文件中）每個(gè) .wxs 文件 或者 <wxs> 標(biāo)簽都是一個(gè)單獨(dú)的模塊， 當(dāng)我們想在外部引入其中的私有變量或者函數(shù)時(shí)， 需要 module.exports 實(shí)現(xiàn)。
示例代碼：
- 首先在tools.wxs 文件中這么編寫
// /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>
- 頁面中會(huì)顯示
注意事項(xiàng)
wxs 跟js 相比還是有很多限制的。
比如：
它不支持 es6 語法， 所以我們平常編碼過程中使用的 解構(gòu)， 箭頭函數(shù)...都是不支持的。
定義變量只能用 var 或者不寫 代表全局。因?yàn)?let ，cons是 es6 的
-
數(shù)據(jù)類型 wxs 語法是沒有 **symbol null undefined **的。 其他的數(shù)據(jù)類型都支持。
具體都有：
-
number： 數(shù)值 -
string：字符串 -
boolean：布爾值 -
object：對(duì)象 -
function：函數(shù) -
array: 數(shù)組 -
date：日期 -
regexp：正則
-
判斷wxs中的數(shù)據(jù)類型
我們知道 在 js 中判斷數(shù)據(jù)類型可以用 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種數(shù)據(jù)類型都有與之同名的字符串與之對(duì)應(yīng)。 但是 mull是 不再其中 的
typeof null === 'object' // true
我們知道當(dāng) 遇到 Array Date Object... 時(shí) typeof 都會(huì)識(shí)別為 object
此時(shí)需要 Object.prototype.toString.call（）
但是在wxs 中 有屬性 constructor 會(huì)返回相應(yīng)數(shù)據(jù)類型的字符串
如圖：
<wxs>模塊只能在定義模塊的 WXML 文件中被訪問到。使用<include>或<import>時(shí)，<wxs>模塊不會(huì)被引入到對(duì)應(yīng)的 WXML 文件中。<template>標(biāo)簽中，只能使用定義該<template>的 WXML 文件中定義的<wxs>模塊。
使用場景
因?yàn)?wxml 的雙括號(hào)數(shù)據(jù)綁定中對(duì)表達(dá)式的支持不夠完善，因此我們可以用wxs 來增強(qiáng)wxml 的表達(dá)式。 也就是可以在 wxml 中寫函數(shù)。
接下來講兩個(gè)實(shí)際的應(yīng)用場景的例子
- 展示天氣進(jìn)行數(shù)據(jù)展示
// index.wxs
// 濕度判斷
humidity: function(h) {
if (h) {
return '濕度 ' + h + '%'
}
return h
},
// 風(fēng)的等級(jí)判斷
windLevel: function(level) {
if (level === '1-2') {
return '微風(fēng)'
} else {
return level + '級(jí)'
}
},
// 風(fēng)的類型
wind: function(code, level) {
if (!code) {
return '無風(fēng)'
}
if (level) {
level = level.toString().split('-')
level = level[level.length - 1]
return code + ' ' + level + '級(jí)'
}
return code
},
- 因?yàn)楹笈_(tái)返回給我們的數(shù)據(jù)數(shù)組是時(shí)間戳, 但是要處理成我們想要的時(shí)間格式，比如：2019-07-17
一般處理是遍歷數(shù)組然后對(duì)數(shù)組中的每個(gè)時(shí)間戳對(duì)象調(diào)用時(shí)間轉(zhuǎn)化函數(shù)。
但是在wxs 中 我們的轉(zhuǎn)換函數(shù)可以這么寫
// 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>
最終實(shí)現(xiàn)效果如下：
【完】
【作者簡介】 Mars 蘆葦科技web前端開發(fā)工程師 喜歡 看電影 ，擼鐵 還有學(xué)習(xí)。擅長 微信小程序開發(fā)， 系統(tǒng)管理后臺(tái)。訪問 www.talkmnoney.cn了解更多。
作者主頁：
