《五》微信小程序中的 JS

微信小程序中是通过 JavaScript 来正常处理逻辑。

WXS：

WXS 是微信小程序中一套特殊的脚本语言，可以内联在 WXML 中，从语法上看类似于有少量限制的 JavaScript 。

在 Page/Component 中定义的函数是不能直接在 WXML 中调用的，因为 Page/Component 中定义的函数是运行在逻辑层，WXML 是运行在视图层，如果进行通讯的话性能开销很高，因此微信小程序底部没有对此进行支持；WXML 和 WXS 都是运行在视图层，进行通讯性能开销很低，但是不要在 WXS 中编写复杂的逻辑，否则会阻塞页面的渲染。

WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数；也不能调用小程序提供的 API。

使用 WXS：

WXS 代码可以编写在 WXML 文件中的 <wxs> 标签内或者以 .wxs 为后缀名的文件内。每一个 <wxs> 标签和 .wxs 文件都是一个单独的模块，每个模块都有自己独立的作用域。

在单个 WXML 文件内，WXS 模块名需要唯一，否则后面的将会覆盖前面的；但是不同文件之间的 WXS 模块名不会相互覆盖。

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

1. 编写在 WXML 文件中的 <wxs> 标签内。

   <!-- index.wxml -->
   // 导出 wxs 模块。module 是当前 <wxs> 标签的模块名
   <wxs module="utils">
   	// 每个 wxs 模块均有一个内置的 module 对象，一个 wxs 模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现
   	module.exports = {
   		msg : "hello world",
   	}
   </wxs>
   
   // 引用 wxs 模块
   <view> {{utils.msg}} </view>	
   

2. 编写在以 .wxs 为后缀名的文件内。

   // utils.wxs
   // 导出 wxs 模块。每个 wxs 模块均有一个内置的 module 对象，一个 wxs 模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现
   var getMsg =  function() {
   	console.log("hello world")
   }
   module.exports = {
   	getMsg: getMsg,
   }
   

   <!-- indexwxml -->
   // 引入 wxs 模块。module 是当前 <wxs> 标签的模块名。src 是被引用的 wxs 文件的相对路径，仅当 <wxs >标签为单闭合标签或空标签时有效。
   <wxs module="utils" src="./utils.wxs"></wxs>
   // 绑定的 WXS 函数必须用{{}}括起来
   <view bindtap="{{utils.getMsg}}">按钮</view>
   

   .wxs 文件不仅可以被 WXML 中的 <wxs> 标签引用，还可以使用 require 函数被其他的 .wxs 文件引用。

   // tools.wxs
   var utils = require("./utils.wxs");
   console.log(utils.getMsg());
   

WXS 和 JavaScript 的区别：

1. WXS 目前共有以下几种数据类型：string、number、boolean、object、array、function、date、regexp。其中，生成 date 对象需要使用 getDate 函数，生成 regexp 对象需要使用 getRegExp 函数。

   var  date = getDate(1500000000000);
   var reg = getRegExp('(\d)(?=(?:\d{3}[+]?)+$)','g');
   

2. 不支持 ES6+ 语法， let/const、箭头函数、对象属性的简洁写法等都不可以使用。