一文带你快速从0到1了解实战小程序知识点

小程序生命周期

它有四个阶段：

• 创建阶段
• 响应阶段
• 销毁阶段
• 重启阶段

生命周期： 它是指一个程序从启动到关闭这一过程中产生的一些列事件的总和.

小程序生命周期分为 ： 页面周期 + 组件周期

生命周期加载过程

1. 小程序首次启动后，首次加载页面会触发 onLoad 事件
2. 当页面显示的时候，会加载 onShow 事件
3. 如果这个页面是首次渲染完成，会接着触发 onReady 事件
4. 如果 小程序切换到后台，页面就会被隐藏的同时 会触发 onHide 事件 ，下次切换到前台时， 会再次出发 onShow 事件
5. 最后，当页面会回收销毁时，会触发 onUnload 事件

小程序 生命周期事件

onLoad 事件

onLoad 事件在小程序加载完成后发生，该事件通常用于初始化小程序的数据和配置。例如，你可以在 onLoad 事件中使用 JavaScript 对象来获取用户的数据，或者将数据加载到小程序中。

onShow 事件

onShow 事件在小程序显示时发生，该事件通常用于显示小程序的界面和功能。例如，你可以在 onShow 事件中启动小程序的功能或者打开小程序的界面。

onHide 事件

o nHide 事件是小程序的一种隐藏事件，当小程序被用户隐藏或者关闭时，该事件会被触发。通常，你可以在 onHide 事件中处理小程序的隐藏逻辑，例如保存用户数据或者关闭小程序的界面等。

需要注意的是，小程序的 onHide 事件不会在用户手动关闭小程序时触发，只会在小程序被自动隐藏或者关闭时触发。

onReady 事件

onReady 事件在小程序准备好渲染时发生，该事件通常用于渲染小程序的界面和数据。例如，你可以在 onReady 事件中使用 JavaScript 对象来渲染小程序的界面和数据。

注意事项：

• 在 onReady 事件中渲染界面和数据时，请确保数据已经被正确加载和准备就绪。
• 如果小程序在准备时遇到了错误，则 onReady 事件可能不会触发，并且小程序将无法正常运行。

onUnload 事件

1. onUnload 事件在小程序退出时发生，该事件可以用于清理小程序的数据和配置。例如，你可以在 onUnload 事件中删除小程序的缓存或者关闭小程序的界面。

注意事项：

• 在 onUnload 事件中删除小程序的缓存时，请确保缓存已经被正确清理。
• 如果小程序在退出时遇到了错误，则 onUnload 事件可能不会触发，并且小程序将无法正常运行。

小程序配置

全局配置

由于小程序的配置属性很多，可以 记住 这 3 个 核心配置，后期需要配置什么，看文档即可.

• 页面路由配置 pages 属性配置
• 窗口表现配置 windows 属性配置
• 底部标签导航配置 tabBar 属性配置

页面配置

除了全局配置外，小程序还可以通过 页面的 json 来进行配置，它只能配置 window 属性，也就是 页面的窗口表现。

页面配置优先级高于全局配置。

小程序架构

小程序是 混合开发模式 （Hybrid），小程序主要由 Web技术渲染 + 客户端原生能力封装成接口 供开发这调用，并通过双线程模型分离 界面渲染 和 逻辑处理。

小程序的架构分为 3 层：

• 逻辑层
• 渲染层
• 系统层

小程序一些常用 api

模块化

通过抽离一些公共的代码封装成一个 js 文件，然后 通过 module.exports 或者 exports 导出，在使用模块化文件时，可以通过 require 引入 该文件即可。

模块只能 通过 module.exports 或者 exports 才能对外暴露接口

// common.js
function getInfo(name) {
    console.log(`测试 ------- ${name}`)
}


module.exports = {
    getInfo
}


exports.getInfo = getInfo 

//test.js
const common = require("../../utils/common")


onLoad: function (options) {
 console.log(this.route)
 common.getInfo('你好👋')
},

小程序 API 分类

小程序API 它有很多，大体上，它分为 ：

• 事件监听类
• 同步执行类
• 异步执行类

小程序事件

它分为 冒泡事件 和 非冒泡事件

• bindtap 冒泡点击事件
• catchap 阻止冒泡点击事件

定义事件参数

在wxml 中 要给事件传入参数，它相对Vue / React 是不一样的，通过 data- 开头定义参数，然后在事件中获取参数可以 通过 event.currentTarget.dataset.

连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。

