专栏首页极乐技术社区微信小程序:新功能WXS解读

微信小程序:新功能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),作者:简书 tomfriwel

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序之生物识别

    1、如有遇到新问题,可以在下方留言或者加QQ群437729329 进行咨询。 2、版权说明:该文章为小程序社区(www.wxapp-union.com/)版主T...

    极乐君
  • 微信小程序开发心得第二章:千里传音(模板消息)

    今天分享一篇关于消息模板的简易教程。 老规矩先把官方的定义再讲一下,消息模板是基于微信的通知渠道,为我们开发者提供了触发模板消息的能力,以便实现服务的闭环和更好...

    极乐君
  • 快应用开发入门小结,看这篇内容就够了!

    简单地说快应用是国内的十大主流手机厂商比如小米、华为、ov 等联合推出的一种新型应用。无需安装,秒开,体验媲美原生。还提供了像原生应用一样的入口:应用商店,搜索...

    极乐君
  • 一招之力,Python打通云开发七经六脉

    “众所周知,云开发目前只支持Node js,如何突破这个限制?且看高手们如何用Python打通云开发七经六脉,让云开发的使用更加行云流水。”

    腾讯云开发TCB
  • 腾讯高级设计师:如何规划有格调的设计作品集?

    患者:找工者和整理癖 症状:情绪时而亢奋,时而低落,逐渐出现多种人格分裂的症状。可能偶然伴随脸上爆痘痘的情况出现。 本期关键字:作品集,简历,求职,整理,外面的...

    前朝楚水
  • 微应用模式在集团企业移动信息化中的实践

    随着移动互联网的快速发展及智能手机的不断普及,越来越多的企业将“移动化”作为优先的IT需求。在移动建设早期企业大多采用独立的建设思路,然而越来越多的业务系统要上...

    yuanyi928
  • 常用开发技巧系列(三)

    热更新衍生出来的问题:   前两天都在说iOS热更新的问题,结果今天就撞枪口上了,真的!审核被拒了,当然这并不是在我自己的项目使用了什么RN,或者JSPath...

    Mr.RisingSun
  • 绝对干货!NLP预训练模型:从transformer到albert

    语言模型是机器理解人类语言的途径,17年的transformer是语言模型摆脱rnn,lstm建模的一次尝试,后续的bert则是大力出奇迹的代表,用更大的模型和...

    新智元
  • Mysql 的七种 join

    对于SQL的Join,在学习起来可能是比较乱的。我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结...

    haifeiWu
  • 从零构建以太坊(Ethereum)智能合约到项目实战——学习笔记6

     int/uint:变长的有符号或无符号整型。变量支持的步长以8递增,支持从uint8到uint256,以及int8到int256。需要注意的是,uint和in...

    墨文

扫码关注云+社区

领取腾讯云代金券