微信小程序 wxs

wxs脚本特点：

• 借鉴了大量js语法，但是与js不同，是两种语言。
• 不能作为组件的事件回调

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

      {{m1.toUpper('wsm')}}

  2. 不能作为组件的事件回调。例如： ( 错误 ) !!!!!!

       转换大小写

• 隔离性：wxs的运行环境与其他js代码是隔离的

  1. wxs不能调用js中定义的函数

  2. wxs不能调用小程序提供的API

• 性能好

  1. ios设备上，小程序内的 wxs 比js 代码快 2-20 倍

  2. Android设备上，运行效率无差异

局部定义 + 使用

// 创建 a.wxml 文件

// a.wxml文件中，创建局部使用的wxs方法，用wxs标签包裹，module定义名称(重点 + 注意)！！


    module.exports.toUpper = function (value) {
        return value.toUpperCase()
    }


// 调用方法：module定义的名称(m1).方法名。 
// 局部定义的局部（当前页面）使用，无法全局引入使用

{{m1.toUpper('wsm')}}

全局定义 + 使用

1. 创建.wxs全局文件（在util文件夹下）。注意事项如下图：

   // 注意事项：
   // 1. wxs不支持es6等写法，如：let、解构、箭头函数等
   // 2. 只能使用 var， function 基本写法（es5）
   // 全局 wxs 方法
   function toLowerCase(val){
       return val.toLowerCase()
   }
   // 用 module.exports 导出
   module.exports={
       toLowerCase:toLowerCase// 不支持简写
   }

2. 在引用页面，外联引入需要使用的.wxs文件地址。依旧用module='a'命名【调用时：(此名称)a.方法 即可 】

//调用：m2.方法
{{m2.toLowerCase('ADD_Url')}}

// 引入全局wxs:
    // 1.引入外联wxs_gloable.wxs脚本
    // 2. 用module指定名称,使用(名称)m2.方法调用 --（与局部(页面中)定义的一样，都需要指定名称)