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究竟是干什么用的