专栏首页大前端开发微信小程序视图层处理增强之WXS

微信小程序视图层处理增强之WXS

随着微信开发者工具v1.0.0的释出,beta已久的微信小程序视图层的新功能特性WXS(WeiXin Script),也正式到来了。

熟悉微信小程序开发框架的开发者,肯定会对其视图层WXML中缺失的一个功能耿耿于怀,那就是没有办法在视图层对数据进行格式化处理。比如我们从后端获取到一个包含了时间戳数据的数组,然后需要在界面上把这些日期都格式化显示为2017-01-01这种格式的日期形式,在Vue, Angular之类的前端Web框架中,一般在视图层都提供了如filter之类相应比较好用的方案。

而在现有的微信小程序代码中?你能怎么做?估计我们的做法要么是在Page代码中遍历一次数组,做一下格式化;要么,只能让后端返回已经格式化好的数据了。

对于追求程序代码优雅的程序员来说,这简直就是心中一个巨大的疙瘩!微信小程序团队估计没少受这方面的吐槽。因此,这次WXS的推出算是满足了对这种需求的渴望吧。

WXS算是专供WXML调用的有独立作用域的JS模块(不是全功能的JS,感觉有所限制)。举个例子,在这之前,我们是没有办法在WXML的数据绑定括号{{}}中调用JS函数的,所以在WXML层面就缺少了进一步做数据处理的能力。

下列代码是不工作的:

<!-- wxml文件 -->
<view>{{testFunc(name)}}</view>

// some-page.js
Page({
    data: {
        name: "一斤代码"
    },

    testFunc: function (name) {
          return "Hello," + name
    }
})

而有了WXS之后,我们就可以实现我们预期的功能了:

<!-- wxml文件 -->
<view>{{myModule.testFunc(name)}}</view>

<wxs module="myModule">
    function testFunc(name) {
        return "Hello," + name
    }
    module.exports.testFunc = testFunc
</wxs>

// some-page.js
Page({
    data: {
        name: "一斤代码"
    }
})

WXS可以直接定义在wxml文件的<wxs>标签体中,也可以写在独立的.wxs后缀名的文件中,然后在wxml文件中通过<wxs src="..." />的形式引入。

如要要在WXS代码中去引用其他独立.wxs文件,可以通过 require()函数来引入,基本上都是我们熟悉的方式:

var formatUtil = require("./format-util.wxs");
var now = getDate()

formatUtil.formatDate(now)

所以,WXS在功能方面,并没有什么复杂的东西,唯一需要特别注意一些的,就是它的作用域了:

  • <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时,<wxs> 模块不会被引入到对应的 WXML 文件中。
  • <template> 标签中,只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

赶紧去试试吧,看看你现有的代码是不是有可以借助WXS来优化重构一下的地方。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6特性之:箭头函数

    在ES6的所有新特性中,箭头函数(Arrow Fucntion)算是我用的最频繁的特性之一了。

    一斤代码
  • 开源翻译中文版《深度学习(Deep Learning)》

    深度学习是机器学习研究中的一个新的领域,其动机在于建立、模拟人脑进行分析学习的神经网络,它模仿人脑的机制来解释数据,例如图像,声音和文本。

    一斤代码
  • Node.js服务端开发教程 (五):依赖注入进阶篇

    在前一篇文章《依赖注入基础篇》中,我们了解了依赖注入和控制反转的基本概念,大致知道它是怎么一回事。并通过简单的例子,学习到了在NestJS框架下如何使用依赖注入...

    一斤代码
  • 大的方向上来讲,我觉得新人前端怎么学好?

    image.png 作为一个加入刚刚加入WEB前端行业的新人,所面对的情况不再是以往那种先学HTML,再学CSS,然后再学JS,最后学jQuery,挣钱。不再是...

    web前端教室
  • 正确的初始化,在Java编程中至关重要!

    有人说,你应该关注时事、财经,甚至流行的电影、电视剧,才有可能趁着热点写出爆文;有人说,你别再写“无聊”的技术文了,因为程序员的圈子真的很小,即便是像鸿祥那样的...

    沉默王二
  • ios入门之界面基础

    学习移动app开发,我们常常从讲解基本的控件开始,如UILabel、UISearchBar、UIButton、UITextField等等。在实现一个简单的ios...

    xiangzhihong
  • 数字递归输出

    @坤的
  • 红外光电测速传感器电路设计

      光电二极管发射红外光,如果有障碍物的话红外光线会被反射回来,被感应到后光电三极管导通。如果没有障碍物就不会导通。  二。安装

    用户6754675
  • 让动态的 iframe 内容高度自适应

    注意到这里的 this.contentWindow 其实就类似与下方的 name值对应的iframe2,两种引用方式是等价的

    书童小二
  • JDBC和数据库连接池

    JDBC是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口组成。

    宋先生

扫码关注云+社区

领取腾讯云代金券