WTF小程序之wxs

前言

对于从VUE过来的前端同学来说，见到小程序的第一眼一定是熟悉—感觉就像是把vue的单文件拆成了3个文件。但是，随着慢慢入坑。马上会发现，这样怎么不行？wxs文件又是什么鬼？template和vue的template一样吗？下面我们来一起探索一下。

wxs文件的写法

根据官方文档的说法，wxs是小程序的一套脚本语言，用于和wxml一起构成页面结构。就像js一样，你可以在wxml中借助标签写内联的代码，也可以单独把脚本写在wxs为后缀的文件中,见下面的例子：

在 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了。。