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.wxs

function 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>