当前位置：首页 > wzjs >正文

网站建设流程包括哪些环节网站交互主要做什么的

wzjs 2025/9/19 8:17:19

网站建设流程包括哪些环节,网站交互主要做什么的,html百科网站模板,flex网站模板1. onLoad 触发时机：页面首次加载时触发，且只会触发一次。适用场景：适合在页面加载时执行一次性操作，比如获取页面参数、初始化数据、发送请求等。特点： 可以接收页面传递的参数（通过 options 对象&…

1. `onLoad`

触发时机：页面首次加载时触发，且只会触发一次。
适用场景：适合在页面加载时执行一次性操作，比如获取页面参数、初始化数据、发送请求等。
特点：
- 可以接收页面传递的参数（通过 options 对象）。
- 是 UniApp 页面生命周期钩子，不是 Vue 组件的钩子。

示例代码

javascript

export default {onLoad(options) {console.log('页面加载，参数为:', options);// 初始化数据this.loadData();},methods: {loadData() {console.log('加载数据...');}}
}

2. `onShow`

触发时机：页面显示时触发，包括页面首次加载和从其他页面返回时。
适用场景：适合在页面每次显示时执行操作，比如刷新数据、更新状态等。
特点：
- 无法直接接收参数，但可以通过全局变量或缓存传递数据。
- 是 UniApp 页面生命周期钩子，不是 Vue 组件的钩子。

示例代码

javascript

export default {onShow() {console.log('页面显示');// 刷新数据this.refreshData();},methods: {refreshData() {console.log('刷新数据...');}}
}

3. `mounted`

触发时机：Vue 组件挂载到 DOM 中后触发。
适用场景：适合在组件挂载完成后操作 DOM 或执行依赖 DOM 的逻辑，比如初始化第三方库、获取 DOM 元素等。
特点：
- 是 Vue 组件的生命周期钩子，不是 UniApp 页面的钩子。
- 在 UniApp 中，mounted() 通常用于组件，而不是页面。

示例代码

vue

<template><view><text ref="myText">Hello UniApp</text></view>
</template><script>
export default {mounted() {console.log('组件已挂载');// 操作 DOMconst textElement = this.$refs.myText;console.log('文本内容:', textElement.textContent);}
}
</script>

4. 三者的区别总结

特性	`onLoad`	`onShow`	`mounted`
触发时机	页面首次加载时触发	页面显示时触发（包括首次和返回）	组件挂载到 DOM 后触发
适用对象	UniApp 页面	UniApp 页面	Vue 组件
参数接收	通过 `options` 接收页面参数	无法直接接收参数	无法直接接收参数
使用场景	初始化数据、获取页面参数	刷新数据、更新状态	操作 DOM、初始化第三方库

5. 综合示例

假设我们有一个页面，需要实现以下功能：

页面加载时获取参数并初始化数据。
页面显示时刷新数据。
组件挂载后操作 DOM。

代码实现

vue

<template><view><text ref="myText">{{ message }}</text><button @click="navigateToOtherPage">跳转到其他页面</button></view>
</template><script>
export default {data() {return {message: 'Hello UniApp'};},onLoad(options) {console.log('页面加载，参数为:', options);this.loadData();},onShow() {console.log('页面显示');this.refreshData();},mounted() {console.log('组件已挂载');const textElement = this.$refs.myText;console.log('文本内容:', textElement.textContent);},methods: {loadData() {console.log('加载数据...');// 模拟初始化数据this.message = '数据已加载';},refreshData() {console.log('刷新数据...');// 模拟刷新数据this.message = '数据已刷新';},navigateToOtherPage() {uni.navigateTo({url: '/pages/otherPage/otherPage'});}}
};
</script>