Part6-1-2 uniapp

[插件市场](https://ext.dcloud.net.cn/?orderBy=WeekDownload)

下载开发工具 [HBuilderX](https://www.dcloud.io/)

目录结构

应用配置 manifest.json

 manifest.json 是应用的配置文件，用于指定应用的名称、图标、权限等，我们也可以在这里为 Vue 为 H5 设置跨域拦截处理器

编译配置 vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项

[官方文档](https://uniapp.dcloud.io/collocation/vue-config)

全局配置 page.json

page.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。它类似微信小程序中 app.json 的页面管理部分。

[官方文档](https://uniapp.dcloud.io/collocation/pages)

全局样式 uni.scss 

`uni.scss`文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，`uni.scss`文件里预置了一批scss变量预置。[官方文档](https://uniapp.dcloud.io/collocation/uni-scss)

`uni-app` 官方扩展插件（uni ui）及 [插件市场](https://ext.dcloud.net.cn/) 上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。

 `uni.scss`是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个 uni.scss，使得每个 scss 文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。

主组件 App.vue

`App.vue`是uni-app的主组件，所有页面都是在`App.vue`下进行切换的，是页面入口文件。但`App.vue`本身不是页面，这里不能编写视图元素。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在`App.vue`中监听，在页面监听无效。

入口文件 main.js

main.js 是 uni-app  的入口文件，主要作用是初始化 vue 实例、定义全局组件、使用需要的插件，如vuex。

uniapp 开发规范及资源路径

1、开发规范约定

        页面文件向导 Vue 单文件组件 (SFC) 规范

        组件标签靠近小程序规范，详见 uni-app 组件规范

        互联能力 （JS API）靠近微信小程序规范，但需要将 wx 替换为 uni，详见 uni-app 接口规范

        数据绑定及事件处理同 vue.js 规范，同时补充了 App 和 页面的生命周期

        为兼容多端运行，建议使用 flex 布局进行开发

2、资源路径说明

template 内使用静态资源，如 image, video等标签的 src 属性时，可以使用相对路径或绝对路径，形式如下：

```html
<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
```

 注意：

        @ 初始的绝对路径以及相对路径会通过 base64 转换规则校验

        使用的静态资源在非 h5 平台，均不转为 base64

        h5平台，小于 4kb 的资源会被转换成 base64，其余不转

js 文件或 script 标签内，可以使用相对路径和绝对路径，形式如下：

```js
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
```

css 文件或 style 标签内，可以使用相对路径和绝对路径，形式如下：

```css
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
```

css 文件或 style 标签内引用的图片路径，可以使用相对路径，也可以使用绝对路径，形式如下：

```css
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);
```

UniAPP 生命周期 

 `uni-app` 完整支持 `Vue` 实例的生命周期，

同时还新增 [应用生命周期](https://uniapp.dcloud.io/frame?id=应用生命周期)

及 [页面生命周期](https://uniapp.dcloud.io/frame?id=页面生命周期)。

 （1）应用生命周期

（2）页面生命周期 

UniAPP 路由配置及页面跳转

（1）路由配置

uni-app 页面路由全部交给**框架**统一管理，开发者需要在[pages.json](https://links.jianshu.com/goto=https%3A%2F%2Funiapp.dcloud.io%2Fcollocation%2Fpages%3Fid%3Dpages)里配置每个路由页面的路径及页面样式（类似小程序在 app.json 中配置页面路由）。

pages.json

"pages": [
		{
			"path": "pages/index",
			"style": {
				"navigationBarTitleText": "路由配置",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			}
		},
		{
			"path": "pages/user",
			"style": {
				"navigationBarTitleText": "路由配置",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			}
		}
]

（2）路由跳转

`uni-app` 有两种页面路由跳转方式：

使用[navigator](https://uniapp.dcloud.io/component/navigator)组件跳转（标签式导航）、

调用[API](https://uniapp.dcloud.io/api/router)跳转（编程式导航）

编程式导航

uni.navigateTo({
    url: '/pages/index/index'
})

标签式导航

<navigator url="/pages/index/index">首页</navigator>

pages.json 设置 底部 tab

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/tabbar-icons/wx.png",
			"selectedIconPath": "static/tabbar-icons/wx_s.png",
			"text": "微信"
		}, {
			"pagePath": "pages/list/list",
			"iconPath": "static/tabbar-icons/list.png",
			"selectedIconPath": "static/tabbar-icons/list_s.png",
			"text": "通讯录"
		}, {
			"pagePath": "pages/finder/finder",
			"iconPath": "static/tabbar-icons/find.png",
			"selectedIconPath": "static/tabbar-icons/find_s.png",
			"text": "发现"
		}, {
			"pagePath": "pages/me/me",
			"iconPath": "static/tabbar-icons/me.png",
			"selectedIconPath": "static/tabbar-icons/me_s.png",
			"text": "我"
		}]
	}

切换tab

uni.switchTab({
	url:'/pages/index/index'
})

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

（3）获取当前页面栈

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

`注意`： getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。

（4）路由传参与接收

说明：页面生命周期的 onLoad(）监听页面加载，其参数为上个页面传递的数据，如： 

//页面跳转并传递参数
uni.navigateTo({
    url: 'page2?name=liy&message=Hello'
});

url为将要跳转的页面路径 ，路径后可以带参数。参数与路径之间使用`?`分隔，参数键与参数值用`=`相连，不同参数用`&`分隔。如 'path?key1=value2&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。

// 页面 2 接收参数
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
	console.log(option.name); //打印出上个页面传递的参数。
	console.log(option.message); //打印出上个页面传递的参数。
}

`注意`：url 有长度限制，太长的字符串会传递失败，并且不规范的字符格式也可能导致传递失败，所以对于复杂参数建议使用 encodeURI、decodeURI 进行处理后传递

（5）小程序路由分包配置

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

所谓的主包，即放置默认启动页面及 TabBar 页面，而分包则是根据 pages.json 的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示，此时终端界面会有等待提示。

创建 subpages 文件夹

 pages.json

"subPackages": [{
		"root": "subpages",
		"pages": [{
			"path": "news/news",
			"style": {
				"navigationBarTitleText": "新闻中心",
				"enablePullDownRefresh": false
			}
		}    
       ]
	}],



// 预下载分包设置
"preloadRule": {
		"pages/index": {
			"network": "all",
			"packages": ["activities"]
		}
}

UniAPP 常用组件简介

uni-app 为开发者提供了一系列基础组件，类似 HTML 里的基础标签元素，但 uni-app 的组件与 HTML 不同，而是与小程序相同，更适合手机端使用。

虽然不推荐使用 HTML 标签，但实际上如果开发者写了`div`等标签，在编译到非H5平台时也会被编译器转换为 `view` 标签，类似的还有 `span` 转 `text`、`a` 转`navigator`等，包括 css 里的元素选择器也会转，但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

开发者可以通过组合这些基础组件进行快速开发， 基于内置的基础组件，可以开发各种扩展组件，组件规范与vue组件相同。

UniAPP 常用 API 简介

`uni-app`的 js 代码，h5 端运行于浏览器中，非 h5 端 Android 平台运行在 v8 引擎中，iOS 平台运行在 iOS 自带的 jscore 引擎中。所以，`uni-app`的 jsAPI 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。

ECMAScript 由 Ecma 国际管理，是基础 js 语法。浏览器基于标准 js 扩充了window、document 等 js API；Node.js 基于标准 js 扩充了 fs 等模块；小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。

标准 ecmascript 的 API 非常多，比如：console、settimeout等等。

非 H5 端，虽然不支持 window、document、navigator 等浏览器的 js API，但也支持标准 ECMAScript。

开发者不要把浏览器里的 js 等价于标准 js。

所以 uni-app 的非 H5 端，一样支持标准 js，支持 if、for 等语法，支持字符串、数组、时间等变量及各种处理方法，仅仅是不支持浏览器专用对象。

uni.chooseImage

选择相册图片或打开相机

API -->  媒体 -->  图片

uni.pageScrollTo

指定滚动条滚动位置

uni.setStorageSync 

持久化存储

API --> 数据缓存

uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						console.log(res.tempFilePaths[0])
						
						uni.pageScrollTo({
							scrollTop: 999999,
							duration: 0
						})
						
						uni.setStorageSync('chatList', JSON.stringify(this.chatList))
						
					}
				})

UniAPP 自定义组件与通信

（1）自定义组件概念

组件是 `vue` 技术中非常重要的部分，组件使得与ui相关的轮子可以方便的制造和共享，进而使得vue使用者的开发效率大幅提升，在项目的` component `目录下存放组件，`uni-app` 只支持 `vue` 单文件组件（.vue 组件）

组件可以使用「全局注册」和「页面引入」两种方式进行使用，使用分为三步：

导入 `import xxx from 'xxx'`

注册 `Vue.use('xx',xx)` `components:{ xxx }`

使用 ` <xx />`

（2）父子组件通信

1. 父组件通过自定义属性向子组件传递数据

2. 子组件通过 `props` 接收父组件传递的数据

1. 父组件通过自定义事件标签向子组件传递事件

2. 子组件通过触发父组件定义事件方式修改父组件数据

（3）slot 数据分发与作用域插槽

1. 父组件通过调用子组件内部嵌套 html 内容作为` slot `分发给子组件

2. 子组件通过在 `slot` 标签上添加属性，向父组件通信数据，作用域插槽

（4）全局事件定义及通信

1. 在整个应用的任何地方均可以使用` uni.$on `创建一个全局事件

2. 在整个应用的任何地方也均可以使用 `uni.$emit` 来触发全局事件，实现多组件间的数据通信

UniAPP Vuex 状态管理

1. 概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. 应用场景

Vue多个组件之间需要共享数据或状态。

3. 关键规则

State：存储状态数据

Getter：从状态数据派生数据，相当于 State 的计算属性

Mutation：存储用于同步更改状态数据的方法，默认传入的参数为 state

Action：存储用于异步更改状态数据，但不是直接更改，而是通过触发 Mutation 方法实现，默认参数为context

Module：Vuex 模块化

4. 交互关系

5. 使用方式

<template>
	<view>
		<text>通讯录</text>
		<view>{{userName}}</view>
		<view>
			<button type="default" @click="login('蜡笔小新')">登陆</button>
			<button type="default" @click="logout">退出</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex' 
	export default {
		data() {
			return {
				
			}
		},
		onLoad(){
			
		},
		computed:{
			...mapState(['userName'])
		},
		methods: {
			...mapActions(['login', 'logout'])
		}
	}
</script>

<style>

</style>

运行环境判断与跨端兼容

（1）开发环境和生产环境

`uni-app` 可通过 `process.env.NODE_ENV` 判断当前环境是开发环境还是生产环境，一般用于连接测试服务器或生产服务器的动态切换。

在HBuilderX 中，点击「运行」编译出来的代码是开发环境，点击「发行」编译出来的代码是生产环境

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

（2）判断平台

平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。

编译期判断编译期判断，即[条件编译](https://uniapp.dcloud.io/platform)，不同平台在编译出包后已经是不同的代码

// #ifdef H5
  alert("只有h5平台才有alert方法")
// #endif
// 如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。

运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 `uni.getSystemInfoSync().platform` 判断客户端环境是 Android、iOS 还是小程序开发工具

 switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
 }

（3）跨端兼容](https://uniapp.dcloud.io/platform?id=跨端兼容)

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足，但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

大量写 if else，会造成代码执行性能低下和管理混乱。

编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。

`uni-app` 参考这个思路，为 `uni-app` 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

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

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

`\#ifdef`：if defined 仅在某平台存在

`\#ifndef`：if not defined 除了某平台均存在

**%PLATFORM%**：平台名称

**%PLATFORM%** **可取值如下：**

 

1