【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系列。再后来会逐渐成熟，向大家展现更简洁明了的知识汇总！

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

原文地址：https://blog.csdn.net/Reeuse/article/details/143684757

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！