微信小程序开发4

一、WXS脚本-概述

1.1、什么是wxs

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

1.2、wxs的应用场景

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

1.3、wxs和JavaScript的关系

虽然wxs的语法类似于JavaScript，但是wxs和JavaScript是完全不同的两种语言：
1 wxs有自己的数据类型
        number数值类型  string字符串类型  boolean布尔类型  object对象类型
        function函数类型  array数组类型  date日期类型  regexp正则
2 wxs不支持类似于ES6及以上的语法形式
        不支持：let、const、结构赋值、展开运算符、箭头函数、对象属性简写...
        支持：var定义变量、普通function函数等类似于ES5的语法
3 wxs遵循CommonJS规范
        module对象、require()函数、module.exports对象er

二、WXS脚本-基本语法

2.1、内嵌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>

2.2、自定义外联的wxs脚本

wxs代码还可以编写以.wxs为后缀名的文件内，就像javascript代码可以编写在以.js为后缀名的文件中一样，
示例代码如下：
function toLower(srt){
  return String.toLowerCase()
}
module.exports={
  toLower:toLower
}

2.3、使用外联的wxs脚本

在wxml中引入外联的wxs脚本时，必须为<wxs>标签添加module和src属性，其中：
module用来指定模块的名称
src用来指定要引入的脚本的路径，且必须是相对路径
示例代码如下：
<view>{{m2.toLower(country)}}</view>
<wxs src="../index/index.wxs" module="m2"></wxs>

三、WXS脚本-WXS的特点

3.1、与JavaScript不同

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

3.2、不能作为组件的事件回调

wxs典型的应用场景就是”过滤器“，经常配合Mustache语法进行使用，例如：
<view>{{m2.toLower(country)}}</view>
但是，在wxs中定义的函数不能作为组件的事件回调函数，例如，下面的用法是错误的：
<button bindtap="m2.toLower">按钮</button>

3.3、隔离性

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

3.4、性能好

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

四、自定义组件-组件的创建与引用

4.1、创建组件

1 在项目的根目录中，鼠标右键，创建components->test文件夹
2 在新建的components->test文件夹，鼠标右键，点击”新建Component“
3 输入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为.js,.json,.wxml和.wxss
注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中

4.2、引用组件

组件的引用方式为”全局引用“和”局部引用“，顾名思义：
局部引用：组件只能在当前被引用的页面内使用
全局引用：组件可以在每个小程序页面中使用

4.3、局部引用组件

在页面的.json配置文件中引用组件的方式，叫做”局部引用“，示例代码如下：
// 在页面的.json文件中，引入组件
{
  "usingComponents": {
    "my-test1":"/components/test/test"
  }
}
// 在页面的.wxml文件中，使用组件
<my-test1></my-test1>

4.4、全局引用组件

在app.json全局配置文件中引用组件的方式，叫做”全局引用“，示例代码如下：
// 在app.json文件中，引入组件
{
  "usingComponents": {
    "my-test1":"/components/test/test"
  }
}
// 在页面的.wxml文件中，使用组件
<my-test1></my-test1>

4.5、全局引用VS局部引用

根据组件的使用频率和范围，来选择合适的引用方式：
如果某组件在多个页面中经常被用到，建议进行”全局引用“
如果某组件只在特定的页面中被用到，建议进行”局部引用“

4.6、组件和页面的区别

从表名来看，组件和页面都是由.js,.json,.wxml和wxss这四个文件组成，但是，组件和页面的.js
与.json文件有明显的不同：
组件的.json文件中需要声明:component":ture属性
组件的.js文件中调用的是Component()函数
组件的事件处理函数需要定义到methods节点中

五、自定义组件-样式

5.1、组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构
好处：
        1 防止外界的样式影响组件内部的样式
        2 防止组件的样式破坏外界的样式

5.2、组件样式隔离的注意点

app.wxss中的全局样式对组件无效
只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响
建议：在组件和引用组件的页面中建议使用class选择器，不要使用id、属性、标签选择器

