uniapp使用教学
uniapp 简介
Uniapp 是一个基于 Vue.js 的开发框架，允许开发者使用一套代码同时构建跨平台应用（如 iOS、Android、H5、小程序等）。其核心优势在于“一次开发，多端发布”，大幅提升开发效率。
环境搭建
下载并安装 HBuilderX（官方推荐的 IDE），支持 Windows 和 macOS。HBuilderX 内置了 uniapp 开发所需的工具链和调试环境。
安装 Node.js（建议 LTS 版本），用于依赖管理和打包构建。通过 npm 或 yarn 安装必要的依赖包。
创建项目
在 HBuilderX 中选择“新建项目”，选择 uniapp 模板（默认模板或自定义模板）。填写项目名称和存储路径，完成初始化。
通过命令行创建项目（需安装 Vue CLI）：
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project目录结构
pages：页面目录，每个页面为一个文件夹，包含.vue文件。static：静态资源目录（图片、字体等）。components：可复用组件目录。manifest.json：应用配置（如 AppID、启动图等）。pages.json：路由和页面样式配置。
页面开发
每个页面由 .vue 文件构成，包含模板（template）、脚本（script）、样式（style）三部分。示例：
<template>
<view>
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: "Hello uniapp!"
};
}
};
</script>
<style>
view {
padding: 20px;
}
</style>路由配置
在 pages.json 中配置页面路由和样式：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
]
}通过 uni.navigateTo 实现页面跳转：
uni.navigateTo({
url: '/pages/detail/detail'
});多端适配
使用条件编译处理平台差异：
// #ifdef H5
console.log("仅在 H5 平台生效");
// #endif通过 CSS 媒体查询或动态样式适配不同屏幕尺寸：
@media screen and (max-width: 750px) {
.container { padding: 10px; }
}插件与扩展
通过 npm 安装第三方插件（如 uni-ui）：
npm install @dcloudio/uni-ui在 pages.json 中配置全局组件：
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}调试与发布
在 HBuilderX 中选择运行到浏览器或模拟器（需安装对应平台工具，如微信开发者工具）。
通过“发行”菜单生成各端应用包：
- 小程序：导出为微信/支付宝等平台格式。
- App：生成 Android APK 或 iOS IPA（需配置证书）。
- H5：部署到 Web 服务器。
性能优化
避免频繁使用 setData，合并数据更新。使用 v-for 时添加 key 属性提升渲染效率。
通过分包加载减少首屏体积，在 pages.json 中配置：
"subPackages": [
{
"root": "subpages",
"pages": [...]
}
]常见问题
文本换行问题：使用 <text> 标签而非 <view> 包裹文本，CSS 设置 word-break: break-all。
图片路径问题：静态资源建议放在 static 目录，引用时使用绝对路径 /static/logo.png。
跨域问题：H5 开发时配置代理，在 manifest.json 中设置：
"h5": {
"devServer": {
"proxy": {
"/api": {
"target": "http://example.com",
"changeOrigin": true
}
}
}
}
