uniapp页面示例
uniapp页面示例
以下是一个简单的uniapp页面示例，包含基本结构和常用功能：
页面结构示例
<template>
<view class="container">
<text class="title">{{title}}</text>
<button @click="changeTitle">修改标题</button>
<image src="/static/logo.png" mode="aspectFit"></image>
</view>
</template>
<script>
export default {
data() {
return {
title: '欢迎使用uniapp'
}
},
methods: {
changeTitle() {
this.title = '标题已修改'
uni.showToast({
title: '操作成功',
icon: 'success'
})
}
},
onLoad() {
console.log('页面加载')
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.title {
font-size: 20px;
color: #333;
margin-bottom: 20px;
}
</style>页面路由示例
// 页面跳转方法示例
uni.navigateTo({
url: '/pages/detail/detail?id=1'
})
// 接收参数示例
onLoad(options) {
console.log('页面参数:', options.id)
}常用API示例
// 显示加载提示
uni.showLoading({
title: '加载中'
})
// 发起网络请求
uni.request({
url: 'https://example.com/api',
success: (res) => {
console.log(res.data)
}
})
// 获取设备信息
uni.getSystemInfo({
success: (res) => {
console.log(res.model)
console.log(res.platform)
}
})生命周期示例
export default {
onLoad() {}, // 页面加载
onShow() {}, // 页面显示
onReady() {}, // 页面初次渲染完成
onHide() {}, // 页面隐藏
onUnload() {} // 页面卸载
}组件通信示例
// 子组件触发事件
this.$emit('customEvent', {data: 'value'})
// 父组件监听事件
<child-component @customEvent="handleEvent"></child-component>样式注意事项
- 使用rpx单位适配不同屏幕
- 避免使用浏览器专有前缀
- 支持vue的单文件组件样式作用域
以上示例展示了uniapp页面的基本结构和常用功能，可根据实际需求进行扩展和修改。
