白话uni-app

最新推荐文章于 2025-02-17 17:56:05 发布

原创

最新推荐文章于 2025-02-17 17:56:05 发布 · 998 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue

本文适合对h5有一定了解，但对uni-app、小程序和vue不熟悉的开发者。介绍了uni-app如何从h5的网络模型、文件类型、代码架构、外部文件引用方式等方面发生变化，涉及组件、js、css的差异，以及工程结构和页面管理的改变。通过本文，读者能快速理解uni-app的核心概念和与传统前端开发的区别。

本文适合对象：

已经通过uni-app官网对产品概念有基本了解。
熟悉h5，但对小程序、vue不了解

传统的h5只有1端，即浏览器。而uni-app可跨多端，虽仍属前端，与传统h5有不同。
如果你对h5比较了解，可通过本文快速了解uni-app。

网络模型的变化

以前网页大多是b/s，服务端代码混合在页面里；

现在是c/s，前后端分离，通过js api(类似ajax的uni.request)获取json数据，把数据绑定在界面上渲染。

文件类型变化

以前是.html文件，开发也是html，运行也是html。
现在是.vue文件，开发是vue，经过编译后，运行时已经变成了js文件。
现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。所以uni-app有编译器、运行时的概念。

文件内代码架构的变化

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

现在template是一级节点，用于写tag组件，script和style是并列的一级节点，也就是有3个一级节点。

以前

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

现在。这个叫vue单文件组件规范sfc

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

<script>
	export default {
    
    
		
	}
</script>

<style>

</style>

外部文件引用方式变化

以前通过script src、link href引入外部的js和css；

现在是es6的写法，import引入外部的js模块(注意不是文件)或css

以前

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

最低0.47元/天解锁文章