二十二.wxs模块

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>

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

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

<wxs src="" module="info"/>

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