小程序中的wxs文件

水深无声 2024-04-19 07:20 67阅读 0赞

[![073835m8xz7abstjeest6q.png][]][073835m8xz7abstjeest6q.png]

#### 注意（来自官方文档） ####

> 1.  wxs 不依赖于运行时的基础库版本，可以在所有版本的[小程序][Link 1]中运行。
> 2.  wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
> 3.  wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
> 4.  wxs 函数不能作为组件的事件回调。
> 5.  由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

###### 举个例子，在`wxs`出来之前，如果我们要连接一个数组的内容并显示在`wxml`中，我们需要通过循环连接数组的每一项： ######

######  ######

.wxml

1.  `<view>`
2.  `<block wx:for="{ {names}}" wx:key="item">`
3.  `{ {item}}`
4.  `</block>`
5.  `</view>`

.js

1.  `Page({`
2.  `data: {`
3.  `names:[`
4.  `'Tom',`
5.  `'Peter',`
6.  `'Gray',`
7.  `'Lisa'`
8.  `]`
9.  `},`
10. `})`

或者先在js中连接好，放在data中，再显示在wxml中：   
.wxml

1.  `<view>`
2.  `{ {content}}`
3.  `</view>`

.js

1.  `Page({`
2.  `data: {`
3.  `content:"",`
4.  `names:[`
5.  `'Tom',`
6.  `'Peter',`
7.  `'Gray',`
8.  `'Lisa'`
9.  `]`
10. `},`
11. `onLoad(options){`
12. `let content = this.data.names.join(" ")`
13. `this.setData({`
14. `content`
15. `})`
16. `}`
17. `})`

有了wxs后，我们可以直接在wxml完成：

.wxml

1.  `<wxs module="util">`
2.  `var joinArray = function (array) {`
3.  `return array.join(' ')`
4.  `}`
5.  ``
6.  `module.exports = {`
7.  `joinArray: joinArray`
8.  `}`
9.  `</wxs>`
10. `<view>`
11. `{ {util.joinArray(names)}}`
12. `</view>`

或者将工具函数保存为单独的文件，通过引入来使用：   
/src/wxs/common.wxs

1.  `var joinArray = function (array) {`
2.  `return array.join(' ')`
3.  `}`
4.  ``
5.  `module.exports = {`
6.  `joinArray: joinArray`
7.  `}`

/pages/index/index.wxml

1.  `<wxs src="../../src/wxs/common.wxs" module="util" />`
2.  `<view>`
3.  `{ {util.joinArray(names)}}`
4.  `</view>`

引入的时候，wxs标签src填写相对路径（绝对路径无效），module指定名字。

我们也可以将页面中的一些常量放在wxs中:

1.  `var MAX_COUNT = 19`
2.  `module.exports = {`
3.  `MAX_COUNT: MAX_COUNT`
4.  `}`

总结：

*  `WXS`增强了`wxml`的功能，相当于页面中的脚本语言，我们可以将比如检查手机格式的函数放在`wxs`中来使用（根据是否正确来改变相应的样式），而不用跑到在`js`中去检查。

需要注意的地方：

*  `wxs`目前似乎并不支持`ES6`（至少`let`不能使用）
 *  `wxs`文件不能被`js`文件引用。`wxs`文件能引用`wxs`文件。

参考：  
[微信小程序WXS官方文档][WXS]

[073835m8xz7abstjeest6q.png]: http://www.wxapp-union.com/data/attachment/portal/201709/12/073835m8xz7abstjeest6q.png
[Link 1]: http://www.wxapp-union.com/
[WXS]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxs/