uni-app基础

原创已于 2024-10-21 17:34:47 修改 · 772 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2024-04-16 19:37:46 首次发布

内置组件，Vue语法，API文档，项目打包...

一，uni-app基础

1. 为什么要学习uni-app?

1.一套代码可以打包到不同的应用平台:
2.方便入手，就是使用v6语法写小程序，如果有ve和小程序经验的话，甚至直接可以看文档，没有基础可以跟本门谍程入门;3.丰富的生态环境，官方及第三方播件较为丰富。论活跃度高。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

2. uni-app组成和跨端原理

编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime

（1）基本语言和开发规范：

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

uni-app分编译器和运行时（runtime）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。

（2）编译器

编译器分vue2版和vue3版

vue2版：基于webpack实现 vue3版：基于Vite实现，性能更快

（3）运行时（runtime）

uni-app runtime包括3部分：基础框架、组件、API。

（4）逻辑层和渲染层分离

在web平台，逻辑层（js）和渲染层（html、css），都运行在统一的webview里。

但在小程序和app端，逻辑层和渲染层被分离了。

分离的核心原因是性能。

二 .vue语法

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

1. vue的优势

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

2. 文件内代码架构的变化

以前一个 html 大节点，里面有 script 和 style 节点；

现在 template 是一级节点，用于写tag组件， script 和 style 是并列的一级节点，也就是有3个一级节点。这个叫vue单文件组件规范sfc。

3. js的变化

现在script里默认有export default，在里面写data、事件和method

前端改用 MVVM (Model-View-ViewModel的简写)模式，简单来说，Model:代表数据模型，View:只专注视图UI处理，ViewModel:只处理业务和数据。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷，大幅减少代码行数，同时差量渲染性能更好。
uni-app 使用vue的数据绑定方式解决js和 DOM 界面交互的问题。

4. 组件

组件是视图层的基本组成单元；组件是一个单独且可复用的功能模块的封装。

（1）基础内容

icon，text组件，rich-text，progress

view标签是块标签（div），text标签（span）

5. pages.json文件的页面配置与全局配置

globalStyle：用于设置应用的状态栏、导航条、标题、窗口背景色等。

6. rpx单位有内置的视图容器组件-修复

px 即屏幕像素rpx 即响应式

px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

页面元素宽度在 uni-app 中的宽度计算公式：750 * 元素在设计稿中的宽度 / 设计稿基准宽度

7. scrolIView和swiper组件的使用

8. 媒体image组件属性及自定义swiper轮播

9. video视频组件的常见屈性

10. 表单各种不同的组件介绍

uview组件库

11. navigator页面跳转组件

该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

属性： open-type 跳转方式

12. 配置tabBar导航菜单与opentype跳转差异

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

设置底部 tab 的表现

13. vue介绍与传统js的差异化

13. 条件渲染v-if与v-show

14. v-for列表渲染

<template>
	<view>
		<view class="">当前标题：{{title}}</view>
		---------------
		<view v-if="state">uniapp学习</view>
		<view v-else>微信小程序</view>
		-------------
		<view class="goods" v-for="(item,index) in goods" :key="item">
			{{item.title}} - {{item.price}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"uniapp学习",
				state: true,
				goods: [
					{
						title : "商品1",
						price: 22.5
					},{
						title : "商品2",
						price: 56
					}
				]
			};
		}
	}
</script>

<style lang="less">

</style>

15. v-htm和v-bind指令用法

16. v-on事件指令

17. style绑定及随机色案例练习

18. 绑定class的多种方法

19. 小案例点击导航高亮显示

20. v-model数据双向绑定

21. 小案例表单提交-双向绑定与表单配合

22. 模拟真实的表单提交详细介绍表单组件

三 .小程序文档与uni文档的差异化

四、 API 调用

五 .播件市场各种有趣的播件

六 .综合性的实例项目