小程序 wxs 超详细(栗子:处理商品价格)

WXS 脚本 - 概述

1.什么是 wxs

WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构。

2.wxs 的应用场景

wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中
wxs 的典型应用场景就是“过滤器”。

3.wxs 和 JavaScript 的关系*

虽然 wxs 的语法类似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的两种语言：
1. wxs 有自己的数据类型

• number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、
• function 函数类型、array 数组类型、 date 日期类型、 regexp 正则

2. wxs 不支持类似于 ES6 及以上的语法形式

• 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
• 支持：var 定义变量、普通 function 函数等类似于 ES5 的语法

3. wxs 遵循 CommonJS 规范

• module 对象
• require() 函数
• module.exports 对象

WXS 脚本 - 基础语法

1. 内嵌 wxs 脚本

wxs 代码可以编写在 wxml 文件中的 <wxs> 标签内，就像 Javascript 代码可以编写在 html 文件中的 <script>
标签内一样。
wxml 文件中的每个 标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在
wxml 中访问模块中的成员：

2. 定义外联的 wxs 脚本

wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名的文件中
一样。示例代码如下：

3. 使用外联的 wxs 脚本

在 wxml 中引入外联的 wxs 脚本时，必须为 标签添加 module 和 src 属性，其中：

• module 用来指定模块的名称
• src 用来指定要引入的脚本的路径，且必须是相对路径

以前必须是相对路径，不过目前绝对路径也没有报错
示例代码如下：

WXS 脚本 - WXS 的特点

1. 与 JavaScript 不同

为了降低 wxs（WeiXin Script）的学习成本， wxs 语言在设计时大量借鉴了 JavaScript 的语法。但是本质上，
wxs 和 JavaScript 是完全不同的两种语言！

2. 不能作为组件的事件回调

wxs 典型的应用场景就是“过滤器”，经常配合 Mustache 语法进行使用，例如：

但是，在 wxs 中定义的函数不能作为组件的事件回调函数。例如，下面的用法是错误的：

3. 隔离性

隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面：
① wxs 不能调用 js 中定义的函数
② wxs 不能调用小程序提供的 API

4. 性能好

• 在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
• 在 android 设备上，二者的运行效率无差异

处理商品价格小数点前后字体大小

filterpPrice.wxs 文件

// 小数点前
function pointBefore(x) {

	var price = x.toString()
	if (price && price.indexOf(".") != -1) {
		return price.substring(0, price.indexOf("."))
	} else {
		return price;
	}
}
// 小数点跟小数点后
function pointAfter(x) {
	if (typeof(x) == 'string') {
		var x = parseFloat(x)
	}
	var price = x.toFixed(2).toString()
	if (price && price.indexOf(".") != -1) {
		return price.substring(price.indexOf("."), price.length)
	} else {
		return ".00";
	}
}

module.exports = {
	pointBefore: pointBefore,
	pointAfter: pointAfter
}

wxml 文件

<view>
  ￥<text class="max">{{m.pointBefore(price)}}</text><text>{{m.pointAfter(price)}}</text>
</view>

<!-- 使用外联的 tools.wxs 脚本，并命名为 m -->
<wxs src="/utils/filterpPrice.wxs" module="m"></wxs>

wxss 与 js

  /** js
   * 页面的初始数据
   */
  data: {
    price: 9.6
  },
  /* wxss */
  view{
    color: #FF4F03;
    font-size: 30rpx;
  }
  .max{
    font-size: 40rpx;
  }

显示结果

补充：如果你报以下错误但显示的结果没有出错可以如下做法

这里说一下我出现这个问题的原因
看下面代码我用的是 noPayOrder.total 导致一开始页面没有拿到 noPayOrder.total 的值,
然后我尝试在wxs打印一下，可见上图出现了undefined就是因为没有拿到值，然后可见下面代码我加了一句 wx:if="{{noPayOrder.total}}" 目的就是确保有这个值

    <view class="right" wx:if="{{noPayOrder.total}}">
    ￥<text class="max">{{m.pointBefore(noPayOrder.total)}}</text>
    <text>{{m.pointAfter(noPayOrder.total)}}</text>
    </view>

参考资料

*如果对你有所不一样的认知提升是否可以留下一点你来过的痕迹*