微信小程序的配置文件由哪些部分组成?

小程序官方建议把所有小程序的页面,都存放在pages目录中,以单独的文件夹存在,如图所示:

其中,每个页面由4个基本文件组成,它们分别是:js文件(页面的脚本文件,存放页面的数据、事件处理函数等)、json文件(当前页面的配置文件,配置窗口的外观、表现等),.wxml文件(页面的模板结构文件)和.wxss文件(当前页面的样式表文件)。下面来详细介绍:

1.JSON配置文件的作用

JSON是一种数据格式,在实际开发中,JSON总是以配置文件的形式出现。小程序项目中也不例外:通过不同

的.json配置文件,可以对小程序项目进行不同级别的配置。

小程序项目中有4种json配置文件,分别是:

①项目根目录中的app.json配置文件

②项目根目录中的project.config.json配置文件

③项目根目录中的sitemap.json配置文件

④每个页面文件夹中的.json配置文件

2.app.json文件

app.json是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。Demo项目里边的app.json配置内容如下:

简单了解下这4个配置项的作用:

①pages:用来记录当前小程序所有页面的路径

②window:全局定义小程序所有页面的背景色、文字颜色等

③style:全局定义小程序组件所使用的样式版本

④sitemapLocation:用来指明sitemap.json的位置。

3.project.config.json文件

project.config.json是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:

projectname中保存的是项目名称

appid中保存的是小程序的账号ID

4.sitemap.json文件

注意:sitemap的索引提示是默认开启的,如需要关闭sitemap的索引提示,可在小程序项目配置文件project.config.json的setting中配置字段checkSiteMap为false。

5.页面的.json配置文件

小程序中的每一个页面,可以使用.json文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项。例如:

6.新建小程序页面

只需要在app.json->pages中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件,如图所示:

7.修改项目首页

只需要调整app.json->pages数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染,如图所示:

1.什么是WXML

WXML(WeiXinMarkupLanguage)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。

2.WXML和HTML的区别

①标签名称不同

HTML(div,span,img,a)

WXML(view,text,image,navigator)

②属性节点不同

数据绑定

列表渲染

条件渲染

1.什么是WXSS

WXSS(WeiXinStyleSheets)是一套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS。

2.WXSS和CSS的区别

①新增了rpx尺寸单位

CSS中需要手动进行像素单位换算,例如rem

WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

②提供了全局的样式和局部样式

项目根目录中的app.wxss会作用于所有小程序页面

局部页面的.wxss样式仅对当前页面生效

③WXSS仅支持部分CSS选择器

.class和#id

element

并集选择器、后代选择器

::after和::before等伪类选择器

1.小程序中的.js文件

一个项目仅仅提供界面展示是不够的,在小程序中,我们通过.js文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。

2.小程序中.js文件的分类

小程序中的JS文件分为三大类,分别是:

①app.js

是整个小程序项目的入口文件,通过调用App()函数来启动整个小程序。

②页面的.js文件

是页面的入口文件,通过调用Page()函数来创建并运行页面。

③普通的.js文件

是普通的功能模块文件,用来封装公共的函数或属性供页面使用。

