摘要:官方解釋與是不同的語言,有自己的語法,并不和一致。的運行環境和其他代碼是隔離的,中不能調用其他文件中定義的函數,也不能調用小程序提供的。由于運行環境的差異,在設備上小程序內的會比代碼快倍。因為,是的數據類型語法是沒有的。
wxs 官方解釋
WXS 與 JavaScript 是不同的語言,有自己的語法,并不和 JavaScript 一致。
WXS 的運行環境和其他 JavaScript 代碼是隔離的,WXS 中不能調用其他 JavaScript 文件中定義的函數,也不能調用小程序提供的API。
WXS 函數不能作為組件的事件回調。
由于運行環境的差異,在 iOS 設備上小程序內的 WXS 會比 JavaScript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異
使用方法wxs 代碼可以寫在wxml 文件中 的
每個 .wxs 文件 或者
示例代碼:
首先在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 頁面中引用
{{tools.FOO}} {{tools.bar(5)}} {{tools.msg}}
頁面中會顯示
### 注意事項
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 會返回相應數據類型的字符串
如圖:
更多詳細介紹戳
標簽中,只能使用定義該 的 WXML 文件中定義的
因為 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{{utils.formateTime(item.time)}}
最終實現效果如下:
原文鏈接
【完】
【作者簡介】 Mars 蘆葦科技web前端開發工程師 喜歡 看電影 ,擼鐵 還有學習。擅長 微信小程序開發, 系統管理后臺。訪問 www.talkmnoney.cn了解更多。
作者主頁:
github
segmentfault
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105885.html
摘要:與之間通過橋協議通信包括調用指令和各種事件,涉及消息序列化跨線程通信與。一個小程序可以有多個,頁面間切換動畫比更流暢。業務無法直接控制。 showImg(http://upload-images.jianshu.io/upload_images/326507-e81e06b2cb7187e9.jpeg?imageMogr2/auto-orient/strip%7CimageView2/...
摘要:最近微信小程序異常火爆,很多人在學習,下面帶著大家搭建下微信小程序的調試環境,并調試入門練手項目通訊錄和基礎即可微信推薦使用的語言,去菜鳥教程簡單學習下,,,即可,方便大家學習。 一、前言(坑爹的玩意) 項目源碼:https://github.com/saucxs/wx_... 微信小程序自從2017年,被各種看好,不過一段時間過去了還是反響平平,下半年隨著各項功能的開放,很多企業...
閱讀 2458·2021-09-28 09:36
閱讀 3597·2021-09-22 15:41
閱讀 4383·2021-09-04 16:45
閱讀 1956·2019-08-30 15:55
閱讀 2847·2019-08-30 13:49
閱讀 825·2019-08-29 16:34
閱讀 2370·2019-08-29 12:57
閱讀 1679·2019-08-26 18:42