5.3、修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题，但有时，我们希望在外界能
够控制组件内部的样式，此时，可以通过styleIsolation修改组件的样式隔离选项，用法如下：
// 在组件的.js文件中新增如下配置
Component({
  options:{
    styleIsolation:'isolated'
  },
})
// 或组件的.json文件中新增如下配置
{"styleIsolation":"isolated"}

5.4、styleIsolation的可选值

可选值         默认值     描述
isolated        是      表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会互相影响
apply-shared    否      表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响页面
shared          否      表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和
                        其他设置了apply-shared或shared的自定义组件

六、自定义组件-数据、方法和属性

6.1、data数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到data节点中，示例如下：
Component({
    data:{
        count:0
    }
})

6.2、methods方法

在小程序组件中，事件处理函数和自定义方法需要定义到methods节点中，示例代码如下：
Component({
    methods:{   // 数组的方法列表[包含事件处理函数和自定义方法]
        addCount(){ // 事件处理函数
            this.setData({count:this.data.count+1})
            this.__showCount()  // 通过this直接调用自定义方法
        },
        __showCount(){  // 自定义方法建议以__开头
            wx.showToast({
                title:'count值为'+this.data.count,
                icon:'none'
            })
        }
    }
})

6.3、properties属性

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下：
Component({
    // 属性定义
    properties:{
        max:{   // 完整定义属性的方式[当需要指定属性默认值时，建议使用此方式]
            type:Number,    // 属性值的数据类型
            value:10    // 属性默认值
        },
        max:Number  .. 简化定义属性的方式[不需要指定默认值时，可以使用简化方式]
    }
})
<my-test1 max="10"></my-test1>

6.4、data和properties的区别

在小程序的组件中，properties属性和data数据的用法相同，它们都是可读可写的，只不过：
data更倾向于存储组件的私有数据
properties更倾向于存储外界传递到组件中的数据
Component({
    methods:{
        showInfo(){
            console.log(this.data)  // 输出结果{count:0,max:10}
            console.log(this.properties)    // 输出结果{count:0,max:10}
            // 结果为true，证明data数据和properties属性[在本质上是一样的，都是可读可写的]
            console.log(this.data===this.properties)
        }
    }
})

6.5、使用setData修改properties的值

由于data数据和properties属性在本质上没有任何区别，因此properties属性的值也可以用于页面渲染，
或使用setData为properties中的属性重新赋值，示例代码如下：
// 在组件的.wxml文件中使用properties属性的值
<view>max属性的值为：{{max}}</view>
Component({
    properties:{max:Number},    // 定义属性
    methods:{
        addCount(){
            this.setData({max:this.properties.max+1})   // 使用setData修改属性的值
        }
    }
})

七、自定义组件-数据监听器

7.1、什么是数据监听器

数据监听器用于监听和相应任何属性和数据字段的变化，从而执行特定的操作，它的作用类似于vue中的
watch监听器，在小程序组件中，数据监听器的基本语法格式如下：
Component({
    observers:{
        '字段A，字段B':function(字段A的新值，字段B的新值){
            // do something
        }
    }
})

7.2、数据监听器的基本用法

组件的UI结构如下：
    <view>{{n1}}+{{n2}}={{sum}}</view>
    <button size="mini" bindtap="addN1">n1自增</button>
    <button size="mini" bindtap="addN2">n2自增</button>
组件的.js文件代码如下：
    Component({
      data:{n1:0,n2:0,sum:0},
      methods:{ // 方法列表
        addN1(){this.setData({n1:this.data.n1+1})},
        addN2(){this.setData({n2:this.data.n2+1})}
      },
      observers:{ // 数据监听节点
        'n1,n1':function(n1,n2){  // 监听n1和n2的数据的变化
          this.setData({sum:n1+n2}) // 通过监听器，自动计算sum的值
        }
      },
    })

