uni-app随笔页面路由与资源的引用

路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router。

#路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。

注意：

页面返回时会自动关闭 loading 及 toast, modal 及 actionSheet 不会自动关闭。
页面关闭时，只是销毁了页面实例，未完成的网络请求、计时器等副作用需开发者自行处理。

页面栈

框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API uni.navigateTo 、使用组件
页面重定向	当前页面出栈，新页面入栈	调用 API uni.redirectTo 、使用组件
页面返回	页面不断出栈，直到目标返回页	调用 API uni.navigateBack 、使用组件、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API uni.switchTab 、使用组件、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API uni.reLaunch 、使用组件

1
2
3

uni.navigateTo({
					url: '/pages/face/face'
				});

互相引用

引用组件

传统vue项目开发，引用组件需要导入 - 注册 - 使用三个步骤，如下：

<template>
	<view>
		<!-- 3.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		components: { uniRate } // 2. 注册组件
	}
</script>

复制代码

Vue 3.x增加了script setup特性，将三步优化为两步，无需注册步骤，更为简洁：

<template>
	<view>
		<!-- 2.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script setup>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>

uni-app的easycom机制，将组件引用进一步优化，开发者只管使用，无需考虑导入和注册，更为高效：

<template>
	<view>
		<!-- 1.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
</script>

在 uni-app 项目中，页面引用组件和组件引用组件的方式都是一样的（可以理解为：页面是一种特殊的组件），均支持通过 easycom 方式直接引用。

easycom 规范详细介绍，参考：easycom

js 文件引入

js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径，形式如下

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

注意

js 文件不支持使用/开头的方式引入

#NPM支持

uni-app支持使用npm安装第三方包。

此文档要求开发者们对npm有一定的了解，因此不会再去介绍npm的基本功能。如若之前未接触过npm，请翻阅NPM官方文档进行学习。

初始化npm工程

若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程：

1	`npm init -y`

复制代码

cli项目默认已经有package.json了。HBuilderX创建的项目默认没有，需要通过初始化命令来创建。

安装依赖

在项目根目录执行命令安装npm包：

1	`npm install packageName --save`

复制代码

使用

安装完即可使用npm包，js中引入npm包：

1 2	`import package from 'packageName' const package = require('packageName')`

复制代码

注意

为多端兼容考虑，建议优先从 uni-app插件市场获取插件。直接从 npm 下载库很容易只兼容H5端。
非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API（兼容小程序 API），比如：支持高德地图微信小程序 SDK。类似jQuery 等库只能用于H5端。
node_modules 目录必须在项目根目录下。不管是cli项目还是HBuilderX创建的项目。
关于ui库的获取，详见多端UI库

引用css

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

示例代码：

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

    .uni-card {
        box-shadow: none;
    }
</style>

模板内引入静态资源

template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

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

复制代码

注意

@开头的绝对路径以及相对路径会经过 base64 转换规则校验
引入的静态资源在非 web 平台，均不转为 base64。
web 平台，小于 4kb 的资源会被转换成 base64，其余不转。
自HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式
App 平台自HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致
支付宝小程序组件内 image 标签不可使用相对路径

#css 引入静态资源

css文件或style标签内引入css文件时（scss、less 文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6）

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

静态资源引入注意事项

通常项目中规定根目录下的 static 为静态资源文件夹（目前暂不支持修改），资源存放此处后，可在任意文件直接使用相对或者绝对路径引用,具体参考上述模板 css/js/uts 中引入静态资源的说明。

而非 static 目录的静态资源，不支持直接引用，需要在 js/uts 中使用 import 来引入，确保路径正确。

综上所述，我们总结一下静态资源引用的注意事项：

在模板或者 css 文件使用 static 目录中的静态资源，无需特殊处理，可直接通过相对路径或者绝对路径直接引入。
在 js/uts 文件使用静态资源，需要使用 import 来引入。
不管在任何文件引入非 static 目中的静态资源，均需在 js/uts 文件使用 import 来引入。
本地插件(非内置原生插件)
本地插件，是uni-app项目nativeplugins目录(目录不存在则创建)下的原生插件。

#第一步：获取本地原生插件
- 方式一：插件市场下载免费uni-app原生插件
可以登录uni原生插件市场，在免费的插件详情页中点击“下载for离线打包”下载原生插件（zip格式），解压到HBuilderX的uni-app项目下的“nativeplugins”目录（如不存在则创建），以下是“DCloud-RichAlert”插件举例，它的下载地址是：https://ext.dcloud.net.cn/plugin?id=36

下载解压后目录结构如下：
- 方式二：开发者自己开发uni-app原生插件
原生插件开发完成后按指定格式压缩为zip包，参考uni-app原生插件格式说明文档。按上图的格式配置到uni-app项目下的“nativeplugins”目录。

#第二步：配置本地原生插件
在manifest.json -> App原生插件配置 -> 选择本地插件 -> 选择需要打包生效的插件 -> 保存后提交云端打包生效。

#第三步：开发调试本地原生插件
在vue页面或nvue页面引入这个原生插件。

使用uni.requireNativePlugin的api，参数为插件的id。
1
const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
复制代码

 #第四步：打包发布
使用自定义基座开发调试本地原生插件后，不可直接将自定义基座apk作为正式版发布。应该重新提交云端打包（不能勾选“自定义基座”）生成正式版本。

页面样式与布局
uni-app 有 vue 页面、nvue 页面、uvue页面。
- vue 页面是 webview 渲染的
- app-nvue 页面是原生渲染的，其样式比 web 会限制更多，另见nvue的css
- app-uvue 页面是原生渲染的，是 web 的css子集，另见uvue的css
uni-app 的 css 与 web 的 css 基本一致。本文没有讲解 css 的用法。在你了解 web 的 css 的基础之上，本文讲述一些样式相关的注意事项。

本文重点介绍 vue 页面，也就是webview中的样式注意事项。

#css预处理器支持
uni-app 支持less、sass、scss、stylus等预处理器。

参考： css预处理器

 #尺寸单位
uni-app 支持的通用 css 单位包括 px、rpx
- px 即屏幕像素
- rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue）端和 H5（vue2）端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置。

uni-app

#uni-app

uni-app随笔页面路由与资源的引用

http://www.dwyblog.cn/2023/02/14/uni-app随笔页面路由/

作者

幸福来敲门

发布于

2023年2月14日

许可协议

uni-app随笔项目结构，页面结构，生命周期上一篇

uni-app随笔_组件下一篇

uni-app随笔页面路由与资源的引用

路由

#路由跳转

页面栈

互相引用

引用组件

js 文件引入

#NPM支持

引用css

模板内引入静态资源

#css 引入静态资源

静态资源引入注意事项

本地插件(非内置原生插件)

#第一步：获取本地原生插件

#第二步：配置本地原生插件

#第三步：开发调试本地原生插件

#第四步：打包发布

页面样式与布局

#css预处理器支持

#尺寸单位