微信小程序脚本语言 WXS 怎么用

[复制链接]
查看: 2710|回复: 3
  • 萌哒
    2018-11-19 14:03
  • 发表于 2019-1-23 14:10:42 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    这是微信小程序踩坑系列的第二篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的《微信小程序》专栏。
    前言

    前几天有个同学问我 微信小程序支持管道过滤器 吗?
    用过 angular 或者 vue 的同学都应该会在项目里用到 filter,然而在小程序中是不支持的。但是也有一些解决办法,有一篇文章讲得还算不错,我在这里贴一下 微信小程序 使用filter过滤器几种方式 。
    但我只是关心 WXS 能不能实现 filter 以及还能做什么?带着这样的疑问,我重新看了一遍微信小程序官方的 WXS。
    095942og4444z7oc26or22.png
    下面举个简单的例子:
    var msg = "hello world"; module.exports.message = msg;</span class="hljs-name"style="color: rgb(51, 51, 51); font-weight: 700;"wxs/span>{{m1.message}}上面的例子可以输出 hello world 页面,当你阅读完 官方文档 ,会发现小程序的脚本语言的功能很捉鳖,比如只支持 es5 语法,不支持外部引入 js 等等。但是我仍然期待它未来支持更多的能力。
    下面接入正题,探索文章题目的疑问
    一、用 WXS 实现 filter

    前端通常有一个需求,那就是把后台传过来的时间戳转为不同规格的日期后显示出来。以往的做法一般是用一个函数对数据进行包装,然后输出到页面。就像前面提到的那篇文章里面所说的第一种方法一样,但是有人考虑到性能问题,认为在js里面循环处理比较耗性能(这点我不做评价,毕竟自己没有真正测试过)
    关于日期格式化的例子在前面提到的文章已经有了,在这里我再举一个比较简单的例子。在我开发过的项目里面,后台返回的网路图片地址通常是相对地址,也就是说要把图片显示出来,还得加上配置好的域名前缀。而我通常是拿到数据后进行遍历操作,把需要前端展示的图片加上前缀。但是有了 WXS,我们可以这样做:
    function getFullPath(url) { return "https://shiyuanjieyi.cn" + url } module.exports.getFullPath = getFullPath在上面这个例子中,可以看到整个过程基本类似于 vue 等框架自定义 filter 的做法。
    二、 WXS 还能做什么

    其实很多时候,我们并不了解 WXS 还能做更多条件渲染的一些东西。请看下面一个例子:
    function getData(entry, type) { var imgUrl = ''; var content = ''; switch (entry) { case 'needs': imgUrl = '/images/goods_empty.png'; content = '暂时没有需求'; break; case 'goods': imgUrl = '/images/goods_empty.png'; content = '暂时没有商品'; break; case 'activity': imgUrl = '/images/activity_empty.png'; content = '该专栏暂时没有活动'; break; case 'channel': imgUrl = '/images/article_empty.png'; content = '该专栏暂时没有资讯'; break; case 'micro-circle': imgUrl = '/images/article_empty.png'; content = '没有相关的话题哦'; break; case 'needs-release': imgUrl = '/images/goods_release_empty.png'; content = '你还没有发布任何需求哦'; break; case 'goods-release': imgUrl = '/images/goods_release_empty.png'; content = '你还没有发布任何商品哦'; break; case 'goods-collection': imgUrl = '/images/goods_collect_empty.png'; content = '你还没有收藏任何商品哦'; break; case 'apply': imgUrl = '/images/activity_apply_empty.png'; content = '你还没有报名任何活动哦'; break; case 'activity-collection': imgUrl = '/images/activity_collect_empty.png'; content = '你还没有收藏任何活动哦'; break; default: break; } if (type === 'image') { return imgUrl; } else { return content; } } module.exports.getData = getData;</span class="hljs-name"style="color: rgb(51, 51, 51); font-weight: 700;"wxs/span> <span class="xml"><span class="hljs-tag"> <span class="hljs-tag"></span class="hljs-name"style="color: rgb(51, 51, 51); font-weight: 700;"image/span> {{filter.getData(entry, 'content')}}</span class="hljs-name"style="color: rgb(51, 51, 51); font-weight: 700;"view/span> </span class="hljs-name"style="color: rgb(51, 51, 51); font-weight: 700;"view/span>上例中,我使用了 WXS 的函数功能帮我做条件判断,拿到对应的模板输出,其功能就是一个空数据展示页面。或许你会问这样写的好处是什么?
    那我可以告诉你,它很容易扩展,比如新增一个页面需要对应的空数据模板,那么直接在 switch 语句中加多一个 case 即可。况且如果把逻辑写在 WXML 上代码会很复杂,不容易看懂。
    明白了这一点,你会发现,只要是在 WXML 上需要做一些逻辑判断的操作都可以 WXS 代替。
    也就是说,在开发中,我们都可以用 WXS 的函数功能帮助我们清晰有效地处理 WXML 上渲染的一些视图。
    三、思考(引伸)

    1、 对于需要做成 filter 形式的 WXS,最好把它写在一个.wxs文件里,需要使用时,直接在对应 WXML 上引用即可。
    var foo = "'hello world' from tools.wxs";var bar = function (d) { return d;}module.exports = { FOO: foo, bar: bar,};module.exports.msg = "some msg";<span class="xml"><span class="hljs-tag">{{tools.msg}<span class="xml">}</span class="hljs-name"style="color: rgb(51, 51, 51); font-weight: 700;"view/span>{{tools.bar(tools.FOO)}}</span class="hljs-name"style="color: rgb(51, 51, 51); font-weight: 700;"view/span>2、 在 .wxs 模块中引用其他 wxs 文件模块,可以使用 require 函数,但是不能引用其他 js 文件模块。
    四、参考链接


    • WXS·小程序
    (完)
    本文作者 Thinker本文如有错误之处,请留言,我会及时更正
    觉得对您有帮助的话就 点个赞收藏 吧!
    欢迎转载或分享,转载时请注明出处
    发表于 3 天前 | 显示全部楼层
    回的人少,我来小顶一下
    回复

    使用道具 举报

    发表于 3 天前 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复

    使用道具 举报

    发表于 3 天前 | 显示全部楼层
    么有分,谁能送我点积分啊::>_<::
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

     
     
    技术支持
    在线客服
    售后交流群瑞恩社区™售后</font><br><span>交流
    工作时间:
    8:00-18:00
    客服热线:
    15368564009
    微信扫一扫
    返回顶部 关注微信 下载APP 返回列表