用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序:新功能WXS解读(2017.08.30新增)

Rolan 2017-9-12 00:03

注意(来自官方文档) wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。 wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。 wxs 的运行环境和其他 javascript 代码是隔离 ...


注意(来自官方文档)

  1. wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
  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. module.exports = {
  6. joinArray: joinArray
  7. }
  8. </wxs>
  9. <view>
  10. {{util.joinArray(names)}}
  11. </view>

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

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

/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官方文档



鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: tomfriwel 来自: 简书

相关阅读