7.3、监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化，示例语法如下：
Component({
    observers:{
        '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){
            // 触发此监听器的3种情况：
            // [为属性A赋值]使用setData设置this.data.对象.属性A时触发
            // [为属性B赋值]使用setData设置this.data.对象.属性B时触发
            // [直接为对象赋值]使用setData设置this.data.对象时触发
            // do something...
        }
    }
})

八、自定义组件-纯数据字段

8.1、什么是纯数据字段

概念：纯数据字段指的是那些不用于界面渲染的data字段
应用场景：例如有些情况下，某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前
组件内部使用，带有这种特性的data字段适合被设置为纯数据字段
好处：纯数据字段有助于提升页面更新的性能

8.2、使用规则

在Component构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则
表达式的字段将成为纯数据字段，示例代码如下：
Component({
    options:{
        // 指定所有__开头的数据字段为纯数据字段
        pureDataPattern:/^_/
    },
    data:{
        a:true,   // 普通数据字段
        __b:ture,   // 纯数据字段
    }
})

九、自定义组件-组件的生命周期

9.1、组件全部的生命周期函数

小程序组件可用的全部生命周期如下表所示：
生命周期函数  参数              描述说明
created     无               在组件实例刚刚被创建时执行
attached    无               在组件实例进入页面节点树时执行
ready       无               在组件在视图层布局完成后执行
moved       无               在组件实例被移动到节点树另一个位置时执行
detached    无               在组件实例被从页面节点树移除时执行
error       Object Error    每当组件方法抛出错误时执行

9.2、组件主要的生命周期函数

在小程序组件中，最重要的生命周期函数有3个，分别是created,attached,detached它们各自的特点如下：
1 组件实例刚被创建好的时候，created生命周期函数会被触发
    此时还不能调用setData
    通常在这个生命周期函数中，只应该用于组件的this添加一些自定义的属性字段
2 在组件完全初始化完毕、进入页面节点树后，attached生命周期函数会被触发
    此时，this.data已被初始化完毕
    这个生命周期很有用，绝大数初始化的工作可以在这个时机进行(例如发请求获取初始数据)
3 在组件离开页面节点树后，detached生命周期函数会被触发
    退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数
    此时适合做一些清理性质的工作

9.3、lifetimes节点

在小程序组件中，生命周期函数可以直接定义在Component构建器的第一级参数中，可以在lifetimes字段
内进行声明(这是推荐的方式，其优先级最高)，实例代码如下：
Component({
    // 推荐用法
    lifetimes:{
        attached(){},   // 在组件实例进入页面节点树时执行
        detached(){},   // 在组件实例被从页面节点移除时执行
    },
    // 以下是旧式定义方法
    attached(){},   // 在组件实例进入页面节点树时执行
    detached(){},   // 在组件实例被从页面节点移除时执行
})

十、自定义组件-组件所在页面的生命周期

10.1、什么是组件所在页面的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期
例如：每当触发页面的show生命周期函数的时候，我们希望能够重新生成一个随机的RGB颜色值
在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是：
生命周期函数  参数              描述
show        无               组件所在的页面被展示时执行
hide        无               组件所在的页面被隐藏时执行
resize      Object Size     组件所在的页面尺寸变化时执行

10.2、pageLifetimes节点

组件所在页面的生命周期函数，需要定义在pageLifetimes节点中，实例代码如下：
Component({
    pageLifetimes:{
        show:function(){},  // 页面被展示
        hide:function(){},  // 页面被隐藏
        resize:function(){} //页面尺寸变化
    }
})

10.3、生成随机的RGB颜色值

Component({
    methods:{
        // 生成随机RGB颜色的方法，非事件处理函数建议以_开头
        _randomColor(){
            this.set({  // 为data里面的_rgb纯数据字段重新赋值
                _rgb:{
                    r:Math.floor(Math.random()*256),
                    g:Math.floor(Math.random()*256),
                    b:Math.floor(Math.random()*256)
                }
            })
        }
    },
    pageLifetimes:{
        // 组件所在的页面被展示时，立即调用_randomColor生成随机颜色值
        show:function(){
            this._randomColor()
        }
    }
})