小程序day6

一，生命周期

生命周期是指一个对象从创建——>运行——>销毁的整个阶段，强调的是一个时间段

1：生命周期分类

a:应用生命周期

        特指小程序从  启动  ->  运行  ->  销毁 的过程

b:页面生命周期

        特指小程序中，每个页面的  加载  ->  渲染  ->  销毁 的过程

2：生命周期函数

生命周期函数;指小程序框架提供的内置函数，伴随着生命周期，自动按次序执行

允许在特定的时间点，执行某些特定的操作

生命周期强调的是时间段，生命周期函数强调的是时间点

生命周期函数分类：

a:应用生命周期函数

        特指小程序从  启动  ->  运行  ->  销毁期间依次调用的那些函数

b:页面生命周期函数

        特指小程序中，每个页面的  加载  ->  渲染  ->  销毁期间调用的那些函数

一：应用的生命周期函数

        小程序的应用生命周期函数需要在app.js中进行声明

// app.js

App({

  // 小程序初始化完成时，执行此函数，全局指触发一次，可以做一些初始化工作

          onLaunch() {

                    console.log("触发初始化");

          },

  // 小程序启动，从后台进入前台时触发

          onShow(){

                    console.log("触发");

          },

  // 从前台进入后台时触发

          onHide(){

                    console.log("触发");

          }

})

二：页面的生命周期函数

         小程序的页面生命周期函数需要在各个页面的.js中进行声明

Page({

  // 监听页面加载

          onLoad(){

            console.log('加载');

          },

  // 监听页面显示

          onShow(){

            console.log('显示');

          },

  // 监听页面初次完成渲染，一个页面只调用一次

          onReady(){

            console.log('渲染');

          },

  // 监听页面隐藏

          onHide(){

            console.log('隐藏');

          },

  // 监听页面卸载，一个页面只调用一次

          onUnload(){

            console.log('卸载');

          }

})

二，wxs脚本

wxs是小程序独有的一套脚本语言，wxml中无法调用在页面.js中定义的函数，但是wxml中可以调用wxs中定义的函数，应用在过滤器中。

1：wxs有自己的数据类型

        numder 数值        string字符串        boolen布尔值        object对象类型

        funtion函数类型        array数组        date日期        regexp正则

2：wxs不支持es6及以上的语法

        不支持：let，const，解构赋值，展开运算符，箭头函数，对象属性简写

        支持：var定义变量，普通的function函数

3：wxs遵循CommonJS规范

        module对象

        require()函数

        module.exports对象

wxs的基本用法

内联wxs脚本

wxs代码可以编写在wxml文件中的<wxs>标签内，就像JavaScript写在html中的<script>标签一样

但是每个<wxs>标签必须提供module属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员

列：内联wxs脚本

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

<wxs module="m1">

        module.exports.toUpper=function(str){

                  return str.toUpperCase()

        }

</wxs>

外联wxs脚本

wxs代码也可以写在以.wxs为后缀的文件内，就像js代码写在.js文件内一样

列：外联wxs脚本

//.wxs文件中

function toLower(str) {

        return str.toLowerCase()

}

module.exports = {

        toLower:toLower

}

在wxml文件中引入

必须为<wxs>标签添加module和src属性

：module用来指定模块名称

：src用来指定要引入脚本的相对路径

列

//在wxml中引入

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

<wxs src=''相对路径" modul="m2"></wsx>