uniapp前端页面

Uniapp 前端页面开发指南

Uniapp 是一个基于 Vue.js 的跨平台开发框架，可用于快速构建多端应用（H5、小程序、App 等）。以下是一些关键开发方法和注意事项：

页面结构与路由配置

在 pages.json 中配置页面路由，支持原生导航栏自定义：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ]
}

页面生命周期

Uniapp 支持 Vue 生命周期，同时扩展了应用级生命周期：

export default {
  onLoad() {},    // 页面加载
  onShow() {},    // 页面显示
  onReady() {},   // 页面初次渲染完成
  onHide() {},    // 页面隐藏
  onUnload() {}   // 页面卸载
}

组件使用规范

全局组件需在 main.js 注册：

import customComponent from '@/components/custom.vue'
Vue.component('custom', customComponent)

样式处理技巧

使用 rpx 单位实现自适应布局：

.container {
  width: 750rpx;  /* 相当于100%屏幕宽度 */
  font-size: 32rpx;
}

跨平台兼容方案

通过条件编译处理平台差异：

// #ifdef H5
console.log('仅在H5环境执行')
// #endif

性能优化建议

1. 避免在 data 中放置过大对象
2. 使用 v-if 替代 v-show 控制大组件显示
3. 合理使用 onReachBottom 实现分页加载

调试工具推荐

1. H5端：浏览器开发者工具
2. 小程序端：对应开发者工具
3. App端：HBuilderX 真机调试

常见问题解决

页面白屏时检查：

1. 路由路径是否正确
2. 是否使用了未注册的组件
3. 是否存在语法错误

扩展能力集成

通过 uni.xxx API 调用原生功能：

uni.chooseImage({
  success: function(res) {
    console.log(res.tempFilePaths)
  }
})

实际开发时应根据目标平台特性调整实现方案，Uniapp 官方文档提供了完整的 API 参考和示例代码库。