目录
2. 配置adb路径及AVD端口号，以调试Android应用
1.在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）
2..uni-app给我们提供了很多模板，选择一个模板后创建
前言
在学习uni-app前，建议开发者先学习Vue.js框架，因为uni-app基于Vue.js框架开发。若您已经熟悉Vue.js，则可以开始学习uni-app了。uni-app使用HTML、CSS和JavaScript编写应用程序，您可以通过使用Vue.js的语法以及Uni-app提供的组件和API来构建应用程序。
在学习uni-app时，建议同时了解应用开发的相关知识，如应用的生命周期、页面布局、事件绑定及其响应等。这些知识将帮助您更好地理解Uni-app的实现原理和应用开发流程。
一、uni-app是什么？
uni-app是一款全新的跨平台应用开发框架，它是一个使用 Vue.js 开发所有前端应用的框架，它支持一次开发，同时发布到多个平台。
二、uni-app的优势在哪里？
1.基于Vue.js框架：uni-app基于Vue.js框架，开发者可以在学习Vue.js的同时学习uni-app，熟悉Vue.js的开发者可以快速上手。
2.支持多个平台：开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序等多个平台，大大减少了开发者的开发成本，提高了开发效率。
3.组件丰富：uni-app内置了一些常用组件，如表单、列表、滑动、加载中等，这些常用组件可以满足开发者的各种开发需求。
4.通用技术栈：uni-app基于Vue.js框架，学习成本低，内嵌mpvue。
三、uni-app开发环境准备
开始之前，开发者需先下载安装如下工具 HBuilderX：官方IDE下载地址
1.配置微信开发者工具路径，及调试小程序
2. 配置adb路径及AVD端口号，以调试Android应用
3.pages.json 页面路由
pages.json文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。
配置项列表：
| 属性 | 类型 | 必填 | 描述 | 平台兼容 |
| globalStyle | Object | 否 | 设置默认页面的窗口表现 | |
| pages | Object Array | 是 | 设置页面路径及窗口表现 | |
| easycom | Object | 否 | 组件自动引入规则 | 2.5.5+ |
| tabBar | Object | 否 | 设置底部 tab 的表现 | |
| condition | Object | 否 | 启动模式配置 | |
| subPackages | Object Array | 否 | 分包加载配置 | |
| preloadRule | Object | 否 | 分包预下载规则 | 微信小程序 |
| workers | String | 否 | worker代码放置的目录 | 微信小程序 |
| leftWindow | Object | 否 | 大屏左侧窗口 | H5 |
| topWindow | Object | 否 | 大屏顶部窗口 | H5 |
| rightWindow | Object | 否 | 大屏右侧窗口 | H5 |
| uniIdRouter | Object | 否 | 自动跳转相关配置，新增于HBuilderX 3.5.0 | |
| entryPagePath | String | 否 | 默认启动首页，新增于HBuilderX 3.7.0 | 微信小程序、支付宝小程序 |
以下是一个包含了所有配置选pages.json：
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面，必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
"rpxCalcMaxDeviceWidth": 960,
"rpxCalcBaseDeviceWidth": 375,
"rpxCalcIncludeWidth": 750
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件",
"iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
"text": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": {
"autoscan": true, //是否自动扫描组件
"custom": {//自定义扫描规则
"^uni-(.*)": "@/components/uni-$1.vue"
}
},
"topWindow": {
"path": "responsive/top-window.vue",
"style": {
"height": "44px"
}
},
"leftWindow": {
"path": "responsive/left-window.vue",
"style": {
"width": "300px"
}
},
"rightWindow": {
"path": "responsive/right-window.vue",
"style": {
"width": "300px"
},
"matchMedia": {
"minWidth": 768
}
}
}
四、了解uni-app项目结构以及生命周期
1.uni-app项目结构（开发目录）：
├── App.vue // 应用程序主组件
├── manifest.json // 配置应用程序的基本信息，如应用名称、图标、启动屏等
├── pages.json // 配置应用程序的页面路由、导航条等
├── main.js // 应用程序的入口文件
├── components // 存放所有可复用的组件
│ ├── common // 通用组件
│ ├── home // 首页组件
│ ├── list // 列表组件
│ └── ...
├── pages // 存放所有页面组件
│ ├── home // 首页
│ ├── list // 列表页
│ ├── detail // 详情页
│ └── ...
├── static // 存放静态文件，如图片、样式表等
│ ├── image
│ ├── css
│ └── ...
└── uni_modules // 存放npm包及uniapp插件
├── uni-ui // uni-ui组件库
├── ...2.uni-app生命周期：
uni-app 支持如下应用生命周期函数：
| 函数名 | 说明 |
| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
| onUniNViewMessage | 对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯 |
| onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数（2.8.1+） |
| onPageNotFound | 页面不存在监听函数 |
| onThemeChange | 监听系统主题变化 |
示例代码：
<script>
// 只能在App.vue里监听应用的生命周期
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
注意：
- 应用生命周期仅可在App.vue中监听，在其它页面监听无效。
- 以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档和Vue3 组合式 API 使用文档。
- 应用启动参数，可以在API uni.getLaunchOptionsSync获取。
- onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942
- App.vue 不能写模板
- onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）
五、创建uni-app项目
1.在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）
2..uni-app给我们提供了很多模板，选择一个模板后创建
六、运行uni-app项目
在微信开发者工具里运行：进入项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。
七、发布 uni-app
1.打包为原生APP
在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：
随后按需求打包即可
2.发布为微信小程序
申请微信小程序AppID，参考：微信教程
在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和appid点击发行即可
如果手动发行，则点击发行按钮后，会在项目的目录 :unpackage/dist/build/mp-weixin生成微信小程序项目代码。在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可。
如果在发行界面勾选了自动上传微信平台，则无需再打开微信工具手动操作，将直接上传到微信服务器提交审核。
总结
uni-app具有强大的跨平台能力和开发效率，同时提供了丰富的组件和调试工具，以及外部扩展机制，使得开发者可以更加轻松地开发跨平台应用并提高开发效率。它支持一次开发，同时发布到多个平台:Android、iOS、H5、小程序和快应⽤等。uni-app基于Vue框架，提供了一系列的组件和API，让开发者可以快速地建立多端应用。
1799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
