uni-app快速入门(四)--maninfest.json及pages.json配置

server/2024/11/18 0:41:30/

一、manifest.jaon设置

manifest.json有很多配置项,见下图:

包括基础配置、App图标配置、App启动界面配置、App模块配置、App权限配置、App原生插件配置、App常用其他设置、Web配置、微信小程序配置等。微信小程序需要配置小程序的AppId,可以在界面上改,也可以直接在manifest.json文件里改。如果在文件里改,点页面最下面的源码视图,就进入manifest.json的源码模式:

跨域设置:

在开发H5网站时,开发环境中经常需要解决跨域问题,主要指我们项目中调用的后台API接口,在配置文件里找到:

 "h5" : {
        "title" : "公司微门户",
        "template" : "index.html",
        "router" : {
            "mode" : "hash"
        },
        "devServer" : {
            "https" : false
        }
    }

在devServer中可以这样设置代理:

"devServer" : {

    "proxy":{

         "/api":{

             "target":"http://localhost:8001/api",

              "changeOrigin":true,

               "pathRewrite":{

                   "^/api":""

                }

         }

       }    
           
    }

一、pages.jaon设置

     pages.json文件对uni-app进行全局配置,配置页面文件的路径、窗口样式、原生导航栏、底部的原生tabBar等。开发demo项目的pages.json,我在globalStyle中增加了注释:

pages部分是指定多个页面,和微信小程序一样,应用入口页放在首位,其他随意:

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            },

           {

               //第二个page

            "path": "pages/mycenter/index",
            "style": {
                "navigationBarTitleText": "个人中心"
            },

          }
        }
    ],

关于TabBar:在项目开发中基本都需要用到TabBar,比如电商小程序首页底部有首页、购物车、我的,具体的TabBar的使用可以参考:一文读懂uniapp中的tabBar底部导航_uniapp tabbar-CSDN博客文章浏览阅读8.6k次,点赞11次,收藏15次。UniApp 中的 tabBar 是用来在应用程序底部显示可切换的选项卡的组件,通常用于实现底部导航栏_uniapp tabbarhttps://blog.csdn.net/weixin_47872288/article/details/137888742

关于subPackages分包加载

    因为小程序有体积和资源加载限制,所以各小程序平台提供了分包方式,优化小程序的下载和启动速度。主包主要用于防止默认启动页面(tabBar页面),以及公共资源(js脚本等)。分包的写法,在pages.json增加(可加载文件末尾}前面):

,"subPackages": [
    {
      "root": "user_pages",
      "pages": [
        {
          "path": "profile/index",
          "style": {
            "navigationBarTitleText": "个人资料"
          }
        }
      ]
    }
  ]

其中 "root": "user_pages",指定的user_pages是和pages平级的目录:

  "path": "profile/index", 是相对于user_pages的相对路径,在user_pages/profile/有index.vue页面,另外还可以在pages.json中设置preloadRule分包预载(在进入具体页面前预先加载,打开此页面后会提升分页面的启动速度):

"preloadRule":{

    "pagesA/list/list":{

        "network":"all", //all表示不限网络,wifi表示仅限wifi

        "packages":["__APP__"]  //表示主包

    },

    "pagesB/list/list":{

        "network":"all",

        "packages":["pagesA"]

    },

}

如果大家需要更详细地了解分包,这里再推荐一个帖子:

uniapp----分包_uniapp分包-CSDN博客文章浏览阅读6.5k次,点赞5次,收藏8次。文章介绍了uniapp中如何通过分包开发来应对主包大小限制,包括创建分包文件、min.js中的subPackages和preloadRule配置,以及注意事项。分包对于大型项目至关重要,帮助开发者解决资源加载问题。https://blog.csdn.net/m0_72196169/article/details/132240036


http://www.ppmy.cn/server/142764.html

相关文章

sql server 查看io资源使用

USE AdventureWorks2022; GO SET STATISTICS IO ON; GO SELECT * FROM Production.ProductCostHistory WHERE StandardCost < 500.00; GO SET STATISTICS IO OFF; GO 如果输出physical reads 或者 read-ahead reads 大于0 &#xff0c;则表示有物…

热点更新场景,OceanBase如何实现性能优化

案例背景 这个案例来自一个保险行业的客户&#xff1a;他们的核心系统底层采用了OceanBase数据库作为存储解决方案&#xff0c;然而&#xff0c;在系统上线运行后&#xff0c;出现了一个异常情况&#xff0c;执行简单的主键更新语句时SQL执行时间出现了显著的波动。为了迅速定…

vue elementui el-dropdown-item设置@click无效的解决方案

如图&#xff0c;直接在el-dropdown-item上面设置click&#xff0c;相应的method并没有被触发&#xff0c;查找资料发现需要在它的上级 el-dropdown 处使用 command 方法触发。 【template】 <el-dropdown placement"bottom-end" command"handleCommand&quo…

elementui el-table中给表头 el-table-column 加一个鼠标移入提示说明

前言 在使用el-table 表格中有些表格的表头需要加入一些提示&#xff0c;鼠标移入则出现提示&#xff0c;非常实用&#xff0c;我是通过el-table中的el-tooltip实现的&#xff0c;以下的效果预览 代码实现 <el-table ref"multipleTable" :data"data"…

想租用显卡训练自己的网络?AutoDL保姆级使用教程(PyCharm版)

各位小伙伴们大家好~ 不知道各位同学在科研过程中是否有这样的苦恼 电脑无显卡。难不成我要用CPU跑实验吗&#xff1f;救救我吧电脑显卡算力太低。训练过程慢慢慢慢慢&#xff0c;等半天都出不来结果电脑显卡显存不够&#xff0c;batchsize稍微高一点点&#xff0c;就要爆显存…

(不看后悔系列二)python网络爬虫爬取网络视频

提示&#xff1a;接上篇文章 记录时间&#xff1a;2024-11-12&#xff0c;预计代码到2026年均有效。 先看演示视频 再看图片 文章目录 前言一、爬取思路1. 主要流程2. 代码实现思路 二、功能分析1. 视频网站分析&#xff0c;寻找m3u8文件2. playlist.m3u8视频清晰度3. 寻找秘钥…

【Java Web】Ajax 介绍及 jQuery 实现

文章目录 AJAX介绍XMLHttpRequestjQuery实现Ajax$.ajax()$().load()$.get()$.post() AJAX介绍 AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;是一种创建高效、动态网页应用的网页开发技术。它允许在不重新加载整个页面的情况下进行异步数据更新和交互&#xf…

蓝队知识浅谈(上)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址&#xff1a;蓝队基础之网络七层杀伤链_哔哩哔哩_bilibili 本文主要分享一些蓝队相关的知识。 首先我们先来了解一下什么是蓝队&#xff1f; 蓝队是信息安全领…