小程序开发：小程序的wxs的使用

1.为什么会使用到wxs：

        wxs是小程序的一种小程序的脚本语言，结合wxml可以构建页面的结构，其语法类似es5，不支持类似es6以上的语法形式，可以用wxs来编写过滤器；

// wxml中允许这样的书写方式
个人中心
// 涉及到es6的incluedes数组语法，在wxml中是不被允许使用的
个人中心

　　而且wxml中是不能使用函数的，但是如果你要在wxml的页面中使用函数的话，wxs可以做到

2.wxs的使用：

　　可以直接在wxml中直接创建(类似于在html中写js)，也可以在根目录下新建一个util存放，wxs文件后缀是 .wxs。在wxs文件中，直接声明函数就可以了，然后用module.exports导出(类似于单独写一个js文件，然后引入)

（1）书写方式

• 编写在 wxml 文件中的  标签内
• 编写在 以 .wxs 为后缀名的文件内

        每一个 .wxs 文件和  标签都是一个单独的模块。
        每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
        一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

1、文件引入使用方法

文件名：xxx.wxs

var toHide = function (array) {
  var mphone = array.substring(0, 3) + '****' + array.substring(8);
  return mphone;
}
module.exports = {
  toHide,
};

使用引用：

 {{phone.toHide(userInfo.tel)}} 

页面输出：

require函数

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

引用的时候，要注意如下几点：

• 只能引用 .wxs 文件模块，且必须使用相对路径。
• wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

var toHide = require("./tools.wxs");

2、在wxml页面中使用

wxml页面

  var toHide = function (array) {
    var mphone = array.substring(0, 3) + '****' + array.substring(8);
    return mphone;
  }
  module.exports.toHide = toHide;



  联系电话
  {{phone.toHide(userInfo.tel)}}

注意：

• WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
• WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
• WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
• WXS 函数不能作为组件的事件回调。