微信小程序:新功能WXS解读(2017.08.30新增)
来源:互联网 发布:淘宝助理宝贝图片尺寸 编辑:程序博客网 时间:2024/06/11 20:03
注意(来自官方文档)
- wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
举个例子,在wxs
出来之前,如果我们要连接一个数组的内容并显示在wxml
中,我们需要通过循环连接数组的每一项:
.wxml
<view>
<block wx:for="{{names}}" wx:key="item">
{{item}}
</block>
</view>
.js
Page({
data: {
names:[
'Tom',
'Peter',
'Gray',
'Lisa'
]
},
})
或者先在js中连接好,放在data中,再显示在wxml中:
.wxml
<view>
{{content}}
</view>
.js
Page({
data: {
content:"",
names:[
'Tom',
'Peter',
'Gray',
'Lisa'
]
},
onLoad(options){
let content = this.data.names.join(" ")
this.setData({
content
})
}
})
有了wxs后,我们可以直接在wxml完成:
.wxml
<wxs module="util">
var joinArray = function (array) {
return array.join(' ')
}
module.exports = {
joinArray: joinArray
}
</wxs>
<view>
{{util.joinArray(names)}}
</view>
或者将工具函数保存为单独的文件,通过引入来使用:
/src/wxs/common.wxs
var joinArray = function (array) {
return array.join(' ')
}
module.exports = {
joinArray: joinArray
}
/pages/index/index.wxml
<wxs src="../../src/wxs/common.wxs" module="util" />
<view>
{{util.joinArray(names)}}
</view>
引入的时候,wxs标签src填写相对路径(绝对路径无效),module指定名字。
我们也可以将页面中的一些常量放在wxs中:
var MAX_COUNT = 19
module.exports = {
MAX_COUNT: MAX_COUNT
}
总结:
WXS
增强了wxml
的功能,相当于页面中的脚本语言,我们可以将比如检查手机格式的函数放在wxs
中来使用(根据是否正确来改变相应的样式),而不用跑到在js
中去检查。
需要注意的地方:
wxs
目前似乎并不支持ES6
(至少let
不能使用)wxs
文件不能被js
文件引用。wxs
文件能引用wxs
文件。
参考:
微信小程序WXS官方文档
阅读全文
1 0
- 微信小程序:新功能WXS解读(2017.08.30新增)
- 微信小程序-- WXS 脚本语言公测
- 微信小程序入门之二WXS
- WXS
- 小程序脚本语言WXS详解
- Docker 1.12新功能探索(2):新增重大特性
- 微信小程序0.11.122100版本新功能解析
- 微信小程序深度解读
- 解读微信小程序
- 微信小程序新增“星标”功能
- WXS 模块
- wxs 变量
- wxs 注释
- 美图秀秀网页版新功能上线 新增磨皮祛痘
- HTML5-表单新功能 1.新增控件类型
- 修改程序加入新功能
- 微信小程序开发深入解读
- 小程序脚本语言WXS,你想要的都在这里了
- windows安装配置Kafka后.\bin\windows\kafka-server-start.bat .\config\server.properties 出错
- CString转char * ,string
- Appium Hybrid混合应用 部分问题解决
- 软件开发实践-如何编写整洁的代码
- 随想,随笔
- 微信小程序:新功能WXS解读(2017.08.30新增)
- C++初始化字符串
- SpringBoot系列2—整合Mybatis-plus
- coreseek和xunsearch的使用
- Kotlin中一些知识点学习
- C++学习笔记(3)-重载与多态
- docker基础命令
- Android 简单的SharedPreferences轻量型存储方式
- centos7 打开指定的端口