【小程序】中WXS的语法详解

约定不等于承诺〃 2024-04-27 15:55 69阅读 0赞

#### 文章目录 ####

*   *  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>`标签的属性**：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">module</td> 
   <td align="left">String</td> 
   <td align="left">当前 <code>&lt;wxs&gt;</code> 标签的模块名。<font>必填字段</font>。</td> 
  </tr> 
  <tr> 
   <td align="left">src</td> 
   <td align="left">String</td> 
   <td align="left">引用 .wxs 文件的相对路径。仅当本标签为<strong>单闭合标签</strong>或<strong>标签的内容为空</strong>时有效。*</td> 
  </tr> 
 </tbody> 
</table>

**方式一: 我们先用`<wxs>`标签来写替代刚刚代码中的js部分**

<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文件中

![在这里插入图片描述][b2fc7fe4cceb44c4af6b92dc7de94440.png_pic_center]

**单独的 .wxs文件中同样不支持ES6的语法, 再在要使用的页面中, 通过`wxs`标签引入 .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>

[b2fc7fe4cceb44c4af6b92dc7de94440.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/f2831405e22c487eb5d66943e7881884.png