uniapp教学笔记
基础环境搭建
确保安装最新版HBuilderX，这是官方推荐的开发工具，内置uniapp项目模板。创建项目时选择uni-app类型，根据需求选择默认模板或自定义模板。
Node.js版本需保持在12.0以上，用于依赖管理。配置微信开发者工具路径，以便真机调试时调用微信小程序模拟器。
目录结构解析
项目根目录包含pages存放页面组件，static放置静态资源，components为公用组件。manifest.json配置应用名称、图标等基本信息，pages.json定义路由与页面样式。
注意静态资源路径需使用绝对路径/static/logo.png，组件引入需通过@components别名。
页面开发规范
每个页面由.vue文件构成，包含template、script、style三部分。使用Vue语法但需注意平台差异，例如小程序不支持部分HTML标签。
路由跳转使用uni.navigateTo，传参通过URL拼接，接收参数使用onLoad生命周期函数的参数对象。页面样式建议采用flex布局，适配多端显示。
跨端兼容处理
通过条件编译实现多端差异代码：
// #ifdef MP-WEIXIN
wx.login()
// #endif
// #ifdef H5
location.href
// #endif使用uni.getSystemInfo获取设备信息，动态调整布局。公共组件开发时需测试各端表现，建议使用scss变量管理平台专属样式。
数据请求封装
推荐使用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)
})
})
}配置请求拦截器处理Token自动添加，响应拦截器统一处理错误码。注意小程序端需配置合法域名，H5端解决跨域问题。
状态管理方案
简单场景可使用全局变量：
// main.js
Vue.prototype.$store = {
userInfo: {}
}复杂项目建议引入vuex，按模块划分状态。持久化存储使用uni.setStorageSync，注意小程序端同步存储有容量限制。
发布打包流程
H5版本通过发行->网站-H5手机版生成，需配置部署路径。小程序版本需在开发者工具中导入unpackage/dist/dev/mp-weixin目录。
App打包需配置证书与签名，通过原生平台云打包或本地打包生成安装包。各平台发布前需仔细检查权限配置与隐私政策。
