微信小程序的特点
微信小程序是双线程的。它的架构分为app-service(逻辑层)和page-frame(视图层),分别运行在不同的线程。
什么是wxs
wxs就是经过重写的,一种简单的运行在视图层的js代码,可以做一些简单的逻辑运算。它的作用就相当于vue中的计算属性(computed)。因为它可以使用{{ }}来进行内容的书写,所以他还可以相当于vue2中的过滤器(filter)。每个wxs负责维护其那一部分的wxml,wxss,有自己独特的作用域。
wxs的作用
1、wxs就是在视图层中运行的js,在对view做一些操作时,可以对view数据做一些变换。
2、wxs对性能的贡献只有一点:与wxml运行在同一个线程,避免了重复操作时跨线程通信的开销。
简单来说,wxs就是wxml中的js代码。
wxs的使用
wxs写在外面的使用方法
//page/index.wxs
var msg = " hello world "
//取出数组中最大值的数
var getMax = function(array){
var max;
for(var i = 0; i<array.length,++i){
max = max == underfined ? array[i] : (max >= array[i] ? max : array[i])
}
return max
};
modele.exports={
msg:msg,
getMax:getMax
};
//可以写两个module.exports
module.exports.data = " some msg"
<!-- //page/index.wxml -->
<!-- //首先进行导入 -->
<wxs src="./index.wxs" module="tools" />
<view> {{tools.msg}}</view>
<view> {{tools.getMax(array)}}</view>
<view> {{tools.data}}</view>
//page/index.js
page({
data:{
array:[1,2,3,4,5,1,2,3,4]
}
})
wxs写在wxml里面的写法
//pages/index/wxml
<wxs module="m1">
var msg = " hello world "
module.exports.msg=msg;
</wxs>
<view>{{m1.msg}}</view>
在b中引入a-----》注意点:需要使用相对路径
//page/a.wxs
var a = "我是a"
module.exports.a=a;
//page/b.wxs
var b = require(./a.wxs)
module属性
module属性是当前<wxs>标签的模块名。在单个wxml文件内,建议其为唯一值。若重复的 话,则遵从唯一性,按照先后顺序,后者覆盖前者。不同文件之间的wxs模块名不会相互覆盖。
module属性值得命名必须符合以下规则
1、首字符必须是:字母(a-z A-Z),下划线(_)
2、剩余字符可以是字母(a-z A-Z),下划线(_),数字(0-9)
变量
-
- wxs中的变量均为值得引用
- 没有声明的变量直接赋值使用,会被定义为全局变量
- 如果只声明变量而不赋值,则默认为undefined
- var表现与JavaScript一致,会有变量提升。
变量名的命名规则与module属性的命名规则一致
wxs中的数据类型
wxs语言目前有以下几种数据类型:
-
- number :数字
- string : 字符串
- boolean :布尔
- object : 对象
- function : 函数
- array :数组
- date :日期
- regexp :正则