文章目录
- WXS基本使用
- 🍰WXS的介绍
- 🍰WXS的写法
- 🍰WXS的练习(一)
- 🍰WXS的练习(二)
WXS基本使用
🍰WXS的介绍
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
官方中说到: WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
其实WXS和JavaScript基本一致
为什么要设计WXS语言呢?
在WXML中是不能直接调用(指的是不能在插值语法调用函数) Page/Component中定义的函数的.
但是某些情况, 我们可以希望使用函数来处理WXML中的数据(类似于Vue中的过滤器),这个时候就使用WXS了
WXS使用的限制和特点:
WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行;
WXS 的运行环境和其他 JavaScript 代码是隔离的, WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API;
由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备 上二者运行效率 无差异;
🍰WXS的写法
例如: 我们来看下面这样一个案例
例如我们想要调用一个函数, 用来给价格加上一个符号, 在js编写函数, 在wxml中调用是没有效果的
<!-- 展示价格 -->
<view>{{ formatPrice(80) }}</view>
Page({data: {// js中的函数formatPrice(price) {return "¥" + price}}
})
这个时候就需要使用WXS的写法
WXS有两种写法:
方式一: 写在
<wxs>
标签中方式二: 写在以.wxs结尾的文件中
每一个 .wxs
文件和 <wxs>
标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数,只能通过CommonJS规范
module.exports
实现。
<wxs>
标签的属性:
属性名 | 类型 | 说明 |
---|---|---|
module | String | 当前 <wxs> 标签的模块名。必填字段。 |
src | String | 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。* |
方式一: 我们先用<wxs>
标签来写替代刚刚代码中的js部分
<!-- model声明当前wxs标签的模块名, 必填字段 -->
<wxs module="format">// wxs中不能写ES6的语法: 例如箭头函数function formatPrice(price) {return "¥" + price}// 需要导出函数, 导出只能使用CommonJs规范module.exports = {// 对象中也不能使用对象的增强写法formatPrice: formatPrice}
</wxs><!-- 通过模块名调用 -->
<view>{{ format.formatPrice(50) }}</view>
方式二: 可以将wxs的代码写到一个单独的 .wxs文件中
我们一般会在项目根目录下创建一个utils文件夹, wxs文件写在这里, 如下: 将刚刚的代码放到单独的 .wxs文件中
单独的 .wxs文件中同样不支持ES6的语法, 再在要使用的页面中, 通过wxs
标签引入 .wxs文件
<!-- model声明当前wxs标签的模块名, 必填字段 -->
<wxs module="format" src="/utils/farmat.wxs"></wxs><!-- 展示价格 -->
<view>{{ format.formatPrice(50) }}</view>
🍰WXS的练习(一)
使用两种方式来计算一个数组的和
- 方式一
<wxs module="sumNumber">function sum(arr) {return arr.reduce(function(prevValue, item) {return prevValue + item}, 0)}module.exports = {sum: sum}
</wxs><!-- 展示价格 -->
<view>{{ sumNumber.sum(nums) }}</view>
- 方式二
// farmat.wxs
function sum(arr) {return arr.reduce(function(prevValue, item) {return prevValue + item}, 0)
}module.exports = {sum: sum
}
<wxs module="sumNumber" src="/utils/farmat.wxs"></wxs><!-- 展示价格 -->
<view>{{ sumNumber.sum(nums) }}</view>
🍰WXS的练习(二)
案例练习题目:
题目一:传入一个数字,格式化后进行展示(例如36456,展示结果3.6万);
// format.wxsfunction formatCount(count) {// 保证传入的参数是数字类型var numCount = parseInt(count)if (numCount >= 100000000) {return (numCount / 100000000).toFixed(1) + "亿"} else if (numCount >= 10000) {return (numCount / 10000).toFixed(1) + "万"} else {return numCount}
}module.exports = {formatCount: formatCount
}
<wxs module="format" src="/utils/format.wxs"></wxs><view>{{ format.formatCount(5650000000) }}</view>
<view>{{ format.formatCount(123456) }}</view>
<view>{{ format.formatCount(100) }}</view>
题目二:传入一个时间,格式化后进行展示(例如100秒,展示结果为01 :40);
// 定义方法, 给时间补零
function padLeft(time) {// 将时间转为字符串time = time + ""return ("00" + time).slice(time.length)
}function formatDate(time) {var minute = Math.floor(time / 60)var second = Math.floor(time) % 60// 调用补零函数return padLeft(minute) + ":" + padLeft(second)
}module.exports = {formatDate: formatDate
}
<wxs module="format" src="/utils/format.wxs"></wxs><view>{{ format.formatDate(230) }}</view>
<view>{{ format.formatDate(160) }}</view>