uniapp教学笔记
基础概念与开发环境搭建
UniApp是基于Vue.js的跨平台开发框架，支持编译到iOS、Android、H5及小程序。需安装HBuilderX作为官方IDE，提供代码高亮、真机调试等功能。
Node.js环境需预先配置，通过命令行检查版本：
node -v
npm -v 安装Vue CLI扩展：
npm install -g @vue/cli 项目初始化与目录结构
通过HBuilderX新建项目，选择UniApp模板。核心目录说明：
pages：页面组件，需在pages.json中注册路由。static：静态资源（图片、字体等）。manifest.json：应用配置（包名、图标等）。App.vue：根组件，全局样式和生命周期管理。
示例pages.json配置：
{
"pages": [
{"path": "pages/index/index", "style": {"navigationBarTitleText": "首页"}}
]
}组件与API使用
UniApp封装了跨平台组件如<view>、<text>，替代HTML标签。事件绑定遵循Vue语法：
<button @click="handleClick">提交</button> 调用设备API需权限声明。例如获取地理位置：
uni.getLocation({
type: 'wgs84',
success: (res) => console.log(res.latitude, res.longitude)
});样式与适配方案
使用rpx单位实现响应式布局，1rpx≈屏幕宽度/750。全局样式写在App.vue中，局部样式使用<style scoped>。
条件编译处理平台差异：
// #ifdef H5
console.log('仅在H5平台生效');
// #endif调试与发布流程
真机调试需连接设备并开启USB调试模式。通过HBuilderX生成发行包：
- 小程序：导出为对应平台格式（如微信小程序需配置
appid）。 - App：生成Android/iOS证书，打包为apk或ipa。
性能优化建议：
- 减少
v-if频繁切换，优先使用v-show。 - 图片压缩并使用CDN加速。
常见问题解决
- 白屏问题：检查路由配置或网络请求是否阻塞渲染。
- 样式失效：确认
rpx单位或作用域是否冲突。 - API兼容性：查阅文档确认API支持范围，必要时条件编译。
通过官方社区或GitHub Issues可获取进一步支持。