THE END
1.APP移动端开发:全面解析与实战指南为了更好地理解APP移动端开发的全过程,以下将通过一个实战案例进行具体分析。该案例涉及一个电商类应用的开发过程,包括需求分析、技术选型、原型设计、开发实现、测试优化以及上线发布等环节。通过该案例的分析,读者可以更加深入地了解APP移动端开发的实际操作和注意事项。 https://pbids.com/aboutUs/pbidsNews/1861309737267728384
2.写给新手的APP结构指南:首页相关(下)优设网设计上:标签栏高度为98px(@2x),标签栏内的字体作为提示作用,字号为20px;标签的数量一般有3-5个,icon 的设计上要保持简约并且能够精准传达释义,也可以进行品牌基因的融入来突出自己的调性和其他产品的差异化;常用的是线性和面性两种,一般进行结合使用以表明选中状态;iOS11之后面性 icon 开始流行,用品牌色进行区分https://www.uisdc.com/app-structure-guide-home-related-2
3.APP界面元素各种栏状态栏:就是app最顶部显示信号,时间,电量的那一个小条。 ? 2.导航栏 一般来说导航栏位于状态栏下面。 一般会显示标题和返回按钮,也可能会放一些其他功能的入口(例如搜索,其他功能的icon等) ? 3.标签栏(tab bar) ?标签栏一般位于页面的底部,他的作用是让用户快速在不同的视图和模式间进行切换。一般有https://zhuanlan.zhihu.com/p/612747787
4.如何设计总有一款你喜欢的首页app首页的作用本文探讨了app首页设计的重要性,提出了“首页三准则”:初次印象、核心功能展示和个性化内容推荐。通过分析淘宝首页,展示了如何在不同用户阶段满足用户需求。此外,以社区生活服务app千丁为例,分析了其首页设计如何遵循“首页三准则”,并提出改进建议。 摘要由CSDN通过智能技术生成 https://blog.csdn.net/byfworking/article/details/51508671
5.写给新手的APP结构指南:首页相关(上)美团首页顶部保留着定位功能入口,考虑用户使用场景,用户通过产品可以查看定位城市周边所有团购服务,只需要精准定位到区/县/市等即可,如有查看其它区域需求时,可以方便用户点击进行切换。点击定位后进入定位页面,组成结构:直接搜索城市(方便快速选择新城市)+国内/海外tab+当前城市+切换城市+热门城市+所有城市(字母索引,根据https://www.51cto.com/article/580369.html
6.PC端店铺首页的作用不包括()。刷刷题APP(shuashuati.com)是专业的大学生刷题搜题拍题答疑工具,刷刷题提供PC端店铺首页的作用不包括()。A.传递品牌形象B.减少跳失率C.配合营销活动D.提高店铺UV的答案解析,刷刷题为用户提供专业的考试题库练习。一分钟将考试题Word文档/Excel文档/PDF文档转化为在线题https://www.shuashuati.com/ti/d0c474bbaa414013be5a51c965f45381.html?fm=bd2becd1c04b49e5d6c1374c168f4535e7
7.抖音App功能全解析:首页浏览拍摄功能及音乐库优势进入App首页即可浏览,短视频以信息流形式展示,直播脚本设计系统会自动推荐视频内容,首页的“推荐”模块和“关注”模块均为视频内容。 “推荐”模块会展示系统给你推荐的视频,“关注”模块会推荐你关注的抖音账号发布的视频。 2)同一城市 3)用户主页 2.拍摄功能 https://m.bjhwtx.com/h-nd-197286.html
8.交管12123,五大"省心实用"功能——中国太平洋保险(集团)股份有限“免检”不代表“不检”。常说的“6年免检”是免上线检验,还是要去领取一张免检合格标志的。有了交管12123 APP就很方便了,不需要再跑一趟交管部门,直接可以在APP上申领免检合格标志了。我们获得的是一张电子版的免检标志,和纸质版的作用一样。 步骤:打开12123 APP点击“首页”→点击“免检车申领检验标志” https://www.cpic.com.cn/c/2024-06-12/1862496.shtml
9.app开发banner模板有什么作用?–智电网络一、Banner模板的定义和作用 Banner模板,顾名思义,就是用于展示信息的一块区域,通常位于APP界面的顶部或者重要位置。Banner的作用包括: 1. 强调重点:通过在APP首页展示Banner,可以直观地向用户呈现一些重要信息,如优惠活动、新功能介绍等。 2. 引导用户操作:用户可以通过点击Banner,进入相应的功能页面或活动页面,进行http://www.zhidianwl.com/zhidian/2023/2406/
10.毕业后档案转到哪?能自己携带吗?毕业生档案问答必看当前通过“随申办市民云”APP,支持在线申请查询:如学籍档案查询、再生育审批档案查询、工伤认定档案查询、人才引进审批档案查询、涉外婚姻登记档案查询等20个档案查询服务。 “随申办市民云”APP提供多种档案申请查询服务 01、档案有什么作用? 高校毕业生档案在校时被称为学生档案,毕业工作以后在此基础上形成的人事档案,是https://www.thepaper.cn/newsDetail_forward_27998514
11.开发APP的功能心得还有一些APP软件,是针对外用户的,不是针对自己的用户,那么没有本APP的人就会产生排斥心理,因为需要繁琐注册,那么我们就可以通过别的APP登录,这样也可以很好的分享本APP,同时也做到了很好的推广作用。 一个合格的app注册和登录功能,必须具备可用、易用、安全这三个特性才可以,注册流程要尽可能的简单化,不然会很早的https://k.sina.cn/article_7623975713_1c66ca321001012kzg.html
12.解读一下小程序拉起APP的功能腾讯云开发者社区这货只能是同主体的小程序和APP间进行跳转 由app分享小程序卡片的逻辑限制了这货只能在同主体的小程序和APP间进行作用,别想着别人家的APP给你的小程序,或者你的小程序给别人家的APP进行导量。 分享出来的小程序卡片经过二次转发,返回APP的功能就会失效 只适用于APP的分享,不管是主动发起方还是被动访问方,对分享https://cloud.tencent.com/developer/article/1101040
13.百度降妇产科刘义·主任医师 妇产科华中科技大学同济医学院附属协和医院 花生是高嘌呤食物吗 刘湘源·主任医师 风湿免疫科北京大学第三医院 小儿健胃消食片的副作用是什么 王翠玲·主任医师 儿科首都医科大学附属北京友谊医院 牛肉中的嘌呤含量高吗 刘湘源·主任医师 风湿免疫科北京大学第三医院 长期晚上喝酒的危害 卜石·主任https://expert.baidu.com/
14.移动医疗app有哪些功能使用医疗app的好处有哪些→MAIGOO知识医疗app是基于移动终端系统开发的手机软件,它能在医疗人力资源短缺的情况下,通过移动医疗来缓解医疗紧张的情况。医疗app的作用主要有: 1、医疗APP可以突破时间、空间的限制,缓解医疗资源分配不均的问题。 2、医疗APP的出现一定程度上使得医疗行业服务价格更加透明,避免了线下混乱的医疗价格体系。 https://m.maigoo.com/goomai/227127.html
15.WF使用语音助手功能时,将从耳机听到自己对着耳机的麦克风说话的声音(侧音功能)。在此情况下,可能会从耳机听到周围声音或耳机操作声,但是这并非故障。 视智能手机的规格或应用程序版本而定,可能无法激活Google app。 当连接到不兼容语音助手功能的设备时,Google app不起作用。 返回页首入门https://helpguide.sony.net/mdr/wf1000xm4/v1/zh-cn/contents/TP1000241041.html
16.app客服软件的关键作用与特性app客服软件的关键作用与特性 合从在线客服系统首页 / 文章列表 / 详情2024-10-15 17:00:00 当我们使用各类APP时,难免会遇到诸如商品问题、游戏关卡困惑等状况。此时,APP客服软件就成为了连接用户与APP运营方的重要纽带。它能及时解决用户问题,提升用户体验,进而增强用户对 APP 的信任和忠诚度。一个好的客服软件https://aihecong.com/article/978
17.wms仓储APP功能优势(wms仓库多功能实用app)一、wms仓储APP基本概念介绍: wms仓储APP是一套通过入库、出库、调拨、和管理等功能,综合批次管理、物料、盘点、质检、即时库存管理等综合运用的系统,有效控制并跟踪物流和成本管理全过程,实现企业仓储全面管理。 二、wms仓储APP有什么作用? 1、实现基于单件产品的管理: http://guangzhou.11467.com/info/15428554.htm