玩转 uniapp 全端开发

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

uniapp 介绍

uni-app是一个运用Vue.js (opens new window)开发一切前端运用的结构，开发者编写一套代码，可发布到iOS、Android、Web（呼应式）、以及各

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

是现在全端开发结构的佼佼者

多端体会

uniapp 优势

uniapp 生态介绍

uview
uni ui
1. 运用文档
2. 完好示例
hbuilderX
插件市场
uniCloud

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  */
仿制代码

条件编译写法	阐明
#ifdefAPP-PLUS需条件编译的代码 #endif	仅出现在 App 渠道下的代码
#ifndefH5需条件编译的代码 #endif	除了 H5 渠道，其它渠道均存在的代码
#ifdefH5	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 1.x
uview ui 2.x
uni 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>
仿制代码