微信小程序:新功能WXS解读

注意(来自官方文档)

1、wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。

2、wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。

3、wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。

4、wxs 函数不能作为组件的事件回调。

5、由于运行环境的差异,在 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'
        ]
    },
})

<view>
    <block wx:for="{{names}}" wx:key="item">
        {{item}}
    </block>
</view>

或者先在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官方文档

原文发布于微信公众号 - 极乐技术社区(wxapp-union)

原文发表时间:2017-09-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LeoXu的博客

[翻译]Android教程-保存数据-支持不同的平台版本

展示 平台版本 的仪表盘会基于浏览过 Google Play Store的设备数量有规律的更新,来展示运行每一种版本Android的激活设备的分布. 一般...

862
来自专栏Java技术分享

“金三银四”招聘期又要到了,快来复习JAVA题!!

由于各操作系统(windows,liunx等)支持的指令集,不是完全一致的。就会让我们的程序在不同的操作系统上要执行不同程序代码。Java开发了适用于不同操作...

1.7K13
来自专栏Nian糕的私人厨房

WeChat 模块、模板与缓存

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

893
来自专栏智能大石头

XCode之第一次亲密接触

首先得说明,本教程仅用于让第一次接触XCode的朋友了解XCode,不具有任何别的实际意义,真正的项目也不会采取这种开发方式,而采用更先进、快速而强大的开发方式...

2579
来自专栏移动端开发

Socket学习总结系列(二) -- CocoaAsyncSocket

这是系列的第二篇 这是这个系列文章的第二篇,要是没有看第一篇的还是建议看看第一篇,以为这个是接着第一篇梳理的 先大概的总结一下在上篇的文章中说的些内容: 1、 ...

3247
来自专栏大前端开发

从编程小白到全栈开发:改造为全栈计算器

上一次,我们编写了一个纯前端实现的简易计算器,这次,我们就假装这个计算器在前端运行起来太吃力,客户端的资源完全不够用来进行1+1等于几这种复杂的计算。我们得借助...

1073
来自专栏那些年遇到的坑

前端性能优化(一)

前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。...

1482
来自专栏杂七杂八

Eclipse之working sets使用

Eclipse是开发Java最常用的一个软件,但是当我们项目变多的时候,就变得十分繁杂不好查找。还好eclipse给我们提供了working sets使用。 ...

750
来自专栏大内老A

ASP.NET的路由系统:路由映射

总的来说,我们可以通过RouteTable的静态属性Routes得到一个基于应用的全局路由表,通过上面的介绍我们知道这是一个类型的RouteCollection...

2299
来自专栏酷玩时刻

微信公众号开发之授权获取用户信息

测试号:找到 网页授权获取用户基本信息>点击修改>设置域名 服务号:找到 开发>接口权限>网页授权获取用户基本信息>>点击修改>设置域名

3664

扫码关注云+社区

领取腾讯云代金券