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了。。
原文地址:https://www.cnblogs.com/imgss/p/8424656.html
相关推荐
-
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟 框架
2019-5-9
-
从零开始的Webpack4教程 框架
2019-3-24
-
教你用Cordova打包Vue项目 框架
2019-3-9
-
一篇文章教你如何捕获前端错误 框架
2019-9-1
-
React 组件通信 框架
2019-9-15
-
Vue和React对比 框架
2019-3-10
-
超智能vue图片懒加载之指令化管理(vue-img-lazy-load) 框架
2019-8-22
-
vue修饰符–可能是东半球最详细的文档 框架
2018-10-29
-
vue中使用web worker 框架
2019-9-4
-
[React Native] 加载、维护 bundle 的正确姿势 框架
2019-3-11