微信小程序开发之wxs脚本

1.在开发微信小程序的过程中，我们经常需要在wxml中对数据做一些判断，对于简单的判断直接可以用比较运算符来完成，当在逻辑稍微复杂的情况下，我们则需要借助wxs来帮助我们来实现对应的功能。

2.WXS 脚本

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

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

wxs 和 JavaScript 的关系，虽然 wxs 的语法类似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的两种语言：

wxs 有自己的数据类型

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

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

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

wxs 遵循 CommonJS 规范

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

3. 基础语法

内嵌 wxs 脚本

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

<view>{{m1.toUpper(username)}}</view>

<wxs module="m1">
  module.exports.toUpper = function(str) {
    return str.toUpperCase()
  }
</wxs>

定义外联的 wxs 脚本

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

function toLower(str) {
  return str.toLowerCase()
}

module.exports = {
  toLower: toLower
}

使用外联的 wxs 脚本

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

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

<view>{{m2.toLower(country)}}</view>

<wxs src="../../utils/tools.wxs" module="m2"></wxs>

4.WXS 的特点

1.与 JavaScript 不同：本质上，wxs 和 JavaScript 是完全不同的两种语言！

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

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

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

3.隔离性：隔离性指的是 wxs 的运行环境和其他 JavaScript 代码是隔离的。体现在如下两方面：

• wxs 不能调用 js 中定义的函数
• wxs 不能调用小程序提供的 API

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

5.案例

比如当我们在wxml中要判断某个数组里面是否含有某一项，我们直接使用会报错

// 错误代码(includes 与 inexof在这里面使用都不支持，报错)
 <image id= "leftImage" src='../../assert/word.png' wx:if='{{item.includes('.png')}}'></image>
<image id= "leftImage" src='../../assert/word.png' wx:if='{{item.indexof('.png') > 0}}'></image>

这个时候就用到了wxs

<view wx:if="{{path.length}}">
    <view id="fileUpload" wx:for="{{path}}" wx:key="index">
        <image id= "leftImage" src='../../assert/word.png' wx:if='{{foo.getFullPath1(item)}}'></image>
        <image id= "leftImage" src='../../assert/excel.png'  wx:if='{{foo.getFullPath2(item)}}'></image>
        <image id= "leftImage" src='../../assert/PDF.png'  wx:if='{{foo.getFullPath3(item)}}'></image>
        <image id= "leftImage" src='../../assert/PPT.png' wx:if='{{foo.getFullPath4(item)}}'></image>
        <view id='centerContent'>{{ name[index] }}</view>
        <view id='rightBtn'>
            <view  bindtap="delete" data-index="{{index}}" wx:if="{{only != 0}}">删除</view>
            <view bindtap="downLoad" data-item="{{item}}">下载</view>
        </view>
        
    </view>
// 内部嵌入，不能使用es6以上的语法
<wxs module='foo'>
          function getFullPath1(item) {
              return item.indexOf('.doc')>-1
          }
          function getFullPath2(item) {
              return item.indexOf('.xls')>-1 || item.indexOf('.xlsx')>-1
          }
          function getFullPath3(item) {
              return item.indexOf('.pdf')>-1
          }
          function getFullPath4(item) {
              return item.indexOf('.ppt')>-1
          }
          module.exports = {
            getFullPath1:getFullPath1,
            getFullPath2:getFullPath2,
            getFullPath3:getFullPath3,
            getFullPath4:getFullPath4
          }
</wxs>