它有四个阶段:
生命周期: 它是指一个程序从启动到关闭这一过程中产生的一些列事件的总和.
小程序生命周期分为 : 页面周期 + 组件周期
onLoad 事件在小程序加载完成后发生,该事件通常用于初始化小程序的数据和配置。例如,你可以在 onLoad 事件中使用 JavaScript 对象来获取用户的数据,或者将数据加载到小程序中。
onShow 事件在小程序显示时发生,该事件通常用于显示小程序的界面和功能。例如,你可以在 onShow 事件中启动小程序的功能或者打开小程序的界面。
o nHide 事件是小程序的一种隐藏事件,当小程序被用户隐藏或者关闭时,该事件会被触发。通常,你可以在 onHide 事件中处理小程序的隐藏逻辑,例如保存用户数据或者关闭小程序的界面等。
需要注意的是,小程序的 onHide 事件不会在用户手动关闭小程序时触发,只会在小程序被自动隐藏或者关闭时触发。
onReady 事件在小程序准备好渲染时发生,该事件通常用于渲染小程序的界面和数据。例如,你可以在 onReady 事件中使用 JavaScript 对象来渲染小程序的界面和数据。
注意事项:
注意事项:
由于小程序的配置属性很多,可以 记住 这 3 个 核心配置,后期需要配置什么,看文档即可.
除了全局配置外,小程序还可以通过 页面的 json 来进行配置,它只能配置 window 属性,也就是 页面的窗口表现。
页面配置优先级高于全局配置。
小程序是 混合开发模式 (Hybrid),小程序主要由 Web技术渲染 + 客户端原生能力封装成接口 供开发这调用,并通过双线程模型分离 界面渲染 和 逻辑处理。
小程序的架构分为 3 层:
api | desc | |
---|---|---|
this.route | 获取当前所处的页面 | |
getApp() | 获取全局应用实例 | 可以定义全局变量和方法 |
通过抽离一些公共的代码封装成一个 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 它有很多,大体上,它分为 :
它分为 冒泡事件 和 非冒泡事件
在wxml 中 要给事件传入参数,它相对Vue / React 是不一样的,通过 data- 开头定义参数,然后在事件中获取参数可以 通过 event.currentTarget.dataset.
连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。
//wxml
<button bindtap="handToPage" data-store-info="2">
测试
</button>
handToPage(e){
console.log(e.currentTarget.dataset.storeInfo) //获取参数
}
通过 import 导入 外链样式表
@import "common.wxss"
类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。需要配置 .json 开启自定义组件
{
"component": true
}
<detail-form></detail-form>
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 属性来配置 样式作用域。
样式作用域分类;
Component({
options:{
multipleSlots:true,
styleIsolation:"apply-shared" //开启自定义样式 作用域范围
},
externalClasses:["cell-class"], //可以定义多个,
})
<view class="cell-class main-container">
测试自定义组件
</view>
key 必须和 组件中 定义的类型名保持一致, 然后传入自定义类名 value,就可以影响到组件的样式了
<!-- 页面 -->
<detail-form cell-class="body-container"></detail-form>
注意:
它跟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 个重要的生命周期
这个生命周期只应该用于给组件 this 添加一些自定义属性字段, 不能进行 setData 更新属性的value
大多数初始化工作可以在这个时机进行 ,可以理解为 mounted
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}}"/>
// 组件
Component({
properties: {
title: String,
content:String,
},
})
<!-- 组件 -->
<input model:value="{{content}}"/>
<detail-form cell-class="body-container" model:content="{{str}}" title="测试传入自定义属性"></detail-form>
😜 : 自定义组件还可以自己触发更新 定义的属性, 可以通过 setData 更新
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。