玩转 uniapp 全端开发

配套视频 www.bilibili.com/video/BV1iG…

uniapp 介绍

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各

种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

是目前全端开发框架的佼佼者

多端体验

uniapp 优势

uniapp 生态介绍

uniapp项目创建

uniapp 项目开发方式分为两种

vue-cli （只开 h5端或者只开发微信小程序端）
HBuilderX 可视化（多端开发首选 只开发手机APP）

vue-cli

创建项目

全局安装vue-cli
```
npm install -g @vue/cli@4
```

创建项目 my-project 项目名称

vue create -p dcloudio/uni-preset-vue my-project

选择模版- 选择默认模版
成功

运行项目

npm run dev:平台代号
npm run build:平台代号

值	平台
app-plus	app平台生成打包资源（支持npm run build:app-plus，可用于持续集成。不支持run，运行调试仍需在HBuilderX中操作）
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字节跳动小程序
mp-lark	飞书小程序
mp-qq	qq 小程序
mp-360	360 小程序
mp-kuaishou	快手小程序
mp-jd	京东小程序
mp-xhs	小红书小程序
quickapp-webview	快应用(webview)
quickapp-webview-union	快应用联盟
quickapp-webview-huawei	快应用华为

HBuilderX

如果你要使用uiapp开发多端，那么就必须要选择和它配套的编辑工具了 HBuilderX 。考虑到后期要使用更多的 uniapp的功能，建议提前注册一个uniapp的开发账号。注册

创建项目

下载 HBuilderX
新建项目
选择项目
创建成功
编辑器中，敲入 u+代码即可调出HBuilderX的代码提示

运行项目

第一次运行，可能需要安装插件，等待即可

uniapp 开发环境搭建

uniapp 是全端开发框架，假如我们想要开发全端，那么首先需要搭建好各个端对应的环境。以下拿比较典型的微信小程序、H5 和安卓App来演示。 发布环境的讲解在后续

微信小程序

下载开发者工具

下载地址

下载安装成功后，会在桌面上显示出来一个图标

注册微信小程序开发者账号

另外想要开发一款微信小程序，必须要注册微信开发者账号，同时获取对应的appid。

获取appid

打开服务端口

在 HBuilderX 中运行项目

H5

如果使用内置的浏览器预览页面，它是自带跨域的。

同时每一个vue页面中的样式，也是默认自己加上 scoped 的。

运行H5比较简单，只需要电脑上安装好浏览器就行，或者使用 HBuilderX自带内置浏览器也可以

App

由于电脑操作系统限制，我们只演示 android。

分为两种:

运行到模拟器
运行到真机

运行到模拟器

安卓模拟器可以自由选择，这里我使用的是 Android studio 内置的模拟器

安装 android studio 模拟器步骤如下：

下载 android studio
1. 打开安装包，然后 勾选上 安装虚拟机
2. 打开 Android Studio
4. 选择要安装的手机型号
5. 选择安装对应的安卓系统版本 下载过程比较慢，因为系统镜像比较大
6. 下载成功了，回到设备列表页面，运行起来
7. 开机
8. 成功
9. 现在可以回到HBuilderX中来运行项目到模拟器里面了
10. HBuilderX会自动检测你电脑上的模拟器或者真实安卓手机
11. 成功

运行到真实手机

准备一台正常的安卓手机，开启开发人员选项和允许USB调试
连接数据线到电脑上，如果弹出什么菜单全部点击允许
这个时候，重新回到 HBuilderX中，点击运行项目到 App上
此时你的手机会弹出窗口，提示你安装软件，最后成功显示

App 调试模拟器调试

运行模拟器
运行项目
打开webview调试 该选项只能调试页面标签和样式，不能调试js
点击调试
此时会打开一个页面调试工具，开始调试
模拟器上也会跟着发生变化
此时可以开启 js调试
此时会弹出一个新的窗口我们可以在这里进行调试

App 真机调试

调试方式和调试模拟器类似。直接操作即可

uniapp 项目结构介绍

uniapp.dcloud.net.cn/tutorial/pr…

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb 
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─wxcomponents          存放小程序组件的目录
├─nativeplugins         App原生插件 详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
└─uni.scss              这里是uni-app内置的常用样式变量

uniapp 开发规范介绍

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范

页面和组件文件遵循vue的规范

比如新建页面 goods.vue
比如新建组件 it-item.vue

内置标签使用小程序的规范

<view>小程序中的块级标签</view>

数据绑定和事件处理使用vue的规范

<template>
	<view>
		<view class="item" v-for="item in list" :key="item" @click="handleClick(item)">{{item}}</view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				list:['a','b','c']
			}
		},
		methods:{
			handleClick(letter){
				console.log(letter)
			}
		}
	}
</script>

能力接口API 使用微信小程序的规范

比如弹出显示框，发送网络请求等

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

考虑到跨端，我们将会使用 uniapp 统一封装的API。简称 uni api

uniapp 生命周期

uniapp中，生命周期分类三大类

应用生命周期 小程序规范
页面生命周期 小程序规范
组件生命周期 vue规范

应用生命周期 `App.vue`

函数名	说明
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次）
onShow	当 `uni-app` 启动，或从后台进入前台显示
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发
onUniNViewMessage	对 `nvue` 页面发送的数据进行监听，可参考 nvue 向 vue 通讯(opens new window)
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

页面生命周期

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解 (opens new window)。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序	2.8.1+

组件生命周期


函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之前被调用。详见(opens new window)
created	在实例创建完成后被立即调用。详见(opens new window)
beforeMount	在挂载开始之前被调用。详见(opens new window)
mounted	挂载到实例上去之后调用。详见 (opens new window)注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用`$nextTick`Vue官方文档(opens new window)
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见(opens new window)	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见(opens new window)	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见(opens new window)
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见(opens new window)

