当前位置: 首页 > Web前端 > HTML

考研题小程序云开发-目录结构及配置文件

时间:2023-03-28 11:29:49 HTML

1.小程序的目录结构小程序的主要开发语言是JavaScript,小程序的开发和普通的web开发非常相似。对于前端开发者来说,从web开发迁移到小程序的开发成本并不高,但两者还是有一些区别的。Web开发人员在开发网页时,只需要使用带有一些辅助工具或编辑器的浏览器即可。小程序的发展是不同的。需要经过申请小程序账号、安装小程序开发者工具、配置项目等流程。小程序框架提供了自己的视图层描述语言WXML和WXSS,以及JavaScript,并提供了视图层和逻辑层之间的数据传输和事件系统,让开发者专注于数据和逻辑。1.1.从小程序和web的对比可以清楚的看出,小程序的代码由四部分组成:JSON配置、WXML模板、WXSS样式、JS逻辑交互。1.2.项目目录结构下面看看新建的小程序应用和初始化的考研刷题小程序的项目目录结构。2.小程序配置文件一个小程序应用包括两个基本的配置文件。一个是全局的app.json,一个是页面的page.json。2.1.全局配置app.json小程序根目录下的app.json文件,用于全局配置微信小程序,判断页面文件路径,窗口性能,设置网络超时,设置多标签页等。以考研小程序为例。以下是一个包??含一些常用配置选项的app.json:{"pages":["pages/index/index","pages/home/home","pages/test/test","pages/result/result","pages/history/history","pages/rank/rank","pages/guide/guide","pages/my/my"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"考研小博士","navigationBarTextStyle":"black"},"tabBar":{"color":"#aaa","selectedColor":"#ffa517","borderStyle":"black","backgroundColor":"#ffffff","list":[{"pagePath":"pages/home/home","iconPath":"/image/sy2.png","selectedIconPath":"/image/sy2-a.png","text":"ExamBank"},{"pagePath":"pages/rank/rank","iconPath":"/image/zxly2.png","selectedIconPath":"/image/zxly2-a.png","text":"ranking"},{"pagePath":"pages/my/my","iconPath":"/image/wd2.png",“选择ectedIconPath":"/image/wd2-a.png","text":"My"}]},"sitemapLocation":"sitemap.json"}pages:页面路径列表;window:用于设置小程序状态栏、导航栏、标题、窗口背景色;tabBar:底部标签栏的表现;sitemapLocation:指定sitemap.json的位置;注:这里只是对我的小程序项目中用到的配置项的解释考研题,更多多个配置项可以自己去技术官网查看2.1.1.页面的文件名不需要写文件后缀,框架会自动找..的四个文件。json,.js,.wxml,.wxss在相应位置进行处理,当不指定entryPagePath时,数组第一项代表小程序的初始页面(首页)。"pages":["pages/index/index","pages/home/home","pages/test/test","pages/result/result","pages/history/history","pages/rank/rank","pages/guide/guide","pages/my/my"]2.1.2、windowbackgroundColor:窗口的背景色;backgroundTextStyle:下拉加载navigationBarBackgroundColor:导航栏背景色;navigationBarTitleText:导航栏标题文字内容;navigationBarTextStyle:导航栏标题颜色,只支持黑/白;2.1.3、tabbar如果小程序是多tab应用(在客户端窗口底部或顶部有一个tabbar用来切换页面)。可以通过tabBar配置项指定标签栏的表现以及标签切换时显示的对应页面。其中,列表接受一个数组,并且只接受最少2个最多5个tabs。选项卡按照数组的顺序排序,每一项都是一个对象。在考研小程序项目中,我配置了三个,分别是题库、排名、我的。"tabBar":{"color":"#aaa","selectedColor":"#ffa517","borderStyle":"black","backgroundColor":"#ffffff","list":[{"pagePath":"pages/home/home","iconPath":"/image/sy2.png","selectedIconPath":"/image/sy2-a.png","text":"questionbank"},{"pagePath":"pages/rank/rank","iconPath":"/image/zxly2.png","selectedIconPath":"/image/zxly2-a.png","text":"rank"},{"pagePath":"pages/my/my","iconPath":"/image/wd2.png","selectedIconPath":"/image/wd2-a.png","text":"my"}]}2.2,page配置各个小程序页面,也可以使用同名.json文件配置该页面的窗口性能。页面中的配置项会覆盖app.json窗口中相同的配置项。注:这里我只解释我考研小程序项目中用到的配置项。更多配置项,请到技术官网查看。例如首页的配置index.json:{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"考研小博士","backgroundColor":"#eeeeee","backgroundTextStyle":"light"}backgroundColor:窗口的背景色;backgroundTextStyle:下拉加载样式,只支持深色/浅色;navigationBarBackgroundColor:导航栏背景颜色;navigationBarTitleText:导航栏标题文字内容;navigationBarTextStyle:导航栏标题颜色,只支持黑/白;