uniapp学习【上手篇】

目录

前言

目录结构

pages页面概念

App.vue

main.js

代码时序

绝对路径和相对路径

绝对路径

相对路径

引用JS

引用CSS

引用静态资源

easycom

其它

---

前言

从本文开始，该文章将会不断有续篇发布，谨以此文纪念我学习uniapp的时光。

1.本文适合什么人？

• 具备HTML5/CSS/JavaScript(es5/es6标准)技能
• 具备Vue3开发能力
• 了解HBuilderX编译器使用

2.本文学习环境是什么？

• 基于HBuilderX平台开发
• 使用vue3开发

目录结构

使用HBuilderX创建一个“uni-app项目”，如下图所示：

创建后的项目结构如下图所示：

结构各部分功能介绍如下：

• pages：页面目录
• unpackage：发行目录
• App.vue：应用根组件
• index.html：HTML模板
• main.js：入口文件
• manifest.json：应用配置
• pages.josn：页面配置

pages页面概念

uni-app中的页面，默认保存在pages目录下。

每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages中注册的页面，uni-app会在编译阶段进行忽略。

一个示例pages.json：

{"pages": [ {"path": "pages/index/index"}],"globalStyle": {"navigationStyle":"custom"}
}

创建page页面，可以在pages目录里手动创建，然后再去pages.json里手动注册。

而在HBuilderX里可以“右键项目 -> 新建页面”，这样创建的页面会自动注册，如下图所示：

因为pages非常重要且知识点非常多，后面会单独出一篇文章，有兴趣可以关注我的专栏

App.vue

在uni-app中有“应用生命周期”和“页面生命周期”两个概念：

• 应用生命周期：整个项目的生命周期
• 页面生命周期：一个页面单独的生命周期（类似于Vue中的组件生命周期）

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是应用入口文件。

但App.vue本身不是页面，这里不能填写视图元素，也就是没有<template>

App.vue的作用有：“监听应用生命周期”、“配置全局样式”、“配置全局的存储globalData”

应用生命周期仅可在App.vue中监听，在页面中监听无效

下面是一个示例App.vue文件：

<script>export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script><style>/*每个页面公共css */
</style>

main.js

main.js是uni-app的入口文件。

main.js主要作用是初始化vue实例、定义全局组件、使用需要的插件

在uni-app中初始化vue实例必须使用“createSSRApp”方法创建app应用，并且最后需要返回这个对象

一个示例main.js文件：

import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}

代码时序

我们所写的代码，在应用启动时，按下面的顺序加载：

1. main.js的export function createApp()外的代码、任何页面 / 组件的script中export default外的代码
2. main.js的export function createApp()中的代码
3. app.vue中onLaunch的代码
4. 首页的onLoad
5. 首页的onReady

绝对路径和相对路径

在这里将介绍uni-app中的绝对路径和相对路径

假设我们有一个项目，目录为：“E://myUniAppStudy”

绝对路径

从项目根目录开始的完整路径，与当前文件位置无关

例如“/static/logo.png”表示“myUniAppStudy/static/logo.png”，也可以理解为：“E:/myUniAppStudy/static/logo.png”

因此绝对路径的关键在于路径前的一个“/”

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view></view>
</template>

当使用import语句导入代码文件或静态资源时，“@/”表示项目根目录的绝对路径。

如：import { add } from "@/common/utils"

相对路径

相对路径分为两种情况：“编译时”和“运行时”

• 编译时：一个文件或目录相对于另一个文件或目录的位置
• 运行时：一个文件相对于当前页面路由的位置

PS：不建议使用运行时的相对路径，应使用绝对路径

<template><!-- 绑定动态路径 --><image :src="src" />
</template>
<script setup>
// 编译时：使用 import 语句相对路径导入图片
import logo from "../../static/logo.png";
console.log(logo); // import 语句会在编译阶段根据当前文件位置转换为绝对路径// 运行时
// 错误的相对路径用法，image组件会在运行时根据当前页面路由来转换该相对路径，当不同的页面使用custom组件时，转换的路径是不同的
// 应该使用绝对路径：/static/logo.png，这样可以确保在任意页面都访问到正确的图片地址
const src = "../../static/logo.png";uni.navigateTo({// 运行时// 错误的相对路径用法，路由会在运行时根据当前页面路由来转换该相对路径// 应该使用绝对路径：/pages/index/indexurl: "../../pages/index/index",
});
</script>

引用JS

在js文件或<script>标签内引入js文件时，可以使用下面两种方式：

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

• js不支持以 / 开头的绝对路径引入
• npm install packageName --save：安装npm包
• import package from 'packageName'：在js中引入npm包

引用CSS

使用“@import”可以导入外联样式表，“@import”后跟需要导入的外联样式表的路径

注意：在导入后，必须以“;”结尾，表示导入结束

<style>@import "../../common/uni.css";/* 或 *//* @import "@/common/uni.css"; */.uni-card {box-shadow: none;}
</style>

引用静态资源

假设有如下目录结构：

├── pages                            
│   └── index
│       │── index.uvue  
│       └── icon.png                  
└── static                             └── logo.png                  

正常情况下，下面的静态文件都可以被引用到：

<!-- /pages/index/index.vue -->
<template><view class="content"><image src="../../static/logo.png" /><image src="/static/logo.png" /><image src="@static/logo.png" /></view>
</template>

但是引入非static下的文件，无论是相对还是绝对，都无法显示，这个时候就需要在“js”中引入

<!-- /pages/index/index.vue -->
<template><view class="content"><image :src="src" /></view>
</template><script>
// 使用 import 引入静态资源，并在 data 中赋值引用
import icon_src from './icon.png'
export default { data() {return { src: icon_src}},
}
</script>

原因：

• static是uni-app官方规定的静态资源根目录，因此在打包时会被原样打包，不会经过webpack等构建工具
• pages目录存放页面，编译时路径会重写

为此，下面是最佳实践：

• 所有静态资源（图片、字体）统一放在static目录下
• 若需在页面目录中存放资源，必须使用“相对路径”

easycom

easycom是uni-app用来方便引入组件而做的规范

传统的vue，需要注册、引入、使用，三个步骤，easycom允许只要组件路径符合规范，就可以不用引用、注册，直接在页面中使用。

<template><view class="container"><comp-a></comp-a><uni-list></uni-list></view>
</template>
<script>// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用export default {data() {return {}}}
</script>

路径规范：

1. 安装在项目根目录的components目录下，并符合“components/组件名称/组件名称.vue”
2. 安装在uni_modules下，路径为“uni_modules/插件ID/components/组件名称/组件名称.vue”

目录结构：

┌─components
│  └─comp-a
│    └─comp-a.vue      符合easycom规范的组件
└─uni_modules          [uni_module](/plugin/uni_modules.md)中符合easycom规范的组件└─uni_modules└─uni-list└─components└─uni-list└─ uni-list.vue

不管components目录下安装了多少组件，easycom打包会自动剔除没有使用的组件

其它

更多uni-app学习可以参考我的专栏：

uni-app_是洋洋a的博客-CSDN博客