#Uniapp篇：路由pages.json里配置&路由跳转&组件的引入&样式引入

于 2024-12-11 20:36:34 发布
阅读量476 收藏 7
点赞数 5
分类专栏： Uniapp篇 文章标签： uni-app
程序员xiaolibao
本文链接：https://blog.youkuaiyun.com/weixin_47075554/article/details/143911130
版权

路由pages.json里配置

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。

路由跳转

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

路由跳转 uni.navigateTo uni.redirectTo…

https://uniapp.dcloud.net.cn/tutorial/page.html

uni-app 支持在 template 模板中嵌套 和 ，用来进行 条件渲染 和 列表渲染。

nvue 开发与 vue 开发的常见区别

nvue 基于原生引擎的渲染

组件的引入

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

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

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

easycom

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

路径规范指：
安装在项目根目录的components目录下，并符合components/组件名称/组件名称.vue
安装在uni_modules下，路径为uni_modules/插件ID/components/组件名称/组件名称.vue

标准js和浏览器js的区别

uni-app的js代码，h5端运行于浏览器中
非h5端（包含小程序和App），Android平台运行在v8引擎中，iOS平台运行在iOS自带的jscore引擎中，都没有运行在浏览器或webview里。
非H5端，虽然不支持window、document、navigator等浏览器的js API，但也支持标准ECMAScript。

尺寸单位

https://uniapp.dcloud.net.cn/tutorial/syntax-css.html

设计稿1px / 设计稿基准宽度 = 框架样式 1rpx /750rpx
框架样式 1rpx = 750 * 元素在设计稿中的宽度 / 设计稿基准宽度

样式导入

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

