二十二.wxs模块

小灰灰 2023-07-09 02:22 27阅读 0赞

# wxs模块 #

> wxs(WeiXin Script) 是小程序的一套脚本语言, 结合WXML, 可以构建出页面的结构.

## 一.设计wxs语言的目的 ##

1.  在wxml中是不能直接调用Page/Component中定义的函数的.
2.  但是某些情况, 我们可以希望使用函数来处理wxml中的数据(类似vue中的过滤器), 这个时候就用上wxs了.

## 二.wxs使用的限制和特点 ##

1.  wxs的运行环境和其他JavaScript代码是隔离的, wxs不能调用其他JavaScript文件中定义的函数, 也不能调用小程序提供的API.
2.  WXS函数不能作为组件的事件回调.
3.  由于运行环境的差异,在IOS设备上小程序的wxs会比JavaScript代码快2~20倍, 在Android上二者运行效率无差异.

## 三.wxs的定义方式 ##

> 里边不能写ES6的语法, 例如let/const

1.  直接在wxml中定义

<wxs module="info">
    	//js代码
        var message="hello world",
        var name="yi";
        var sur=function(num1,num2){
        	return num1 + num2
        }
        //模块导出写法
        module.exports = {
        	message: message,
        	name: name,
        	sum: sum
        }
    </wxs>
    
    <view>{
       {info.message}}</view>
    <view>{
       {info.sum(20, 30)}}</view>

1.  定义在单独的wxs文件中, 再使用标签进行导入

\*\*不能使用绝对路径, 必须使用相对路径 \*\*

## 四. wxs的应用 ##

//format.wxs
    function priceFormat(price, number){
    	//判断一下用户是否传入数字
    	var number = number || 2;
    	//取小数点后几位数字
    	return price.toFixed(number);
    }
    
    //导出
    module.exports = {
    	priceFormat: priceFormat
    }

//只能使用相对路径
    <wxs src="../../format.wxs" module="format"></wxs>
    <view>{
       {format.priceFormat(price)}}</view>