小潘杂谈

微信小程序WXS怎么使用

字号+ 作者:admin 来源:seo博客 2020-09-17 16:00 我要评论( )

本篇文章给大家带来的内容是关于微信小程序WXS怎么使用,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 前几天有个同学问我 微信小程序支持管......

本篇文章给大家带来的内容是关于微信小程序WXS怎么使用,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

前几天有个同学问我 微信小程序支持管道过滤器 吗?用过 angular 或者 vue 的同学都应该会在项目里用到 filter,然而在小程序中是不支持的。但是也有一些解决办法但我只是关心 WXS 能不能实现 filter 以及还能做什么?带着这样的疑问,我重新看了一遍微信小程序官方的 WXS。

微信小程序WXS怎么使用

下面举个简单的例子:<wxs module="m1">var msg = "hello world"; module.exports.message = msg;</wxs><view>{{m1.message}}</view>上面的例子可以输出 hello world 页面,当你阅读完 官方文档,会发现小程序的脚本语言的功能很捉鳖,比如只支持 es5 语法,不支持外部引入 js 等等。但是我仍然期待它未来支持更多的能力。

下面接入正题,探索文章题目的疑问

一、用 WXS 实现 filter

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

二、 WXS 还能做什么

其实很多时候,我们并不了解 WXS 还能做更多条件渲染的一些东西。请看下面一个例子:<wxs module="filter">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;</wxs><template name="nodata"><view>上例中,我使用了 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";<wxs alt="微信小程序WXS怎么使用" src="./../tools.wxs" module="tools" /><view>{{tools.msg}}</view><view>{{tools.bar(tools.FOO)}}</view>2、 在 .wxs 模块中引用其他 wxs 文件模块,可以使用 require 函数,但是不能引用其他 js 文件模块。

本文参考:微信小程序开发基础教程 https://www.html.cn/study/20.html以上就是微信小程序WXS怎么使用的详细内容,更多请关注小潘博客其它相关文章!

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。转载请注明seohttp://www.hkxiaopan.com

网友点评
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读