微信小程序开发之 WXS 实现各大前端框架中的 filter
白羽 2018-07-18 来源 :网络 阅读 1735 评论 0

摘要:本文将带你了解微信小程序开发之 WXS 实现各大前端框架中的 filter,希望本文对大家学微信有所帮助。



前言最近有在做小程序开发

正文WXS 为何物在上代码之前先简单的介绍一下 WXS 是什么,以及和 javascript 有什么区别,虽然官方文档中都有,但我认为博客的存在意义就是尽量减少看官们的页面跳转,能够在一个页面说明的问题就不要再跳转,外链应该作为课后拓展的手段。WXS 介绍是小程序出的一套脚本语言,用于 wxml 模板文件中,在模板文件中可以完成页面的结构。不依赖于运行时的基础库脚本,可以在所有版本的小程序中运行。WXS 中不能调用 javascript 中定义的函数或者变量,也不能调用小程序提供的 API,他的运行环境和 javascript 是隔离的。小程序的条件渲染和循环渲染对 WXS 是无效的,就是说如果 WXS 代码包裹在未渲染的代码中,只要渲染的 wxml部分调用了此模块,此段 WXS 代码依然会被加载。由于运行环境的差异,在 ios 设备上小程序的 WXS 会比 javascript 快 2~20 倍,在 android 设备上运行效率无异。模块想要暴露自己的私有变量和方法,只能通过 module.exports 实现。若在模块中想要引用其他模块,只能通过 require 实现。只能使用 var 来定义变量,表现形式和 javascript 一样,会有变量提升。WXS 模块只能在定义模块的 wxml 文件中被访问到,使用 <include> 或 <import> 时,WXS 模块不会被引入到对应的 wxml 文件中。不能使用 new Date() 应该使用 getDate()。正确的使用 WXS上代码首先,新建一个 config.wxs 文件,用于存储状态码对应转义后的文字。var orderType = {

  "-1": "type one",
  "0": "type two",
  "1": "type three"
};
module.exports.orderType = orderType;可以看到我们对外暴露变量的时候用的是 module.exports,在 wxs 文件中只能使用该方法 官方文档 同样,在引入其他模块的时候,只能使用 require。接着,创建一个 index.wxs 文件,用于对外暴露一些过滤的方法。var config = require("./config.wxs");

function _filterOrderType(value) {
  return config.orderType[value.toString()] || "order type undefined"
}
// 时间戳转换成 yyyy-MM-dd HH:mm:ss
function _filterTimestamp(value) {
  // 有些特殊 不能使用 new Date()
  var time = getDate(value);
  var year = time.getFullYear();
  var month = time.getMonth() + 1;
  var date = time.getDate() < 10;
  var hour = time.getHours() < 10;
  var minute = time.getMinutes() < 10;
  var second = time.getSeconds() < 10;
  month = month < 10 ? "0" + month : month;
  date = date < 10 ? "0" + date : date;
  hour = hour < 10 ? "0" + hour : hour;
  minute = minute < 10 ? "0" + minute : minute;
  second = second < 10 ? "0" + second : second;
  return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}

module.exports._filterOrderType = _filterOrderType;
module.exports._filterTimestamp = _filterTimestamp;最后在我们需要进行过滤处理的 wxml 页面上引入这个模块,使用即可。<wxs src="../filter/index.wxs" module="filter" />
<view>{{filter._filterOrderType(item.type)}}</view>
<view>{{filter._filterTimestamp(item.time)}}</view>这里需要注意一下,在 wxml 页面上使用模块的时候,需要用一个 module="filter" 或者其他的命名来包裹。结语WXS 和 javascript 虽然类似,但是还是有一些不同的地方,如果在 debug 的时候发现报错了,可以在底下回复或者直接私信我,虽然不能秒回,但是多一个人多一条思路,也许我能给您提供一些别的思路,或者您的问题会给我带来一些新的思考,我正是这么期待着。    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!

本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 1 不喜欢 | 0
看完这篇文章有何感觉?已经有1人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程