## :-: .wxs 文件 ### **简介：** >[danger] WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。 * wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。 * wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。 * wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。 * wxs 函数不能作为组件的事件回调。 * 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。 ### **书写** 1）直接在`.wxml`文件中书写`.wxs`代码 ``` <!--wxml--> <wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs> <view> {{m1.message}} </view> ``` 2）编写`.wxs`文件 >[danger] `.wxs`文件中不支持es6写法 ``` // /pages/comm.wxs var foo = "'hello world' from comm.wxs"; var bar = function(d) { return d; } module.exports = { foo: foo, bar: bar }; ``` ### **模块** WXS 代码可以编写在 wxml 文件中的 `<wxs>` 标签内，或以 `.wxs` 为后缀名的文件内。 每一个` .wxs `文件和 `<wxs> `标签都是一个单独的模块。 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。 一个模块要想对外暴露其内部的私有变量与函数，只能通过 `module.exports` 实现。 ### **module 对象** 每个 wxs 模块均有一个内置的 module 对象。 exports属性: 通过该属性，可以对外共享本模块的私有变量与函数 ``` // /pages/tools.wxs var foo = "'hello world' from tools.wxs"; var bar = function (d) { return d; } module.exports = { FOO: foo, bar: bar, }; module.exports.msg = "some msg"; ``` ``` <!-- page/index/index.wxml --> <wxs src="./../tools.wxs" module="tools" />//src="path" 引入一个wxs,并使用该.wxs所暴漏的模块，别名为 module = "name" <view> {{tools.msg}} </view> <view> {{tools.bar(tools.FOO)}} </view> ``` ### **src属性** * 只能引用 .wxs 文件模块，且必须使用相对路径。 * wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。 * 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。 ### **require属性** >[warning] 在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。 引用的时候，要注意如下几点： * 只能引用 .wxs 文件模块，且必须使用相对路径。 * wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。 * 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。 >[success] **注意** > * `<wxs> `模块只能在定义模块的 WXML 文件中被访问到。使用 `<include>` 或 `<import> `时，`<wxs>` 模块不会被引入到对应的 WXML 文件中。 > * `<template>` 标签中，只能使用定义该` <template>` 的 WXML 文件中定义的 `<wxs>` 模块。