长沙网站服务器,南宁网站建设nayuwang,卫生网站建设方案,网站建设的颜色值快速跳转#xff1a; 我的个人博客主页#x1f449;#xff1a;Reuuse博客 新开专栏#x1f449;#xff1a;Vue3专栏 参考文献#x1f449;#xff1a;uniapp官网 ❀ 感谢支持#xff01;☀
前情提要
#x1f53a;因为最近学习的vue语言#xff0c;发现有很多细节… 快速跳转 我的个人博客主页Reuuse博客 新开专栏Vue3专栏 参考文献uniapp官网 ❀ 感谢支持☀
前情提要
因为最近学习的vue语言发现有很多细节的碎块需要汇总所以就有了本次系列的开始。❀❀❀ ⭐总结的知识会包含总结定义和源代码解析可以当作类似于英语单词一样瞄几眼大概知道即可 那么话不多说我们开始吧 vue 前情提要pages设置页面路径及窗口表现easycom 组件自动引入规则taBar设置底部菜单选项jiiconfont图标 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 / landscaperpxCalcMaxDeviceWidth: 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.4list: [{pagePath: pages/component/index,iconPath: static/image/icon_component.png,selectedIconPath: static/image/icon_component_HL.png,text: 组件,iconfont: { // 优先级高于 iconPath该属性依赖 tabbar 根节点的 iconfontSrctext: \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
templateview classcontainercomp-a/comp-auni-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/usertext: 我的}]},得出结果如下 那么今天就到这里吧 ▲这次的知识汇总框架只是一次尝试后续会陆续跟新vue系列。再后来会逐渐成熟向大家展现更简洁明了的知识汇总
一个小小的赞是对我最大的鼓励 感谢你们看到这里下次见~
