前言

對於從VUE過來的前端同學來說，見到小程序的第一眼一定是熟悉—感覺就像是把vue的單文件拆成了3個文件。但是，隨著慢慢入坑。馬上會發現，這樣怎麽不行？wxs文件又是什麽鬼？template和vue的template一樣嗎？下面我們來一起探索一下。

wxs文件的寫法

根據官方文檔的說法，wxs是小程序的一套腳本語言，用於和wxml一起構成頁面結構。就像js一樣，你可以在wxml中借助

在 HTML中的內聯js
<script>console.log(‘hello world‘)</script>

在WXML中的內聯wxs
<wxs module="m1">console.log
 
(‘hello world‘)</wxs>

單獨在文件中：

//hello.js
console.log("hello world")

//引入js
<script src="./hello.js"/>

//hello.wxs
console.log("hello world")
function foo(){}
module.exports = {foo:foo}

//引入wxs
<wxs src="./hello.wxs" module="m1">

但是別覺得wxs跟js就是一樣的了。wxs實現了CommonJS規範，也就是說，你寫在wxs文件或者標簽中的函數需要導出後才能使用，而不是像js那樣一個全局作用域。註意wxs標簽多出的module屬性，相當於 const m1 = require(‘./hello.wxs‘)

wxs的作用

如果不是因為{{}}中不能執行我寫在Page({})參數對象中的函數，我可能都懶得去看wxs究竟是幹什麽用的??。好在wxs解決了這個問題，wxs中的函數可以導出然後在WXML的{{}}中進行調用。這對於從vue或者react中過來又剛接觸小程序的同學一定是 ？？？。

我們來分別看看它們各自的文檔是怎麽說的：

vue: 對於所有的數據綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。{{ message.split(‘‘).reverse().join(‘‘) }}是支持的

react: You can embed any JavaScript expression in JSX by wrapping it in curly braces.For example, 2 + 2, user.firstName, and formatName(user) are all valid expressions:(一句話，JSX的{}中支持函數調用)

小程序: 簡單綁定可作用於 字面量/數字運算/字符運算/.[]的索引運算/條件運算/邏輯運算，不支持js文件中的函數調用以及方法調用

所以，我們需要把邏輯寫到wxs中，從而實現在WXML中借助函數處理復雜的邏輯。以實現message.split(‘‘).reverse().join(‘‘)這個邏輯為例，你可以這麽寫:

<wxs module="mdl">
function convert(str){return str.split(‘‘).reverse().join(‘‘)}
module.exports = {convert}
</wxs>


<view>{{mdl.convert(message)}}</view>

這時如果js中的data的message ="123",顯示出來的就是“321”了。本文完

WTF小程序之wxs