• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序 WXS实现json数据需要做过滤转义(filter)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先。

本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 vue 中的 | 方法进行快速的过滤,大都是用数据遍历洗数据来实现的,说实话,很麻烦,即使提取了公共方法那也麻烦,总之要洗数据就麻烦

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 文件,用于对外暴露一些过滤的方法。

//引用config.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 date = getDate(value*1000);
var Y = date.getFullYear() + \'-\';
var M = (date.getMonth() + 1 < 10 ? \'0\' + (date.getMonth() + 1) : date.getMonth() + 1) + \'-\';
var D = date.getDate() + \' \';
var h = date.getHours() + \':\';
var m = date.getMinutes() == 0 ? "00" : date.getMinutes();
var s = date.getSeconds();
return M + D + h + m;


}

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" 或者其他的命名来包裹。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序开发-云函数开发中json解析发布时间:2022-07-18
下一篇:
微信小程序单个页面设置json发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap