【Vue3】知识汇总，附详细定义和源码详解，后续出微信小程序项目（2）

最新推荐文章于 2025-09-09 11:30:00 发布

原创最新推荐文章于 2025-09-09 11:30:00 发布 · 984 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序

Vue3 专栏收录该内容

10 篇文章

订阅专栏

====================
快速跳转：
我的个人博客主页👉：Reuuse博客
新开专栏👉：Vue3专栏
参考文献👉：uniapp官网
❀ 感谢支持！☀
==================

前情提要

🔺因为最近学习的vue语言，发现有很多细节的碎块需要汇总，所以就有了本次系列的开始。❀❀❀
⭐总结的知识会包含总结定义，和源代码解析，可以当作类似于英语单词一样瞄几眼，大概知道即可
那么话不多说我们开始吧 在这里插入图片描述

pages设置页面路径及窗口表现

之前讲的是全局配置的话，这个就是页面配置
在这里插入图片描述

分别由三个属性：

path 路径
style 当globalStyle设置，那么页面的权重会覆盖全局
needLogin 判断是否登陆后才可以访问

在这里插入图片描述

以上三个属性中，style格外重要，我们详细看：

🔺pages设置页面路径及窗口表现涉及的知识点包括页面管理、窗口样式和配置项等。

页面管理：通过pages节点接收一个数组，指定应用由哪些页面组成，每个页面包含一个path和一个style属性。
窗口样式：globalStyle用于设置应用的状态栏、导航条、标题、窗口背景色等，而pages.style则用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
配置项：tabBar用于设置底部tab的表现和condition用于启动模式配置，这些配置项在开发期间生效，用于模拟直达页面的场景。
分包机制：由于小程序平台的限制和优化启动速度的需要，可能会用到分包机制，如subPackages和preloadRule，以优化小程序的下载和启动速度。

总的来说，pages.json文件是uni-app中用于全局配置的重要文件，它决定了页面文件的路径、窗口表现、原生的导航栏、底部的原生tabbar等。

以下是一个包含了所有配置选项的 pages.json ：👇

{
	"pages": [{
		"path": "pages/component/index",
		"style": {
			"navigationBarTitleText": "组件"
		}
	}, {
		"path": "pages/API/index",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/component/view/index",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		"list": [{
			"name": "test", //模式名称
			"path": "pages/component/view/index" //启动页面，必选
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "演示",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents":{
			"collapse-tree-item":"/components/collapse-tree-item"
		},
		"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
		"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
		"rpxCalcMaxDeviceWidth": 960,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"height": "50px",
		"fontSize": "10px",
		"iconWidth": "24px",
		"spacing": "3px",
    	"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
		"list": [{
			"pagePath": "pages/component/index",
			"iconPath": "static/image/icon_component.png",
			"selectedIconPath": "static/image/icon_component_HL.png",
			"text": "组件",
      		"iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
       			"text": "\ue102",
        		"selectedText": "\ue103",
        		"fontSize": "17px",
        		"color": "#000000",
        		"selectedColor": "#0000ff"
      		}
		}, {
			"pagePath": "pages/API/index",
			"iconPath": "static/image/icon_API.png",
			"selectedIconPath": "static/image/icon_API_HL.png",
			"text": "接口"
		}],
		"midButton": {
			"width": "80px",
			"height": "50px",
			"text": "文字",
			"iconPath": "static/image/midButton_iconPath.png",
			"iconWidth": "24px",
			"backgroundImage": "static/image/midButton_backgroundImage.png"
		}
	},
  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
      "^uni-(.*)": "@/components/uni-$1.vue"
    }
  },
  "topWindow": {
    "path": "responsive/top-window.vue",
    "style": {
      "height": "44px"
    }
  },
  "leftWindow": {
    "path": "responsive/left-window.vue",
    "style": {
      "width": "300px"
    }
  },
  "rightWindow": {
    "path": "responsive/right-window.vue",
    "style": {
      "width": "300px"
    },
    "matchMedia": {
      "minWidth": 768
    }
  }
}

还是有一些不太明白？那么给一个例句吧：
在这里插入图片描述

“navigationBarBackgroundColor”: “#2B9939” 表示导航栏的背景颜色是绿色（#2B9939）。
“navigationBarTextStyle”: “white” 表示导航栏的文字颜色是白色。
“navigationBarTitleText”: “二攸时” 表示导航栏的标题文字是“二攸时”。
“backgroundColor”: “#ccc” 表示背景颜色是灰色（#ccc）。
“backgroundTextStyle”: “light” 表示背景文字的颜色是浅色。
“onReachBottomDistance”: 50 表示当页面滚动到底部时，触发的距离是50像素。

easycom 组件自动引入规则

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

没什么别的，只要注意路径规范：

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

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

taBar设置底部菜单选项jiiconfont图标

taBar 简单来说就是设置底部的导航栏

直接上代码吧！

"tabBar": {
		//默认颜色 被选中时候的颜色
		"color": "#999",  
		"selectedColor": "#FE1C32",
		"borderStyle": "white",
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "首页"
			},{
				"pagePath": "pages/classify/classify",
				"text": "分类"
			},{
				"pagePath": "pages/user/user"
				"text": "我的"
			}
			
		]
	},