//wxml
<button bindtap="handToPage" data-store-info="2">
  测试
</button>

  handToPage(e){
    console.log(e.currentTarget.dataset.storeInfo)  //获取参数
  }

小程序 WXSS

样式导入

通过 import 导入 外链样式表

@import "common.wxss"

自定义组件

创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。需要配置 .json 开启自定义组件

{
  "component": true
}

1. 通过在 components 下创建 组件

1. 然后在页面中使用时，通过配置，页面.json 的 usingComponents 来注册组件，注册是以 key-value 方式。 key 为组件名， value 为组件路径

1. 最后直接在页面中使用即可

<detail-form></detail-form>

Component 构造器

Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  
  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

自定义引入组件两种方式

• 局部引入

在页面的.json 下注册即可

• 全局引入

在app.json 中注册

自定义组件样式

它可以在 Component 中 的 externalClasses 属性来配置 样式作用域。

样式作用域分类;

• （1）当值为isolated，则为开启样式隔离
• （2）若为apply-shared，父影响子，即页面的样式可以影响到组件，但是组件不能影响组件外的样式。
• （3）若为shared父子影响，为双向影响

使用自定义组件样式流程

1. 通过在 子组件中 Component 中 定义 externalClasses 样式作用域范围，以及自定义样式的 class 类名

Component({
    options:{
      multipleSlots:true,
      styleIsolation:"apply-shared"  //开启自定义样式 作用域范围
    },
    externalClasses:["cell-class"], //可以定义多个，
})

1. 然后在子组件页面中使用 定义的class 类名

<view class="cell-class main-container">
    测试自定义组件
</view>

1. 在页面中使用组件，传入自定义的class 就可以影响到组件的样式了

key 必须和 组件中 定义的类型名保持一致， 然后传入自定义类名 value，就可以影响到组件的样式了

<!--  页面 -->


<detail-form cell-class="body-container"></detail-form>

注意：

• 不要使用 id 选择器

自定义组件 - 插槽

它跟Vue / React 一样有插槽的功能，但是小程序 插槽比较拉胯，没有插槽作用域，插槽不可以传递值 。

默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，需要在 js 中 声明

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

定义插槽

<!--  wxml -->
<slot></slot>   <!--  默认插槽 -->
<slot name="button"></slot>  <!--  具名插槽 -->

<slot name="personInfo"></slot>

使用插槽

<detail-form cell-class="body-container" model:content="{{str}}" >
  <view>
    默认插槽
  </view>
  <view slot="button">
    <button>测试插槽</button>
  </view>

  <view slot="personInfo">
    <button>个人信息插槽</button>
  </view>
</detail-form>

组件生命周期

生命周期方法可以直接定义在 Component 构造器的第一级参数中。

组件的的生命周期 在 lifetimes 字段内进行声明 【官方推荐，优先级高】

组件生命周期 有 3 个重要的生命周期

• created

这个生命周期只应该用于给组件 this 添加一些自定义属性字段， 不能进行 setData 更新属性的value

• attached

大多数初始化工作可以在这个时机进行 ，可以理解为 mounted

• detached

Component({
  lifetimes: {
    created(){
      
    }
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
})

组件监听属性变化

组件通过 observers 来监听 属性变化，它和Vue watch 差不多用法，只是没有 deep， immediate 属性。

    observers:{
        'content': function(val){
            console.log(val)
            console.log("执行了监听")
        }
    },

一次监听多个属性写法：

用逗号隔开

observers:{
    'content,dataInfo': function(content,dataInfo){
        console.log(content,dataInfo)
        console.log("执行了监听")
    }
},

小程序双向绑定

在小程序中，普通的属性的绑定是单向的，想要达到响应式绑定需要在绑定的value前加 model:

直接 this.data.value 修改不会改变值

<input model:value="{{str}}"/>

双向绑定限制

1. 只能绑定单一的字段
2. 不能绑定深层data属性

自定义组件绑定

1. 组件通过在 Component 中 properties 中定义属性

// 组件
Component({
    properties: {
        title: String,
        content:String,
    },
})

1. 组件在 wxml 中，给 input 加上 model:value = {{ 定义的属性 }}

<!--  组件 -->

<input model:value="{{content}}"/>

1. 最后在 页面中传递值 model:组件中定义的属性= {{ 绑定的值 }}

<detail-form cell-class="body-container"   model:content="{{str}}" title="测试传入自定义属性"></detail-form>

😜 : 自定义组件还可以自己触发更新 定义的属性， 可以通过 setData 更新