探索UniApp：跨平台应用开发的新选择

2301_78473376

已于 2024-04-24 16:19:30 修改

阅读量1.4k

点赞数 43

文章标签： uni-app vue.js 前端

于 2024-04-24 16:13:17 首次发布

本文链接：https://blog.csdn.net/2301_78473376/article/details/138162209

版权

什么是编译器

uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时实现的：

编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码。
运行时：动态处理数据绑定、事件代理，保证Vue和平台宿主数据的一致性；

uni-app项目根据所依赖的Vue版本不同，编译器的实现也不同：

vue2：uni-app编译器基于wepback实现
vue3：uni-app编译器基于Vite实现，编译速度更快，详见：vue3和vite双向加持，uni-app性能再次提升

uni-app项目根据创建方式的不同，编译器在使用上也有差异：

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

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

#条件编译

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

#使用方法

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#文件类型变化

#文件内代码架构的变化

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title></title>
			<script type="text/javascript">
			</script>
			<style type="text/css">
			</style>
		</head>
		<body>
		</body>
	</html>

复制代码

	<template>
		<view>
		注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。
		</view>
	</template>
	<script>
		export default {
		}
	</script>
	<style>
	</style>

复制代码

#外部文件引用方式变化

	<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

复制代码

#组件/标签的变化

以前是html标签，比如 <div> ，现在是小程序组件，比如 <view> 。

那么标签和组件有什么区别，不都是用尖括号包围起来一段英文吗？

uni-app 参考小程序规范，提供了一批内置组件。

#js的变化

	<html>

js要require进来，变成了对象。在hello uni-app的 common 目录有一个工具类 util.js ，可以在hello uni-app中搜索这个例子查看。hello uni-app示例代码可从 github 获取。

	<script>
		var util = require('../../../common/util.js');  //require这个js模块
		var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
	</script>

复制代码

而在这个 util.js 里，要把之前的 function 封装为对象的方法

	function formatTime(time) {
		return time;//这里没写逻辑
	}
	module.exports = {
		formatTime: formatTime
	}

复制代码

当然还有一些高级的用法

	// 直接使用js模块的属性。在hello uni-app有示例
	var dateUtils = require('../../../common/util.js').dateUtils;
	// 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例
	import * as echarts from '/components/echarts/echarts.simple.min.js';

复制代码

css外部文件导入。全局样式，在根目录下的 app.vue 里写入，每个页面都会加载 app.vue 里的样式。

	<style>
		@import "./common/uni.css";
		.uni-hello-text{
			color:#7A7E83;
		}
	</style>

复制代码

另外，vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库。详见

cli 方式创建的项目，编译器安装在项目下。编译器不会跟随HBuilderX升级。如需升级编译器，可以参考：更新依赖到指定版本。
HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
条件编译处理多端差异

#为什么选择条件编译处理跨端兼容

uni-app 已将常用的组件、API封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。
大量写 if else，会造成代码执行性能低下和管理混乱。
编译到不同的工程后二次修改，会让后续升级变的很麻烦。
为每个平台重写，明明主业务逻辑又一样
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称
uni-app 项目中配置环境变量主要有如下三种方式：

#vue-config.js

在 vue.config.js 中可以修改 webpack 配置，包括环境变量，具体参考 vue-config.js。

#package.json

在自定义条件编译平台时，可以在 package.json 文件的 env 节点下配置环境变量，具体参考 package.json

#.env

CLI 创建的项目中可以在根目录中放置 .env 文件来指定环境变量，具体参考：Vue2，Vue3。

#注意
uni-app x不支持自定义环境变量。
你可以通过如下入口，对uni-app编译器进行配置：

manifest.json

在manifest.json中，你可以配置Vue的版本（Vue2/Vue3），以及发行H5平台路由模式，详见： manifest.json

vue.config.js

在 vue.config.js 中可以修改 webpack 配置，包括环境变量，具体参考 vue-config.js。

vite.config.js

在 vite.config.js 中可以修改 Vite 配置，包括环境变量，具体参考 vite.config.js。

package.json

在自定义条件编译平台时，可以在 package.json 文件的 env 节点下配置环境变量，具体参考 package.json

.env

CLI 创建的项目中可以在根目录中放置 .env 文件来指定环境变量，具体参考：环境变量。
Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，只关注视图层，易于上手。所有东西都是响应式的。

我们提供了免费视频教程，在看此文档同时建议结合 vue入门视频教程，帮助你更加快速掌握。

致谢

本文大部分内容来源于vue官网，但结合 uni-app 做了部分调整，以更有利于开发者快速上手。感谢Vue团队！

#vue相比传统js的开发优势

在传统开发中，用原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。

vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 DOM ，这样大大加快了访问速度和提升用户体验。

