uniapp实战开发
uniapp实战开发基础
环境搭建 安装HBuilderX作为开发工具，确保Node.js环境已配置。创建项目时选择uni-app模板，支持多端发布（微信小程序、H5、App等）。
项目结构
pages目录存放页面文件，每个页面由.vue文件、js、json和wxss组成。static存放静态资源。manifest.json配置应用名称、图标等全局信息。App.vue为根组件，main.js为入口文件。
多端适配技巧
条件编译 通过注释语法实现不同平台的代码区分，例如微信小程序专属逻辑：
// #ifdef MP-WEIXIN
console.log('微信小程序特有API');
// #endif样式适配
使用rpx单位自动适配屏幕，避免固定像素。通过uni.getSystemInfoSync()获取设备信息动态调整布局。
常用组件与API
基础组件
<view>替代HTML的<div><text>替代<span><navigator>实现路由跳转，支持uni.navigateTo等API
扩展组件
<uni-card>：卡片组件（需从uni-ui库引入）<uni-icons>：图标库<scroll-view>：可滚动视图区域
数据管理与请求
状态管理
简单场景可使用globalData：
// main.js
App({
globalData: { userToken: '' }
})复杂项目建议引入pinia：
// stores/user.js
export const useUserStore = defineStore('user', {
state: () => ({ token: null })
})网络请求
封装uni.request：
const request = (url, method = 'GET') => {
return new Promise((resolve) => {
uni.request({
url: 'https://api.example.com' + url,
method,
success: (res) => resolve(res.data)
})
})
}性能优化方案
图片处理
- 使用CDN路径替代本地大图
- 实现懒加载：
<image lazy-load> - 压缩工具处理静态资源
代码优化
- 分包加载：在
pages.json中配置subPackages - 按需引入组件，避免全局注册
- 使用
v-if替代v-show减少初始渲染压力
调试与发布
真机调试
- 微信小程序：使用开发者工具预览
- App端：通过HBuilderX生成调试包
- H5：直接浏览器访问
发布流程
- 小程序：在
manifest.json配置AppID后发行 - App：生成证书后打包原生应用
- H5：部署到Web服务器
常见问题解决
白屏问题
检查路由是否在pages.json注册，或排查网络请求阻塞。
样式失效
- 检查是否使用了不支持的选择器
- 添加
!important强制覆盖 - 使用
scoped避免样式污染
跨端兼容
- 通过
uni.getSystemInfo()区分平台 - 使用
uni.upx2px()转换单位 - 测试各端事件绑定差异（如
click与tap）