【微信小程序】微信小程序 page.json 配置详解：5大步骤带你轻松搞定页面路由
java专栏
11-19 1187
page.json通过本文的详细介绍，相信你已经掌握了微信小程序中配置和管理页面路由的方法。从基础用法到进阶技巧，每一个部分都有详细的解析和示例代码，帮助你更好地管理和引用页面路由。如果你有任何疑问或需要进一步的帮助，欢迎随时留言交流。祝你在微信小程序的开发之旅中一帆风顺！希望这篇文章对你有所帮助，如果你有任何问题或需要进一步的解释，欢迎随时提问！😊。
uniapp使用pages.js模块化
sq7141879的博客
05-22 3054
小刀拉屁股，给你开开眼！直接看图吧 pages.json文件中中把所有信息全部删除，特别注意一定留一对{}否则编译不通过 pages.js 文件 通过pages.js模块化，可以封装路由前置钩子 import Vue from "vue"; import page from "../pages.js"; //获取主包和分包 const { pages, subPackages } = page(); const list = {}; //把主包的页面转换成路由 pages.forEach(item =
uni-app 自己封装的config.js
05-17
uni-app 自己封装的config.js 配置，链接的格式等数据。。。。。。。。。。。。。。。。。。
uni-app js语法
java1234的博客
12-28 1795
小程序也基于标准js扩展了各种wx.xx、my.xx、swan.xx的API。所以uni-app的非H5端，一样支持标准js，支持if、for等语法，支持字符串、数字、时间、布尔值、数组、自定义对象等变量类型及各种处理方法。非h5端（包含小程序和App），Android平台运行在v8引擎中，iOS平台运行在iOS自带的jscore引擎中，都没有运行在浏览器或webview里。非H5端，虽然不支持window、document、navigator等浏览器的js API，但也支持标准ECMAScript。
【uniapp】uniapp 引用 js 组件
wenxueliu的博客
09-09 1798
UniApp作为一款优秀的跨平台开发框架，它可以让我们使用一套代码，并在多个平台上进行编译，从而获得高性能、易扩展和可维护的应用程序。在UniApp开发过程中，我们不仅需要掌握各种UI组件的使用方法，还需要了解如何在项目中引入JS文件。在本文中，我将介绍UniApp中如何引入JS的方法。
uniapp中购物车demo（全选反选、计算总价、改变商品数量）
weixin_45803990的博客
11-05 6486
复选框checkbox插件下载地址 这个插件可以使用Vue中的双向绑定。（给购物车列表中的数据添加双向绑定的属性即可） 源码 <template> <view class="cart"> <view class="c"> <view class="list" v-for="item in list" :key='item.id'> <view class="l"> <!-- {{item.isChecked}.
uni—app 基础语法
Zhouchangyue的博客
03-13 563
data属性 ata 必须声明为返回一个初始数据对象的函数 如下： 在 main.js 中挂载属性或者方法： Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io'; Vue.prototype.now = Date.now || function () { return new Date().getTime(); ...
05 uniapp配置page.json以及路由的跳转
qq_49104166的博客
12-23 3380
在page.json里面配置顶部和底部tabbar { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } }, { "path": "pages/news/news", "style": {
uni 读取网络json_uni-app怎么使用路由守卫，并且路由配置和pages.json中只写一套...
weixin_42348026的博客
01-30 1715
背景uni-app本身没有路由，无法使用路由守卫。那么有这么一个功能： 当某些页面需要登录，进入之前需要判断是否登录，如果没有登录则跳转到登录页。可以封装公共方法或混入实现，但是不太优雅，这时使用路由守卫实在是太方便了！幸好，插件uni-simple-router给我们提供了1. uni-simple-router使用方法uni-simple-router 是 专为 uni-app 打造的路由管理...
uniapp的pages.json动态配置怎么写
12-14
uniApp的`pages.json`文件主要用于配置应用的页面结构，它是一个静态JSON文件，用于描述应用中每个页面的路径、组件引用以及它们之间的跳转规则。如果你需要动态配置`pages.json`，通常是在运行时根据某些条件（比如...
javascript,小程序,uni-app通用的验证类
12-02
javascript,小程序,uni-app通用的验证类,内置常用的验证方法。。//使用用方法 /* *valit_rule验证规则 *value，验证数据form *true ，一次性全部检测完 / //var vali_result = validate.check(this.data.valit_rule, value, true) /* // valit_rule: { pwdo: [ //【提示信息,规则名,规则参数】 ['原密码', 'length', [1, 20]], ], //密码,多条规则 pwd: [ ['新密码长度', 'length', [6, 20]], ['两次新密码', 'confirm', 'pwdr'], ['新密码', config.conf.pwd_level] ], mobile: [ ['手机号不合规', 'mobile'], ] } }, */
js框架（unijs）正式版
09-15
经过半个月的奋斗js框架终于差不多可以见人了 框架参考jq等优秀的开源框架，用法和jq基本类似。大小只有7k，包括了，选择器，过滤器，ajax，样式操作，style操作，验证，克隆追加等，还封装了，常用的事件，包括长按事件，滑动事件等等，希望大家喜欢。 github：https://github.com/lizhilicctv/unijs 码云仓库：https://gitee.com/lizhiliwo/unijs 由于本人精力有限，难免有bug，你有问题可以在仓库内留言或者给我邮件，你也可以关注我其他作品，谢谢大家。 您的关注就是我努力的动力。
uniapp_了解小程序
浪漫韫秋
09-18 535
OnShow()是页面打开的时候触发，OnHide()是页面隐藏的时候触发；了解uniapp之前，先了解下小程序；OnUnload()是页面卸载；先加载、然后显示、然后渲染；先将原来的内容删除；
前端学习（1723）：前端系列javascript之uniapp语法下
歌谣的博客
07-20 296
<template> <view> <view v-if="show"> uniapp </view> <view> geyao </view> <view v-for="item in items"> {{item}} </view> <view v-on:click="onClick('uni-app')"> 点击 </vie.
uni-app（2）基础语法
黑卡米的专栏
05-04 863
学习uni-app需要的基础知识。
uniapp 创建一个公共的JS方法
weixin_35752233的博客
01-03 1266
在 uni-app 中，可以使用 Vue.js 的 mixin 方法来创建公共的 JavaScript 方法。 例如，在创建一个 mixin 对象并添加一个公共方法： const myMixin = { methods: { myMethod() { console.log('Hello from myMethod') } } } 然后，在你的 Vue 组件中...
【js】uniapp项目引入 js文件，以及全局使用
AAAXiaoApple的博客
07-03 7822
全局引入， 再在页面中使用。util.js 文件内容。
uni-app
S_i_mple的博客
04-21 4215
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uniapp出现错误：app.js类型错误
qf优快云的博客
05-26 5381
typeError: cannot read property ‘mark’ of undefined 勾选 小程序的 增强编译 是使用uniapp的话 不能直接修改 编译后的文件 project.config.json 修改uniapp项目中的 manifest.json 打开增强编译"enhance": true "mp-weixin": { /* 微信小程序特有相关 */ "appid": "wxfb52f2d7b2f6123a", "setting": { "url
文件查找失败：'D:/packageCard/fusion_wt_html/fusion_wt_uni_app/pages/phone/text/index.vue' at pages.json:1
最新发布
03-11
<think>好的，我现在需要解决用户遇到的Vue文件路径错误问题。用户提到的错误信息是“文件查找失败 'D:/packageCard/fusion_wt_html/fusion_wt_uni_app/pages/phone/text/index.vue' at pages.”，这看起来像是在配置或引用文件时路径不正确导致的。 首先，我应该考虑常见的路径错误原因。可能的情况包括：路径拼写错误、大小写不一致、文件实际位置与引用位置不符、配置文件（如pages.json）中的路径配置错误，或者使用的别名（alias）未正确设置。另外，在Vue或uni-app项目中，路径引用通常需要相对于项目根目录或当前文件的位置，所以需要检查是否正确使用了相对路径。 接下来，我需要分步骤引导用户检查这些可能性。第一步，确认文件的实际存在性。用户需要检查指定的路径下是否存在index.vue文件。可能有时候文件被移动或重命名，导致引用失效。特别是在Windows系统中，路径的大小写可能不敏感，但某些工具或配置可能对大小写敏感，所以需要确保路径中的每个目录和文件名的大小写与实际完全一致。 第二步，检查pages.json的配置。uni-app项目的页面路由需要在pages.json中注册。用户需要打开这个文件，查看是否在pages数组中正确注册了该页面。例如，配置项应该是类似{"path": "pages/phone/text/index", "style": {...}}。这里要注意路径是否缺少或多余了斜杠，或者路径中的目录名是否正确。 第三步，检查引用路径是否正确。如果用户在代码中通过路由跳转或其他方式引用了该文件，比如使用uni.navigateTo({url: '/pages/phone/text/index'})，需要确认url的路径是否正确。同时，注意是否漏掉了文件扩展名.vue，不过在uni-app中通常不需要加扩展名，但有时候配置可能需要。此外，相对路径的引用是否正确，比如从当前文件到目标文件的相对路径是否有误，比如是否应该使用../或./等。 第四步，检查Webpack别名配置。如果项目中使用别名（如@代表src目录），需要确认别名配置是否正确。在vue.config.js或uni-app的配置文件中，是否有正确的别名设置，并且引用时是否正确使用了别名。例如，是否应该使用@/pages/phone/text/index而不是绝对路径。 第五步，重启开发服务器。有时候路径更改后，开发服务器可能没有及时更新，导致缓存问题。重启服务可能会解决这个问题。 第六步，检查开发工具设置。某些IDE或编辑器可能存在缓存或索引问题，导致文件路径显示错误。尝试重新打开项目或清理缓存，看看是否能解决问题。 此外，用户可能需要检查操作系统中的文件路径限制，比如Windows中的长路径问题，或者是否有特殊字符导致的问题。虽然用户给出的路径中没有明显特殊字符，但有时隐藏字符或空格也可能引发问题。 如果以上步骤都没有解决问题，可能需要更深入的排查，比如查看构建工具的详细日志，确认是否有其他依赖或插件影响了路径解析。或者检查项目结构是否有误，比如pages目录是否确实位于项目根目录下，而不是某个子目录中。 总结来说，解决路径错误需要系统地检查文件是否存在、配置是否正确、引用方式是否恰当，并考虑开发环境和工具的影响。逐步排除每个可能性，最终找到导致问题的根本原因。</think>### 解决Vue文件路径错误的步骤 #### 1. **确认文件实际存在** - 检查路径 `D:/packageCard/fusion_wt_html/fusion_wt_uni_app/pages/phone/text/index.vue` 是否存在。 - **注意**：Windows路径需严格匹配大小写（部分工具敏感）[^1]。 - 若文件被移动或重命名，需修正引用路径。 #### 2. **检查`pages.json`配置** - 在uni-app中，页面需在 `pages.json` 的 `pages` 数组中注册。 - 示例配置： ```json { "pages": [ { "path": "pages/phone/text/index", "style": { /* 样式配置 */ } } ] } ``` - **常见错误**： - 路径缺少`pages/`前缀。 - 目录层级错误（如`phone`拼写为`phon`）。 #### 3. **检查代码中的路径引用** - **路由跳转**：`uni.navigateTo` 的URL需与注册路径一致。 ```javascript uni.navigateTo({ url: '/pages/phone/text/index' // 无需扩展名 }); ``` - **组件引用**：若通过`import`引入，需使用相对路径或别名： ```javascript import IndexPage from '@/pages/phone/text/index.vue'; // 使用别名@ ``` #### 4. **验证Webpack别名配置** - 在 `vue.config.js` 或 `uni-app` 配置中，确认别名是否正确定义： ```javascript const path = require('path'); module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src') // 确保路径指向项目根目录 } } } }; ``` #### 5. **重启开发服务器** - 修改路径后，运行 `npm run dev` 或 `uni-app` 的编译命令，避免缓存问题。 #### 6. **IDE/工具缓存问题** - 尝试关闭IDE（如HBuilderX、VSCode）并重新打开项目。 - 执行清理操作：删除 `node_modules` 和 `unpackage` 目录后重新安装依赖。 --- ### 其他注意事项 - **绝对路径 vs 相对路径**： - 使用别名（如`@`）时，路径从项目根目录开始。 - 相对路径需基于当前文件位置（如`../../pages/phone/text/index`）。 - **控制台报错分析**： - 若报错包含具体行号，检查对应代码段的路径逻辑。 - 查看编译日志，确认是否因其他依赖导致路径解析失败。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值