前言
对于从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的{}中支持函数调用)
小程序: 简单绑定可作用于 字面量/数字运算/字符运算/.[]的索引运算/条件运算/逻辑运算，不支持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”了。本文完