WTF小程序之wxs

框架

浏览数:139

2019-8-15

AD:资源代下载服务

前言

对于从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了。。

作者:nobody-junior