uni-app 学习笔记（三）uni-app中的各种引用

一、组件引用

组件的引用有三种办法

1、默认写法，即导入——注册——使用

2、vue3使用了新的语法糖，优化了步骤

3、uni-app继续优化为一步，引入easycom机制

但是这种优化是有条件的，页面直接使用，需要符合components/组件名称/组件名称.vue目录结构，这样才可以直接在页面中使用

举个栗子

1. 新建components目录和test组件
   

	<template>
		<view class="content">
			<button type="primary" @click="comunicationBegin">开始监听</button> 
			<view class="data">
				<text>{{val}}</text>
			</view>
			<button type="primary" @click="comunicationOff">结束监听</button> 
			<!-- 点击调用comunicationOff方法 -->
		</view>
	</template>
	
	<script>
		export default {
			data() {
				return {
					val: 2
				}
			},
			onLoad() {

			},
			methods: {
				comunicationOff() {
					uni.$off('add', this.add) //停止add事件的this.add这个监听器
				},
				comunicationBegin() {
					console.log("开始监听")
					setInterval(()=>{
						uni.$emit('add', {
							data: 2
						})
					},1000)
					uni.$on('add', this.add) //这里的this.add表示调用methods中的add方法
				},
				add(e) {
					this.val += e.data
				}
			}
		}
	</script>
	
	<style>
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	
		.data {
			text-align: center;
			line-height: 40px;
			margin-top: 40px;
		}
	
		button {
			width: 200px;
			margin: 20px 0;
		}
	</style>

2. 在index.vue中引入

	<template>
		<test></test>
	</template>
	
	<script>
		export default {
			data() {

			},
			onLoad() {

			},
			methods: {

			}
		}
	</script>
	
	<style>

	</style>

3. 实际效果如下，和原来一样
   

二、js引用

1、js文件引用

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

2、NPM支持

1. 直接使用HBuilderX建立的项目没有package.json，所以需要在终端输入以下代码以初始化npm

npm init -y

若使用cli建立则不用初始化npm

2. 后续若要安装npm包，则在终端执行如下命令

npm install packageName --save

3. 在js使用时按照如下方法使用

import package from 'packageName'
const package = require('packageName')

三、引入css文件

@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

<style>
    @import "../../common/uni.css";

	/* 直接使用 */
    .uni-card {
        box-shadow: none;
    }
</style>

四、引入静态资源

例如图片、视频等文件

1、模板内引入静态资源

<!-- 绝对路径，/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>

2、css引入静态资源

css文件或style标签内引入css文件时（scss、less 文件同理），如下

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

引入静态资源

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