持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情。
uni-app 快速入门
1 什么是uni-app
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。在APP开发，它对标flutter（google dart ）、react native（rn js）等App跨平台框架。
唐山港应用：1 H5网站（通过域名/ip/公众号链接等访问） 2 APP （可编译、发布、上架） 3 微信小程序
开发前置技能：
HTML （低）
CSS（低）
Javascript（中） es6（低）
vue（高）
自学资源：
JavaScript 教程 - 网道 wangdoc.com/javascript/
ES6 入门教程 - ECMAScript 6入门 阮一峰 wangdoc.com/es6/
UNIAPP 官方视频教程： ke.qq.com/course/3169…
vuejs 视频教程： learning.dcloud.io/#/
2 建立uni-app项目
（1）通过HbuilderX 开发工具创建
（2）通过vue-cli脚手架创建
全局安装vue-cli
npm install -g @vue/cli@4
使用正式版
vue create -p dcloudio/uni-preset-vue my-project(3) 运行uniapp
- 浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。
- 运行App到安卓手机或模拟器：开启开发者模式。连接手机，开启USB调试，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。
- 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
3 项目结构
3 全局文件
（1）manifest.json 基础配置文件
应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
（2）pages.json 路由管理文件
文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
（3）App.vue
uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。
这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储 globalData
应用生命周期仅可在App.vue中监听，在页面监听无效。
（4）main.js
uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件 如vuex。
5 开发规范
（1）页面文件
遵循 Vue 单文件组件 (SFC) 规范
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
<custom1>
This could be e.g. documentation for the component.
</custom1>（2）组件标签 = html标签
标签，靠近小程序规范，不是传统的HTML标签
（3）接口能力（JS API）
靠近微信小程序规范，但需将前缀 wx 替换为 uni 接口文档：uniapp.dcloud.io/api/
// 传统H5 请求 ajax axios
// 小程序 wx.request
uni.request({
url: 'ttpd23323list',
success: (res) => {
console.log(res.data);
},
fail:(err) => {
console.error(err)
},
});
（4）数据绑定及事件处理
同 Vue.js 规范，同时补充了App及页面的生命周期
vue声明周期：开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载
（5）CSS样式-布局
为兼容多端运行，建议使用flex弹性盒子布局进行开发
6 组件
(1) 组件简介
-
组件是视图层的基本组成单元。 界面 写法 ≈ HTML
-
组件是一个单独且可复用的功能模块的封装。
每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。
-
组件名称由尖括号包裹，称为标签，它有开始标签和结束标签。结束标签的
<后面用/来表示结束。结束标签也称为闭合标签。 -
在开始标签和结束标签之间，称为组件内容。
-
开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。
-
每个属性通过
=赋值。<template> <view> <button size="mini" class="btn">按钮</button> </view> </template>注意: 每个vue文件的根节点必须为
<template>，且这个<template>下只能且必须有一个根<view>组件。view 组件 == DIV
(2)组件属性值
(3) 组件的公共属性
(4) 组件的事件
每个组件都有“事件”。事件就是在指定的条件下触发某个js方法。
比如button组件，有点击事件，也就是当手机用户点击这个button组件时，会触发这个事件。
事件也是组件的属性，只不过这类属性以@为前缀。
事件的属性值，指向一个在script的methods里定义过的js方法，还可以给方法传参数。
(5) 基础组件
(6) 扩展组件
uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
uni-ui不包括基础组件，它是基础组件的补充。
7 API 列表
#基础
#日志打印
| API | 说明 |
|---|---|
| 日志打印 | 向控制台打印日志信息 |
| 定时器 | 在定时到期以后执行注册的回调函数 |
| uni.base64ToArrayBuffer | 将 Base64 字符串转成 ArrayBuffer 对象 |
| uni.arrayBufferToBase64 | 将 ArrayBuffer 对象转成 Base64 字符串 |
| 应用级事件 | 监听应用事件 |
| 拦截器 | 拦截 Api 等调用并执行回调 |
| 全局API | 可全局调用 Api |
#网络
#发起请求
| API | 说明 |
|---|---|
| uni.request | 发起网络请求 |
#上传、下载
| API | 说明 |
|---|---|
| uni.uploadFile | 上传文件 |
| uni.downloadFile | 下载文件 |
#WebSocket
| API | 说明 |
|---|---|
| uni.connectSocket | 创建 WebSocket 连接 |
| uni.onSocketOpen | 监听 WebSocket 打开 |
| uni.onSocketError | 监听 WebSocket 错误 |
| uni.sendSocketMessage | 发送 WebSocket 消息 |
| uni.onSocketMessage | 接受 WebSocket 消息 |
| uni.closeSocket | 关闭 WebSocket 连接 |
| uni.onSocketClose | 监听 WebSocket 关闭 |
#SocketTask
| API | 说明 |
|---|---|
| SocketTask.send | 通过 WebSocket 连接发送数据 |
| SocketTask.close | 关闭 WebSocket 连接 |
| SocketTask.onOpen | 监听 WebSocket 连接打开事件 |
| SocketTask.onClose | 监听 WebSocket 连接关闭事件 |
| SocketTask.onError | 监听 WebSocket 错误事件 |
| SocketTask.onMessage | 监听 WebSocket 接受到服务器的消息事件 |
#媒体
#图片
| API | 说明 |
|---|---|
| uni.chooseImage | 从相册选择图片，或者拍照 |
| uni.previewImage | 预览图片 |
| uni.closePreviewImage | 关闭预览图片 |
| uni.getImageInfo | 获取图片信息 |
| uni.saveImageToPhotosAlbum | 保存图片到系统相册 |
#文件
| API | 说明 |
|---|---|
| uni.chooseFile | 从本地选择文件 |
#录音管理
| API | 说明 |
|---|---|
| uni.getRecorderManager | 录音管理 |
#背景音频播放管理
| API | 说明 |
|---|---|
| uni.getBackgroundAudioManager | 背景音频播放管理 |
#音频组件管理
| API | 说明 |
|---|---|
| uni.createInnerAudioContext | 音频组件管理 |
#视频
| API | 说明 |
|---|---|
| uni.chooseVideo | 从相册选择视频，或者拍摄 |
| uni.chooseMedia | 拍摄或从手机相册中选择图片或视频。 |
| uni.saveVideoToPhotosAlbum | 保存视频到系统相册 |
| uni.createVideoContext | 视频组件管理 |
#相机组件管理
| API | 说明 |
|---|---|
| uni.createCameraContext | 相机组件管理 |
#直播组件管理
| API | 说明 |
|---|---|
| uni.createLivePlayerContext | 直播组件管理 |
#文件
| API | 说明 |
|---|---|
| uni.saveFile | 保存文件 |
| uni.getSavedFileList | 获取已保存的文件列表 |
| uni.getSavedFileInfo | 获取已保存的文件信息 |
| uni.removeSavedFile | 删除已保存的文件信息 |
| uni.getFileInfo | 获取文件信息 |
| uni.openDocument | 打开文件 |
#数据缓存
| API | 说明 |
|---|---|
| uni.getStorage | 获取本地数据缓存 |
| uni.getStorageSync | 获取本地数据缓存 |
| uni.setStorage | 设置本地数据缓存 |
| uni.setStorageSync | 设置本地数据缓存 |
| uni.getStorageInfo | 获取本地缓存的相关信息 |
| uni.getStorageInfoSync | 获取本地缓存的相关信息 |
| uni.removeStorage | 删除本地缓存内容 |
| uni.removeStorageSync | 删除本地缓存内容 |
| uni.clearStorage | 清理本地数据缓存 |
| uni.clearStorageSync | 清理本地数据缓存 |
#位置
#获取位置
| API | 说明 |
|---|---|
| uni.getLocation | 获取当前位置 |
| uni.chooseLocation | 打开地图选择位置 |
#查看位置
| API | 说明 |
|---|---|
| uni.openLocation | 打开内置地图 |
#地图组件控制
| API | 说明 |
|---|---|
| uni.createMapContext | 地图组件控制 |
#设备
#系统信息
| API | 说明 |
|---|---|
| uni.getSystemInfo | 获取系统信息 |
| uni.getSystemInfoSync | 获取系统信息 |
| uni.canIUse | 判断应用的 API，回调，参数，组件等是否在当前版本可用 |
#内存
| API | 说明 |
|---|---|
| uni.onMemoryWarning | 监听内存不足告警事件 |
#网络状态
| API | 说明 |
|---|---|
| uni.getNetworkType | 获取网络类型 |
| uni.onNetworkStatusChange | 监听网络状态变化 |
| uni.offNetworkStatusChange | 取消监听网络状态变化 |
#加速度计
| API | 说明 |
|---|---|
| uni.onAccelerometerChange | 监听加速度数据 |
| uni.offAccelerometerChange | 取消监听加速度数据 |
| uni.startAccelerometer | 开始监听加速度数据 |
| uni.stopAccelerometer | 停止监听加速度数据 |
#罗盘
| API | 说明 |
|---|---|
| uni.onCompassChange | 监听罗盘数据 |
| uni.offCompassChange | 取消监听罗盘数据 |
| uni.startCompass | 开始监听罗盘数据 |
| uni.stopCompass | 停止监听罗盘数据 |
#陀螺仪
| API | 说明 |
|---|---|
| uni.onGyroscopeChange | 监听陀螺仪数据 |
| uni.startGyroscope | 开始监听陀螺仪数据 |
| uni.stopGyroscope | 停止监听陀螺仪数据 |
#拨打电话
| API | 说明 |
|---|---|
| uni.makePhoneCall | 拨打电话 |
#扫码
| API | 说明 |
|---|---|
| uni.scanCode | 扫码 |
#剪切板
| API | 说明 |
|---|---|
| uni.setClipboardData | 设置剪贴板内容 |
| uni.getClipboardData | 获取剪贴板内容 |
#屏幕亮度
| API | 说明 |
|---|---|
| uni.setScreenBrightness | 设置屏幕亮度 |
| uni.getScreenBrightness | 获取屏幕亮度 |
| uni.setKeepScreenOn | 设置是否保持常亮状态 |
#用户截屏事件
| API | 说明 |
|---|---|
| uni.onUserCaptureScreen | 监听用户截屏事件 |
#振动
| API | 说明 |
|---|---|
| uni.vibrate | 使手机发生振动 |
| uni.vibrateLong | 使手机发生较长时间的振动 |
| uni.vibrateShort | 使手机发生较短时间的振动 |
#手机联系人
| API | 说明 |
|---|---|
| uni.addPhoneContact | 添加手机通讯录 |
#蓝牙
| API | 说明 |
|---|---|
| uni.openBluetoothAdapter | 初始化蓝牙模块 |
| uni.startBluetoothDevicesDiscovery | 搜寻附近的蓝牙外围设备 |
| uni.onBluetoothDeviceFound | 监听寻找到新设备的事件 |
| uni.stopBluetoothDevicesDiscovery | 停止搜寻 |
| uni.onBluetoothAdapterStateChange | 监听蓝牙适配器状态变化事件 |
| uni.getConnectedBluetoothDevices | 根据 uuid 获取处于已连接状态的设备 |
| uni.getBluetoothDevices | 获取已发现的蓝牙设备 |
| uni.getBluetoothAdapterState | 获取本机蓝牙适配器状态 |
| uni.closeBluetoothAdapter | 关闭蓝牙模块 |
#低耗蓝牙
| API | 说明 |
|---|---|
| uni.writeBLECharacteristicValue | 向低功耗蓝牙设备特征值中写入二进制数据 |
| uni.readBLECharacteristicValue | 读取低功耗蓝牙设备的特征值的二进制数据值 |
| uni.onBLEConnectionStateChange | 监听低功耗蓝牙连接状态的改变事件 |
| uni.onBLECharacteristicValueChange | 监听低功耗蓝牙设备的特征值变化事件 |
| uni.notifyBLECharacteristicValueChange | 启用蓝牙低功耗设备特征值变化时的 notify 功能，订阅特征 |
| uni.getBLEDeviceServices | 获取蓝牙设备所有服务(service) |
| uni.getBLEDeviceCharacteristics | 获取蓝牙设备某个服务中所有特征值(characteristic) |
| uni.createBLEConnection | 连接低功耗蓝牙设备 |
| uni.closeBLEConnection | 断开与低功耗蓝牙设备的连接 |
#iBeacon
| API | 说明 |
|---|---|
| uni.onBeaconServiceChange | 监听 iBeacon 服务状态变化事件 |
| uni.onBeaconUpdate | 监听 iBeacon 设备更新事件 |
| uni.getBeacons | 获取所有已搜索到的 iBeacon 设备 |
| uni.startBeaconDiscovery | 停止搜索附近的 iBeacon 设备 |
| uni.stopBeaconDiscovery | 开始搜索附近的 iBeacon 设备 |
#生物认证
| API | 说明 |
|---|---|
| uni.startSoterAuthentication | 开始生物认证 |
| uni.checkIsSupportSoterAuthentication | 获取本机支持的生物认证方式 |
| uni.checkIsSoterEnrolledInDevice | 获取设备内是否录入如指纹等生物信息的接口 |
#界面
#交互反馈
| API | 说明 |
|---|---|
| uni.showToast | 显示提示框 |
| uni.showLoading | 显示加载提示框 |
| uni.hideToast | 隐藏提示框 |
| uni.hideLoading | 隐藏加载提示框 |
| uni.showModal | 显示模态弹窗 |
| uni.showActionSheet | 显示菜单列表 |
#设置导航条
| API | 说明 |
|---|---|
| uni.setNavigationBarTitle | 设置当前页面标题 |
| uni.setNavigationBarColor | 设置页面导航条颜色 |
| uni.showNavigationBarLoading | 显示导航条加载动画 |
| uni.hideNavigationBarLoading | 隐藏导航条加载动画 |
#设置TabBar
| API | 说明 |
|---|---|
| uni.setTabBarItem | 动态设置 tabBar 某一项的内容 |
| uni.setTabBarStyle | 动态设置 tabBar 的整体样式 |
| uni.hideTabBar | 隐藏 tabBar |
| uni.showTabBar | 显示 tabBar |
| uni.setTabBarBadge | 为 tabBar 某一项的右上角添加文本 |
| uni.removeTabBarBadge | 移除 tabBar 某一项右上角的文本 |
| uni.showTabBarRedDot | 显示 tabBar 某一项的右上角的红点 |
| uni.hideTabBarRedDot | 隐藏 tabBar 某一项的右上角的红点 |
#背景
| API | 说明 |
|---|---|
| uni.setBackgroundColor | 动态设置窗口的背景色。 |
| uni.setBackgroundTextStyle | 动态设置下拉背景字体、loading 图的样式。 |
#动画
| API | 说明 |
|---|---|
| uni.createAnimation | 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。 |
#滚动
| API | 说明 |
|---|---|
| uni.pageScrollTo | 将页面滚动到目标位置。 |
#绘画
| API | 说明 |
|---|---|
| uni.createCanvasContext | 创建绘图上下文 |
| uni.canvasToTempFilePath | 将画布内容保存成文件 |
| uni.canvasGetImageData | 获取画布图像数据 |
| uni.canvasPutImageData | 设置画布图像数据 |
#下拉刷新
| API | 说明 |
|---|---|
| onPullDownRefresh | 监听该页面用户下拉刷新事件 |
| uni.startPullDownRefresh | 开始下拉刷新 |
| uni.stopPullDownRefresh | 停止当前页面下拉刷新 |
#节点信息
| API | 说明 |
|---|---|
| uni.createSelectorQuery | 创建查询请求 |
| selectorQuery.select | 根据选择器选择单个节点 |
| selectorQuery.selectAll | 根据选择器选择全部节点 |
| selectorQuery.selectViewport | 选择显示区域 |
| selectorQuery.exec | 执行查询请求 |
| nodesRef.boundingClientRect | 获取布局位置和尺寸 |
| nodesRef.scrollOffset | 获取滚动位置 |
| nodesRef.fields | 获取任意字段 |
#节点布局相交状态
| API | 说明 |
|---|---|
| uni.createIntersectionObserver | 创建 IntersectionObserver 对象 |
| intersectionObserver.relativeTo | 指定参照节点 |
| intersectionObserver.relativeToViewport | 指定页面显示区域作为参照区域 |
| intersectionObserver.observe | 指定目标节点并开始监听 |
| intersectionObserver.disconnect | 停止监听 |
#路由
| API | 说明 |
|---|---|
| uni.navigateTo | 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面 |
| uni.redirectTo | 关闭当前页面，跳转到应用内的某个页面 |
| uni.reLaunch | 关闭所有页面，打开到应用内的某个页面 |
| uni.switchTab | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 |
| uni.navigateBack | 关闭当前页面，返回上一页面或多级页面 |
#第三方服务
| API | 说明 |
|---|---|
| uni.getProvider | 获取服务供应商 |
| uni.login | 登录 |
| uni.getUserInfo | 获取用户信息 |
| uni.getuserprofile | 获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo |
| uni.checkSession | 检查登录状态是否过期 |
| uni.preLogin | 预登录 |
| uni.closeAuthView | 关闭一键登录页面 |
| uni.getCheckBoxState | 获取一键登录条款勾选框状态 |
| uni.getUniverifyManager | 获取全局唯一的一键登录管理器 univerifyManager |
| uni.share | 分享 |
| uni.shareWithSystem | 使用系统分享 |
| uni.requestPayment | 支付 |
| uni.subscribePush | 开启推送 |
| uni.unsubscribePush | 关闭推送 |
| uni.onPush | 监听透传数据 |
| uni.offPush | 移除监听透传数据 |
#广告
| API | 说明 |
|---|---|
| 激励视频广告 | 激励视频广告，是cpm收益最高的广告形式 |
| 全屏视频广告 | 全屏视频广告 |
| 内容联盟广告 | 内容联盟广告 |
| 插屏广告 | 插屏广告 |
| 互动游戏 | 互动游戏是DCloud联合三方服务商为开发者提供新的广告场景增值服务 |
#平台扩展
| API | 说明 |
|---|---|
| uni.requireNativePlugin | 引入 App 原生插件 |
#其他
#授权
| API | 说明 |
|---|---|
| uni.authorize | 提前向用户发起授权请求 |
#设置
| API | 说明 |
|---|---|
| uni.openSetting | 调起客户端小程序设置界面，返回用户设置的操作结果。 |
| uni.getSetting | 获取用户的当前设置。 |
#收货地址
| API | 说明 |
|---|---|
| uni.chooseAddress | 获取用户收货地址 |
#获取发票抬头
| API | 说明 |
|---|---|
| uni.chooseInvoiceTitle | 选择用户的发票抬头，需要用户授权 scope.invoiceTitle。 |
#小程序跳转
| API | 说明 |
|---|---|
| uni.navigateToMiniProgram | 打开另一个小程序。 |
| uni.navigateBackMiniProgram | 跳转回上一个小程序，只有当另一个小程序跳转到当前小程序时才会能调用成功。 |
#模板消息
| API | 说明 |
|---|---|
| addTemplate | 组合模板并添加至帐号下的个人模板库。 |
| deleteTemplate | 删除帐号下的某个模板。 |
| getTemplateLibraryById | 获取模板库某个模板标题下关键词库。 |
| getTemplateLibraryList | 获取APP模板库标题列表 |
| getTemplateList | 获取帐号下已存在的模板列表。 |
| sendTemplateMessage | 发送模板消息 |
| alipay.open.app.mini.templatemessage.send | 支付宝小程序通过 openapi 给用户触达消息，主要为支付后的触达（通过消费id）和用户提交表单后的触达（通过formId）。 |
#小程序更新
| API | 说明 |
|---|---|
| uni.getUpdateManager | 返回全局唯一的版本更新管理器对象： updateManager，用于管理小程序更新。 |
#调试
| API | 说明 |
|---|---|
| uni.setEnableDebug | 设置是否打开调试开关。此开关对正式版也能生效。 |
#获取第三方平台数据
| API | 说明 |
|---|---|
| uni.getExtConfig | 获取第三方平台自定义的数据字段。 |
| uni.getExtConfigSync | uni.getExtConfig 的同步版本。 |
8 UNIAPP发布
- 打包为原生App
- 发布为H5
- 发布为小程序 安装微信开发者工具，配置appid