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"]

},

}

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

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

相关推荐
00后程序员张10 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬12 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063212 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq12 小时前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app
Qlittleboy12 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
写代码的jiang12 小时前
打造精简高效的 uni-app 网络请求工具
uni-app
!win !19 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
xw520 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
百思可瑞教育1 天前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
百思可瑞教育2 天前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育