小程序模板网

一斤代码解读--小程序视图层处理增强之WXS

2017-12-29 梅什儿

随着微信开发者工具v1.0.0的释出,beta已久的微信小程序视图层的新功能特性WXS(WeiXin Script),也正式到来了。熟悉微信小程序开发框架的开发者,肯定会对其视图层WXML中缺失的一个功能耿耿于怀,那就是没有办法在 ...

 
 
 

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

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

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

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

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

下列代码是不工作的:

 

			
  1. <!-- wxml文件 -->
  2. <view>{{testFunc(name)}}</view>
  3.  
  4. // some-page.js
  5. Page({
  6. data: {
  7. name: "一斤代码"
  8. },
  9.  
  10. testFunc: function (name) {
  11. return "Hello," + name
  12. }
  13. })

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

 

			
  1. <!-- wxml文件 -->
  2. <view>{{myModule.testFunc(name)}}</view>
  3.  
  4. <wxs module="myModule">
  5. function testFunc(name) {
  6. return "Hello," + name
  7. }
  8. module.exports.testFunc = testFunc
  9. </wxs>
  10.  
  11. // some-page.js
  12. Page({
  13. data: {
  14. name: "一斤代码"
  15. }
  16. })

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

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

 

			
  1. var formatUtil = require("./format-util.wxs");
  2. var now = getDate()
  3.  
  4. formatUtil.formatDate(now)

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

模块只能在定义模块的 WXML 文件中被访问到。使用 或 时, 模块不会被引入到对应的 WXML 文件中。

标签中,只能使用定义该 的 WXML 文件中定义的 模块。

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18315.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询