响应式单位 rpx

uniapp.dcloud.net.cn/tutorial/sy…

相对长度单位，功能类似于web端的 rem 和 vw，小程序首先推出，uniapp也是直接支持。一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。

其中uniapp做了以下设置，

默认的设计稿宽度为 375px 因此存在 1px = 2rpx
默认 rpx支持最大宽度为 960px,超出则按照设计稿宽度 375px 来设置

scoped

vue开发的h5，单页面应用程序，每一个vue文件如果直接使用 class，多个文件的样式冲突
微信小程序真正多页面应用程序物理隔离，页面中使用 class，不会相互影响
uniapp做了一个设置，写vue代码，不需要主动加上 scoped，打包成h5端的时候自动添加上去，打包成微信小程序端不需要添加 scoped。

uniapp 多端开发

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

**写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

标签中

<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!--  #endif -->

js中

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

css中

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码
#ifdef H5 \|\| MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有\|\|，不可能出现&&，因为没有交集）

%PLATFORM% 可取值如下：

值	生效条件
VUE3	HBuilderX 3.2.0+ 详情(opens new window)
APP-PLUS-NVUE或APP-NVUE	App nvue
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

支持的文件

.vue
.js
.css
pages.json
各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

static 目录的条件编译

在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 %PLATFORM% 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。

如以下目录结构，a.png 只有在微信小程序平台才会编译进去，b.png 在所有平台都会被编译。

┌─static                
│  ├─mp-weixin
│  │  └─a.png     
│  └─b.png
├─main.js        
├─App.vue      
├─manifest.json 
└─pages.json

整体目录条件编译

如果想把各平台的页面文件更彻底的分开，也可以在uni-app项目根目录创建platforms目录，然后在下面进一步创建app-plus、mp-weixin等子目录，存放不同平台的文件。

注意

platforms目录下只支持放置页面文件（即页面vue文件），如果需要对其他资源条件编译建议使用static 目录的条件编译(opens new window)

flex布局

尽量使用flex布局，因为全平台都支持

尺寸单位

uniapp通用单位 px , rpx
vue页面中支持 rem 、vh、vw
nvue 不支持 百分比单位

css变量

CSS 变量	描述	App	小程序	H5
--status-bar-height	系统状态栏高度	系统状态栏高度 (opens new window)、nvue 注意见下	25px	0
--window-top	内容区域距离顶部的距离	0	0	NavigationBar 的高度
--window-bottom	内容区域距离底部的距离	0	0	TabBar 的高度

背景图片

支持 base64 格式图片。
支持网络路径图片。
小程序不支持在 css 中使用本地文件。需以 base64 方式方可使用。
使用本地路径背景图片需注意：
1. 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；
2. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
```
.test2 {
	background-image: url('~@/static/logo.png');
}
```

uview & uni ui

uview 和 uni ui 都是和uniapp配套的全端UI框架，可以单独使用，也可以共同使用

uview ui

由于目前 uview 2.x 版本的坑不少，因此我们拿比较稳定的 uview 1.8.6 来演示

另外，uview ui 的引入方式分为两种，主要是取决于你的项目是如何创建的：

vue-cli
HBuilderX

uview ui + vue-cli

安装依赖
```
npm i uview-ui@1.8.4 sass
```

在 src/main.js 文件中全局引入 js库

import uView from "uview-ui";
Vue.use(uView);

在 uni.scss 中引入 uview 的 sass 主题库
```
@import "uview-ui/theme.scss";
```

在 App.vue 中引入 uview 的 sass 主题库

<style lang="scss">
@import "uview-ui/index.scss";
</style>

pages.json 中配置 easycom

{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

在页面中使用 uview的按钮

<u-button >默认按钮</u-button>
<u-button type="primary">主要按钮</u-button>
<u-button type="success">成功按钮</u-button>
<u-button type="info">信息按钮</u-button>
<u-button type="warning">警告按钮</u-button>
<u-button type="error">危险按钮</u-button>

成功

uview ui + HBuilderX

打开插件市场，找到 uview 1.x 地址
点击导入插件
导入成功，可以看到目录下多了 components 文件夹
接着在 uni.scss 中导入 uview的主题样式文件 theme.scss
```
@import './theme.scss';
```

在页面上添加测试代码

    <u-button >默认按钮</u-button>
    <u-button type="primary">主要按钮</u-button>
    <u-button type="success">成功按钮</u-button>
    <u-button type="info">信息按钮</u-button>
    <u-button type="warning">警告按钮</u-button>
    <u-button type="error">危险按钮</u-button>

点击运行
成功

uni ui

uni ui + vue-cli

安装相关依赖

如果 node 版本小于 16 ，sass-loader 请使用低于 @11.0.0 的版本

如果 node 版本大于 16 ， sass-loader 建议使用 v8.x 版本
```
 npm i sass sass-loader@10.1.1  @dcloudio/uni-ui
```

配置easycom

在 pages.json 中进行配置

{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

组件中使用

<uni-title title="上报统计数据"></uni-title>
<uni-title type="h1" title="h1 一级标题 "></uni-title>
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
<uni-title type="h2" title="h2 居中" align="center"></uni-title>

uni ui + HBuilderX

打开 uni ui 的对应的插件市场
使用 HBuilderX 导入插件
项目中会多 uni_modules 文件夹

页面中导入代码

<uni-title title="上报统计数据"></uni-title>
<uni-title type="h1" title="h1 一级标题 "></uni-title>
<uni-title type="h1" title="h1 一级标题" color="#027fff"></uni-title>
<uni-title type="h2" title="h2 居中" align="center"></uni-title>