20240902uniapp学习工作-优快云博客

本文链接：https://blog.youkuaiyun.com/xiezhuangshunv/article/details/141821189

文件内代码架构的变化

以前一个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" type="text/css"/>

现在

#js要require进来，变成了对象。

在hello uni-app的common目录有一个工具类util.js，可以在hello uni-app中搜索这个例子查看。

<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
}

当然还有一些高级的用法

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

css外部文件导入

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

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

上面的 .uni-hello-test……是css类选择器. uni-hello-text 是类名

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

如下是导入一个角标的组件库，在页面上显示一个abc并且右上角有个数字角标1，

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

如需要全局导入vue组件，即每个页面都可以直接使用而不用引用和注册的话，在项目根目录下的main.js里处理。如下是hello uni-app里的例子。

//main.js
import pageHead from './components/page-head.vue' //导入
Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。

上述的组件使用方式属于传统vue的概念。uni-app 2.7以后推出了更简单的组件使用技术easycom，无需引用和注册组件，直接在template区域使用组件即可。

今天就学到这里吧.