【小程序】wxs使用

wxs使用

WXS(WeiXin Script)是小程序的一套脚本语言,结合WXML,能够构建出页面的结构。javascript

wxs能够说就是为了知足能在页面中使用js存在的,在wxml页面中,只能在插值{{ }}中写简单的js表达式,而不能调用方法,例如想得到某个时间的年份。html

虽然也能够在pagedata对象中先把这个年份定义好赋给某个变量,而后在页面中使用这个变量,可是若是这样的变量多了,代码就会很臃肿,可读性不高,后续维护也麻烦。前端

相对来讲wxs就是弥补了这样的短处。java

注意android

  • wxs 不依赖于运行时的基础库版本,能够在全部版本的小程序中运行。
  • wxs 与 javascript 是不一样的语言,有本身的语法,并不和 javascript 一致。
  • wxs 的运行环境和其余 javascript 代码是隔离的,wxs 中不能调用其余 javascript 文件中定义的函数,也不能调用小程序提供的API。
  • wxs 函数不能做为组件的事件回调。
  • 因为运行环境的差别,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上两者运行效率无差别。

在 filters.wxs 文件中小程序

// filters.wxs var getYear = function (date) { date = getDate(date) || getDate() return date.getFullYear() }, module.exports = { getYear: getYear } 

在 trade/trade.wxml 文件中数组

<!-- trade/trade.wxml --> <wxs module="filters" src="filters.wxs"></wxs> <view class="year-title" >{{filters.getYear(tradeTime)}}年</view> 

从上述代码中,能够看到wxs语言的写法与js差很少,基本上咱们在写的时候,能够沿用js的写法,可是个别细节部分也须要注意。例如wxs的getDate(date) 和 js的new Date(date)缓存

WXS 语言目前共有如下几种数据类型:架构

  • number : 数值
  • string :字符串
  • boolean:布尔值
  • object:对象
  • function:函数
  • array : 数组
  • date:日期
  • regexp:正则

在使用中,咱们能够阅读官方文档查看具体语法wxs数据类型函数

 

----------------------------------------

小程序系列:

  前言

  项目结构

  生命周期

  请求与封装

  数据绑定

  事件

  基础使用: component使用 、 wxs使用 、 节点操做 、 页面跳转 、 缓存

  前端架构浅谈

----------------------------------------