vue的优势：
轻量级渐进式框架
视图、数据和结构的分离
响应式双向数据绑定
组件化
虚拟DOM
运行速度快，易于上手
便于与第三方库或既有项目整合
以前是.html文件，开发也是html，运行也是html。
现在是.vue文件，开发是vue，经过编译后，运行时已经变成了js文件。
现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。所以 uni-app 有编译器、运行时的概念。
以前一个 html 大节点，里面有 script 和 style 节点；
现在 template 是一级节点，用于写tag组件， script 和 style 是并列的一级节点，也就是有3个一级节点。这个叫vue单文件组件规范sfc。
以前通过script src、link href引入外部的js和css；
现在是es6的写法， import 引入外部的js模块(注意不是文件)或css；
其实标签是老的概念，标签属于浏览器内置的东西。
但组件，是可以自由扩展的。类似你可以把一段js封装成函数或模块，你也可以把一个ui控件封装成一个组件。
以前的 DOM 操作，如果你想改变某个 DOM 元素的显示内容，比如一个view的显示文字：给view设id，然后js里通过选择器获取 DOM 元素，进一步通过js进行赋值操作，修改 DOM 元素的属性或值。

概念

组件是视图层的基本组成单元。组件是一个单独且可复用的功能模块的封装。一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。内容则写在两个标签之内。

根节点为 <template>，这个 <template> 下只能且必须有一个根 <view> 组件。这是vue单文件组件规范。
一个组件的 data 选项必须是一个函数。

下面是一个基本组件示例，在根<view>组件下再次引入一个<view>组件，并给组件的text区绑定一个data。

	<template>
		<view>
			<view>{{userName}}</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					"userName":"foo"
				}
			}
		}
	</script>

复制代码

基础组件是内置在uni-app框架中的，包括view、text、input、button、video等几十个基础组件，列表详见：uni-app基础组件

但仅有基础组件是不够用的，实际开发中会有很多封装的组件。

比如我们需要一个五角星点击评分的组件，在DCloud的插件市场里可以获取到：uni-rate 评分 - DCloud 插件市场

把这个uni-rate组件导入到你的uni-app项目下，在需要的vue页面里引用它，就可以在指定的地方显示出这个五角星组件。

	<!-- 在index.vue页面引用 uni-rate 组件-->
	<template>
		<view>
			<uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
		</view>
	</template>

复制代码

#优势

#注册

在注册一个组件的时候，我们始终需要给它一个名字。定义组件名的方式有两种：

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。

在uni-app工程根目录下的 components 目录，创建并存放自定义组件：

│─components            	符合vue组件规范的uni-app组件目录
│  └─componentA         	符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件
│  		└─componentA.vue    可复用的componentA组件
│  └─component-a.vue      可复用的component-a组件

复制代码

#全局注册

uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。

注意

	import Vue from 'vue'
	import pageHead from './components/page-head.vue'
	Vue.component('page-head',pageHead)

复制代码

	<template>
		<view>
			<page-head></page-head>
		</view>
	</template>

复制代码

#局部注册

局部注册之前，在需要引用该组件的页面，导入你想使用的组件。

页面引入组件方式

如下通过两种方式导入一个角标的组件库，详见，推荐使用 easycom 方式引入。

	<!-- 在index.vue引入 uni-badge 组件-->
	<template>
		<view>
			<uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
		</view>
	</template>
	<script>
		import uniBadge from '@/components/uni-badge/uni-badge.vue';//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
		export default {
			components:{uniBadge }//2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步） 
		}
	</script>

复制代码

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

在对象中放一个类似 uniBadge 的变量名其实是 uniBadge : uniBadge 的缩写，即这个变量名同时是：

	<!-- 在index.vue引入 uni-badge 组件-->
	<template>
		<view>
			<uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
		</view>
	</template>
	<script>
		// 这里不用import引入，也不需要在components内注册uni-badge组件。template里就可以直接用
		export default {
			data() {
				return {
				}
			}
		}
	</script>

复制代码

组件是 vue 技术中非常重要的部分，组件使得与ui相关的轮子可以方便的制造和共享，进而使得 vue 使用者的开发效率大幅提升。

uni-app 搭建了组件的插件市场，有很多现成的组件，若下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。uni-app插件市场

可以将组件进行任意次数的复用。
合理的划分组件，有助于提高应用性能。
代码更加方便组织和管理，并且扩展性也更强，便于多人协同开发。
组件化开发能大幅度提高应用开发效率、测试性、复用性等。
使用 kebab-case
使用 PascalCase
Vue.component 的第一个参数必须是静态的字符串。
nvue 页面暂不支持全局组件。
main.js 里进行全局导入和注册
index.vue 里可直接使用组件
传统vue规范： 在 index.vue 页面中，通过 import 方式引入组件，在 components 选项中定义你想要使用的组件。
用在模板中的自定义元素的名称
通过uni-app的easycom： 将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。
easycom是自动开启的，不需要手动开启，有需求时可以在 pages.json 的 easycom 节点进行个性化设置，详见。
不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。
- 包含了这个组件选项的变量名(仅支持驼峰法命名)

2301_78473376

关注

43
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
探索UniApp：跨平台应用开发的新选择

uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxmlwxssjs等代码。运行时：动态处理数据绑定、事件代理，保证Vue和平台宿主数据的一致性；
复制链接

扫一扫