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

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

前情提要

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

---

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

之前讲的是全局配置的话，这个就是页面配置

分别由三个属性：

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

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

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

1. 页面管理：通过pages节点接收一个数组，指定应用由哪些页面组成，每个页面包含一个path和一个style属性。

2. 窗口样式：globalStyle用于设置应用的状态栏、导航条、标题、窗口背景色等，而pages.style则用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

3. 配置项：tabBar用于设置底部tab的表现和condition用于启动模式配置，这些配置项在开发期间生效，用于模拟直达页面的场景。

4. 分包机制：由于小程序平台的限制和优化启动速度的需要，可能会用到分包机制，如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将其精简为一步。

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

1. 安装在项目根目录的components目录下，并符合components/组件名称/组件名称.vue
2. 安装在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": "我的"}]},

得出结果如下👇：

---

🌼那么今天就到这里吧！
▲这次的知识汇总框架只是一次尝试，后续会陆续跟新vue系列。再后来会逐渐成熟，向大家展现更简洁明了的知识汇总！

一个小小的赞是对我最大的鼓励！
感谢你们看到这里，下次见~