[TOC] > 技术边界: uniapp 需要掌握 Vue、Vuex、Vue Router 等 Vue 全家桶技术,以及微信小程序自定义组件和事件机制。同时需要了解 Android/iOS 原生开发以解决uniapp在这两端的差异。 > 特点: 1. 跨三端 - 一套代码编译到小程序、H5和App 2. 热更新 - 支持小程序和App热更新,开发效率高 3. 生态丰富 - 拥有Vue及其生态支持 4. 组件丰富 - 提供丰富的UI组件 5. 一致的API - 小程序、H5和AppAPI尽量保持一致 6. 免费开源 - uniapp框架免费并开源 > 使用场景: - 中小型应用 - 适用于要求不高的轻量级应用开发 - 企业应用 - 用于企业内部管理应用、OA应用等 - 电商应用 - 用于商品展示和交易的应用 - 教育应用 - 用于在线教育、问答和交流的应用 > 应用方法: 1. 安装HBuilderX和uni-cli 2. 创建uniapp项目 3. 设计pages目录结构和页面路由 4. 编写Vue页面 and 组件 5. 使用uniapp API和组件 6. 添加平台专有代码(如支付宝支付) 7. 编译运行到H5/小程序/App 8. 发布和更新 > 与项目的关系: uniapp框架与项目的关系主要体现在: - 提供项目基本结构和规范 - 实现跨三端编译和运行 - 封装各端API和组件实现最大一致 - 支持热更新提高开发效率 > 关键流程: 1. 学习Vue和uniapp框架 2. 设计应用 pages 目录和结构 3. 编写Vue页面和组件 4. 使用uniapp API和组件 5. 添加端专有实现(如支付) 6. 编译预览调试 7. 发布上线 8. 维护更新 >## uniapp 的原生 API: 1. 网络 API 用于网络请求,包含 request、uploadFile、downloadFile、WebSocket 等。 2. 登录 API 用于微信/支付宝/QQ 等平台的登录,包含 login、getUserInfo、share 等。 3. 支付 API 用于微信/支付宝支付,包含 requestPayment、pay 等。 4. 文件 API 用于本地文件读写,包含 saveFile、getFileInfo、removeSavedFile 等。 5. 数据缓存 API 用于数据存储,包含 setStorage、getStorage、removeStorage 等。uniapp 支持本地缓存、微信小程序缓存和 MemoryCache。 6. 推送 API 用于消息推送,包含 onPush、offPush 等。 7. 设备 API 用于访问设备信息,包含 getSystemInfo、onAccelerometerChange、scanCode 等。 8. 地理位置 API 用于访问地理位置,包含 getLocation、chooseLocation 等。 9. 媒体 API 用于录音、拍照和视频,包含 chooseVideo、saveVideoToPhotosAlbum、startRecord 等。 10. 其它 API 还包含设置 API(setNavigationBarTitle)、界面 API(showToast)、日志 API(setEnableDebug)等。 ## uniapp的推送API: 1. onPush() 用于监听推送消息,接收 pushMessage 参数,包含: - title:消息标题 - content:消息内容 - payload:自定义内容 - badge: App角标数 - sound:消息音频文件路径 例如: ``` js uni.onPush(function(res) { console.log(res) // { // title: '您有一条新消息', // content: '内容内容内容内容内容内容', // payload: '{"from": "Lisa", "time": "2020-10-10 10:10:10"}' // } }) ``` 2. offPush() 用于取消 onPush() 监听,例如在离开当前页面时调用。 3. setBadge() 用于设置 iOS/Android 应用图标右上角的角标,接收数字类型参数。 例如: ``` js uni.setBadge(5) ``` 4. getBadge() 用于获取 iOS/Android 应用图标右上角的角标数字,返回数字类型结果。 5. sendNotification() 用于发送推送通知,接收的参数包含: - title:通知标题 - content:通知内容 - payload:自定义内容 - badge:通知角标数字 - sound:通知音频文件路径 例如: ``` js uni.sendNotification({ title: '发送推送通知', content: '消息内容', payload: {msg: 'hello'}, badge: 1, sound: 'default' }) ``` ## API用于实现消息推送的发送和接收,开发聊天应用等功能。 1. 语言和框架uniapp 使用 Vue 和 Vue 生态作为开发语言和框架,包括 Vue、Vuex、Vue Router 等。 2. 目录结构uniapp 项目的目录结构如下: ~~~ ├── node_modules ├──platforms // 各端专用文件 ├── pages // 业务页面文件存放的目录 │ ├── index │ │ └── index.vue ├── static // 静态资源目录,图片、样式 ├── App.vue // 应用配置,用来配置App全局样式以及监听 应用生命周期 ├── main.js // Vue初始化入口文件 ├── manifest.json // 配置应用名称、appid、logo、版本等打包信息 └── pages.json // 配置页面路由、导航条、选项卡等页面类信息 ~~~ 3. 生命周期 uniapp 的生命周期包含:应用生命周期(onLaunch、onShow、onHide等)、页面生命周期(onLoad、onReady、onUnload等)、组件生命周期。 6. 组件 uniapp 提供丰富的 UI 组件,覆盖视图容器、基础内容、表单组件、媒体组件、地图组件等。同时还支持使用Vue组件和小程序自定义组件。 7. API uniapp提供常用接口API,包含网络请求、缓存、日志、ping监测、上传下载、用户授权登录和支付。 8. CLI和HBuilderX uniapp提供命令行工具uni-cli和可视化IDE HBuilderX来搭建项目、编译运行调试和打包发行。