uni-app快速入门（四）--maninfest.json及pages.json配置
一、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"]
},
}
如果大家需要更详细地了解分包，这里再推荐一个帖子：
原文地址：https://blog.csdn.net/baozhengw/article/details/143796855
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！