微信小程序知识点整理(二)——wxs简介

一、WXS 脚本简介

官方文档：WXS语法参考

什么是 wxs

• wxs 是小程序的一套脚本语言，结合 wxml ，可以构建出页面的结构

wxs 的注意事项

• 没有兼容性
  • wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行，不能使用高级语法（只能使用var来定义变量）
• 与 javascript 不同
  • wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致
• 隔离性
  • wxs 的运行环境和其他 javascript 代码是隔离的
  • wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API
• 不能作为事件回调
  • wxs 函数不能作为组件的事件回调
• iOS设备上比 javascript 运行快
  • 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。
  • 在 android 设备上二者运行效率无差异

wxs 遵循 CommonJS 模块化规范

CommonJS 是 javascript 的模块化规范之一，小程序的脚本语言 wxs 遵循了 CommonJS 规范，因此，使用 wxs 时的体验和使用 node.js 的体验比较相似。

• module 对象
  • 每个 wxs 都是独立的模块，每个模块均有一个内置的 module 对象，每个模块都有自己独立的作用域。
• module.exports
  • 由于 wxs 拥有独立作用域，所以在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见，
  • 通过 module.exports 属性，可以对外共享本模块的私有变量与函数。
• require函数
  • 在 wxs 模块中引用其他 wxs 文件模块，可以使用 require 函数。

二、wxs 基础语法

使用 module.exports 向外共享成员

• 通过 module.exports 属性，可以对外共享本模块的私有变量与函数

var foo = "hello world from wxs"; // 定义私有变量 foo
var bar = function (d) {            // 定义私有函数 bar
  return d
}

// 通过 modules.exports 向外共享私有成员
module.exports = {
  foo: foo, // 向外共享私有变量 foo
  bar: bar, // 向外共享私有函数 bar
};

// module.exports 中挂载 msg 变量
module.exports.msg = "hello world"

使用 require 引入其它 wxs 模块 以及注意事项

• 在 wxs 模块中引用其他 wxs 文件模块，可以使用 require 函数。

// 使用 require 导入 tools.wxs 脚本
var tools = require("./tools.wxs")

// 得到的 tools 对象，可以直接访问到 tools.wxs 中向外暴露的变量和方法
console.log(tools)

注意事项 ：

• 只能引用 wxs 文件模块，且必须使用相对路径
• wxs 模块均为单例
  • wxs 模块在第一次被引用时，会自动初始化为单例对象。
  • 多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

支持的数据类型

• WXS 语言目前共有以下8种数据类型：
  • number 数值类型
  • string 字符串类型
  • boolean 布尔类型
  • object 对象类型
  • function 函数类型
  • array 数组类型
  • date 日期类型
  • regexp 正则

注意事项

注意：由于wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致，

三、内嵌 wxs 脚本

使用规则

• wxs 代码可以编写在 wxml 文件中的 <wxs></wxs> 标签内，就像 javascript 代码可以编写在 html 文件中的 <script></script> 标签内一样。
• wxml 文件中的每个 <wxs></wxs> 标签，必须提供一个 module 属性，用来指定当前 <wxs></wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。
• module 属性值的命名必须符合下面两个规则：
  • 首字符必须是：字母（a-z A-Z），下划线（_）
  • 剩余字符可以是：字母（a-z A-Z），下划线（_）， 数字（0-9）

案例代码

<!--module名+暴露出来的变量-->
<view>{{ info.msg }}</view>

<wxs module='info'>
<!--只能用 var 来声明 变量，不可以用const、let-->
  var msg = '我在等风来'

  module.exports = {
  <!--不能用高级语法 当属性名与属性值一样时还是要都写，不能省略-->
    msg: msg
  }
</wxs>

四、外联 wxs 脚本文件

使用规则

• wxs 代码可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名文件中一样。
• 在 wxml 中如果要引入外联的 wxs 脚本，必须为 <wxs></wxs> 标签添加 module 和 src 属性。
  • module 用来为 <wxs></wxs> 标签指定模块名，作为当前页面访问这个模块的标识名称；
  • src 用来指定当前 <wxs></wxs> 标签要引入的脚本路径，必须是相对路径；

案例代码

// demo.wxs 文件

var msg = 'hello,world'
var handle = function (params) {
    return params
}

module.exports = {
  msg: msg,
  handle: handle
}

<!-- wxml页面 -->
<wxs src='./demo.wxs' module='feng'></wxs>
<view>{{ feng.msg }}</view>
<view>{{ feng.handle('我在等风') }}</view>

注意：在 wxs中不要使用高级的JS语法

五、wxs过滤器写法

Page({
 	data: {
       time: Date.now()
  	}
})

<!-- time 来自data里的time-->
<view>{{tool.dateformat(time)}}</view><!--2019-12-19-->
 <wxs module="tool">
	// wxs 不是 js 里面没有Date()方法，但有getDate()
	// 注释要用js的，不然报错
	function dateformat(time){
	console.log(time)
	 var date = getDate(time)
	 var y = date.getFullYear()
	 var m = date.getMonth()+1
	 var d = date.getDate()
	 return y + '-' + m + '-' + d
	}
	module.exports = {
	 dateformat:dateformat
	}
</wxs>