前言
對於從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')；然后你就可以在WXML中通過m1.foo來調用函數。另外，你可以在wxs中通過require引用別的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的{}中支持函數調用)
小程序: 簡單綁定可作用於 字面量/數字運算/字符運算/.[]的索引運算/條件運算/邏輯運算，支持[].length,[][0],obj.key，不支持在模板中調用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”了。本文完
2018.4.23更新：自從用了mpvue，再也沒寫過wxs了。。