WXS是微信小程序的一套腳本語言，規范詳見。
它的特點是運行在渲染層。當需要避免邏輯層和渲染層交互通信折損時，可采用wxs。
uni-app可以將wxs代碼編譯到微信小程序、QQ小程序、APP、H5上（HBuilderX 2.2.5-alpha及以上版本）
與wxs類似，百度小程序提供了Filter、阿里小程序提供了SJS，uni-app也支持使用這些功能，并將它們編譯到百度和阿里的小程序端。不過它們的功能還不如wxs強大。此外頭條系小程序自身不支持類似功能。

平臺差異說明

wxs示例

以下是一些使用 WXS 的簡單示例，要完整了解 WXS 語法，請參考WXS 語法參考。本示例使用wxs響應touchmove事件，減少視圖層與邏輯層通信，使滑動更加絲滑。

<template><view><view class="area"><view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view></view></view> </template> <script module="test" lang="wxs">var startX = 0var startY = 0var lastLeft = 50; var lastTop = 50function touchstart(event, ins) {console.log("touchstart")var touch = event.touches[0] || event.changedTouches[0]startX = touch.pageXstartY = touch.pageY}function touchmove(event, ins) {var touch = event.touches[0] || event.changedTouches[0]var pageX = touch.pageXvar pageY = touch.pageYvar left = pageX - startX + lastLeftvar top = pageY - startY + lastTopstartX = pageXstartY = pageYlastLeft = leftlastTop = topins.selectComponent('.movable').setStyle({left: left + 'px',top: top + 'px'})return false}module.exports = {msg: 'Hello',touchstart: touchstart,touchmove: touchmove} </script><script>export default {data() {return {}},methods: {}} </script><style> .area{position: absolute;width: 100%;height: 100%; } .movable{position: absolute;width: 100px;height: 100px;left: 50px;top: 50px;color: white;text-align: center;line-height: 100px;background-color: red; } </style>

支付寶小程序，百度小程序官方暫未支持事件響應，不過也可以使用對應的SJS、Filter過濾器實現一些數據處理的操作，以下代碼展示了一個時間格式化的小功能
index.vue

<template><view><view>{{timestr}} 是</view><view>{{utils.friendlyDate(timestamp)}}</view></view> </template> <script module="utils" lang="filter" src="./utils.filter.js"></script> <script module="utils" lang="sjs" src="./utils.sjs"></script><script>export default {data() {return {timestr: '2019/08/22 10:10:10',timestamp: 0}},created() {this.timestamp = new Date(this.timestr).getTime()},methods: {}} </script>

utils.sjs 與 utils.filter.js 內容一致

export default {friendlyDate: (timestamp) => {var formats = {'year': '%n% 年前','month': '%n% 月前','day': '%n% 天前','hour': '%n% 小時前','minute': '%n% 分鐘前','second': '%n% 秒前',};var now = Date.now();var seconds = Math.floor((now - parseInt(timestamp)) / 1000);var minutes = Math.floor(seconds / 60);var hours = Math.floor(minutes / 60);var days = Math.floor(hours / 24);var months = Math.floor(days / 30);var years = Math.floor(months / 12);var diffType = '';var diffValue = 0;if (years > 0) {diffType = 'year';diffValue = years;} else {if (months > 0) {diffType = 'month';diffValue = months;} else {if (days > 0) {diffType = 'day';diffValue = days;} else {if (hours > 0) {diffType = 'hour';diffValue = hours;} else {if (minutes > 0) {diffType = 'minute';diffValue = minutes;} else {diffType = 'second';diffValue = seconds === 0 ? (seconds = 1) : seconds;}}}}}return formats[diffType].replace('%n%', diffValue);} }

注意
引入方式

<!-- 內聯 --> <script module="test" lang="wxs">//...code </script> <script module="utils" lang="filter">//...code </script><!-- 外部引入 --> <script module="utils" lang="wxs" src="./utils.wxs"></script> <script module="utils" lang="filter" src="./utils.filter.js"></script> <script module="utils" lang="sjs" src="./utils.sjs"></script>

? 【重要】 編寫wxs、sjs、filter.js 內容時必須遵循相應語法規范
? 【重要】 module所指定的模塊名不可與data、methods、computed內的屬性重名
? 目前各個小程序正在完善相關規范，可能會有較大改動，請務必仔細閱讀相應平臺的文檔
? 支付寶小程序請使用sjs規范，詳見
? 支付寶小程序sjs只能定義在.sjs 文件中，然后使用

【uniapp參考資料】

（1）小白教程資料 http://www.2d5.net

（2）計算機編程資料 http://www.pc-365.net www.4317.org
http://www.05423.com/

（3）uni-app跨平臺開發 入門到實戰 https://ke.qq.com/course/package/26512?tuin=2b10d56

（4）uni-app 完整商城界面設計實戰 https://ke.qq.com/course/2381059?tuin=2b10d56

（5）基于vue的uniapp商城完整項目源代碼 https://ke.qq.com/course/3064977?tuin=2b10d56

總結

以上是生活随笔為你收集整理的2.10 WXS ---uni-app框架简介【uni-app从入门到精通在线教程（黄菊华-跨平台开发系列教程）】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。