摘要:官方解释与是不同的语言,有自己的语法,并不和一致。的运行环境和其他代码是隔离的,中不能调用其他文件中定义的函数,也不能调用小程序提供的。由于运行环境的差异,在设备上小程序内的会比代码快倍。因为,是的数据类型语法是没有的。
wxs 官方解释
WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API。
WXS 函数不能作为组件的事件回调。
由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异
使用方法wxs 代码可以写在wxml 文件中 的
每个 .wxs 文件 或者
示例代码:
首先在tools.wxs 文件中这么编写
// /pages/tools.wxs var foo = ""hello world" from tools.wxs"; var bar = function (d) { return d; } module.exports = { FOO: foo, bar: bar, }; module.exports.msg = "some msg";
然后在 wxml 页面中引用
{{tools.FOO}} {{tools.bar(5)}} {{tools.msg}}
页面中会显示
### 注意事项
wxs 跟js 相比还是有很多限制的。
比如:
它不支持 es6 语法, 所以我们平常编码过程中使用的 解构, 箭头函数...都是不支持的。
定义变量只能用 var 或者不写 代表全局。因为 let ,cons是 es6 的
数据类型 wxs 语法是没有 symbol null undefined 的。 其他的数据类型都支持。
具体都有:
number : 数值
string :字符串
boolean:布尔值
object:对象
function:函数
array : 数组
date:日期
regexp:正则
判断wxs中的数据类型
我们知道 在 js 中判断数据类型可以用 typeof && Object.prototype.toString.call()
typeof undefined === "undefined" // true typeof true === "bollean" // true typeof 25 === "number" // true typeof "shit" === "string" // true typeof { name: "mars"} === "object" // true // 以及 es6中的Symbol typeof Symbol() === "symbol" // true typeof function a() {} === "function" // true
以上6种数据类型都有与之同名的字符串与之对应。 但是 mull是 不再其中 的
typeof null === "object" // true
我们知道当 遇到 Array Date Object... 时 typeof 都会识别为 object
此时需要 Object.prototype.toString.call()
但是在wxs 中 有属性 constructor 会返回相应数据类型的字符串
如图:
更多详细介绍戳
标签中,只能使用定义该 的 WXML 文件中定义的
因为 wxml 的双括号数据绑定中对表达式的支持不够完善,因此我们可以用wxs 来增强wxml 的表达式。 也就是可以在 wxml 中写函数。
接下来讲两个实际的应用场景的例子
展示天气进行数据展示
// index.wxs // 湿度判断 humidity: function(h) { if (h) { return "湿度 " + h + "%" } return h }, // 风的等级判断 windLevel: function(level) { if (level === "1-2") { return "微风" } else { return level + "级" } }, // 风的类型 wind: function(code, level) { if (!code) { return "无风" } if (level) { level = level.toString().split("-") level = level[level.length - 1] return code + " " + level + "级" } return code },
因为后台返回给我们的数据数组是时间戳, 但是要处理成我们想要的时间格式,比如:2019-07-17
一般处理是遍历数组然后对数组中的每个时间戳对象调用时间转化函数。
但是在wxs 中 我们的转换函数可以这么写
// utils.wxs var formatTime = function (date) { var date = getDate(date) var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); return ([year, month, day].map(formatNumber).join("-") + " " + [hour, minute].map(formatNumber).join(":")); } var formatNumber = function (n) { n = n.toString(); return n[1] ? n : "0" + n; } module.exports = { formatTime: formatTime, }
// pages/index/index.html{{utils.formateTime(item.time)}}
最终实现效果如下:
原文链接
【完】
【作者简介】 Mars 芦苇科技web前端开发工程师 喜欢 看电影 ,撸铁 还有学习。擅长 微信小程序开发, 系统管理后台。访问 www.talkmnoney.cn了解更多。
作者主页:
github
segmentfault
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105885.html
摘要:与之间通过桥协议通信包括调用指令和各种事件,涉及消息序列化跨线程通信与。一个小程序可以有多个,页面间切换动画比更流畅。业务无法直接控制。 showImg(http://upload-images.jianshu.io/upload_images/326507-e81e06b2cb7187e9.jpeg?imageMogr2/auto-orient/strip%7CimageView2/...
摘要:最近微信小程序异常火爆,很多人在学习,下面带着大家搭建下微信小程序的调试环境,并调试入门练手项目通讯录和基础即可微信推荐使用的语言,去菜鸟教程简单学习下,,,即可,方便大家学习。 一、前言(坑爹的玩意) 项目源码:https://github.com/saucxs/wx_... 微信小程序自从2017年,被各种看好,不过一段时间过去了还是反响平平,下半年随着各项功能的开放,很多企业...
阅读 2456·2021-09-28 09:36
阅读 3595·2021-09-22 15:41
阅读 4381·2021-09-04 16:45
阅读 1953·2019-08-30 15:55
阅读 2844·2019-08-30 13:49
阅读 822·2019-08-29 16:34
阅读 2367·2019-08-29 12:57
阅读 1678·2019-08-26 18:42