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

小程序官方建议把所有小程序的页面,都存放在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.一键收藏,7款提升审美的小程序模板!7、QQ小程序UI组件库 即时设计资源广场提供了一组轻量级易用的QQ小程序模板,包括QQ小程序控制样式、QQ小程序控制组合样式和典型的QQ小程序页面。在即时设计中,一键呼叫这个QQ小程序UI组件库,可以帮助设计师和开发人员更有效地设计和调整QQ小程序。以上是推荐给您的优秀微信小程序模板。设计了案例和组件资源,您可以https://baijiahao.baidu.com/s?id=1802747105856800334&wfr=spider&for=pc
2.小程序订单页面模板专题模板小程序订单页面模板图片素材下载我图网小程序订单页面模板专题为您整理了112个原创高质量小程序订单页面模板图片素材供您在线下载,PSD/JPG/PNG格式小程序订单页面模板模板下载、高清小程序订单页面模板图片大全等,下载图片素材就上我图网。https://m.ooopic.com/sousuo/47884776/
3.小程序模板消息怎么申请在小程序公众平台首页,点击左侧菜单栏的“设置”,进入小程序设置页面。 3.申请模板消息权限 在小程序设置页面中,点击“开发设置”-“模板消息”-“申请模板消息权限”,进入模板消息权限申请页面。 4.填写申请信息 在模板消息权限申请页面中,填写申请信息,包括小程序的ppID、申请的模板ID、申请的用途、联系人信息等。https://www.guangli88.com/news/industry/118397.html
4.小程序页面设计模板,让你的小程序瞬间提升用户体验一、背景介绍 如今,随着移动互联网的迅猛发展,小程序成为了各个领域不可或缺的一部分。而作为小程序开发的关键环节之一,小程序页面设计模板的选择与运用则直接影响了小程序的用户体验和功能表现。在这篇文章中,我们将介绍一些优秀的小程序页面设计模板,并探讨它们的https://www.300.cn/xxzx/6412.html
5.如何使用智未来小程序模板智未来微信页面模板教程回到智未来页面模板网站,点击【我的模板】菜单,找到所要使用的页面模板,点击该模板右侧的“复制小程序路径”按钮,完成小程序路径的复制。 粘贴从智未来复制过来的【小程序路径】,并设置备用网页,保存并发布: 回到公众号底下菜单,点击就可以跳转到您所编辑的智未来小程序页面了注http://zwlhome.com/help/articles/article13.html
6.wxjava微信小程序模板消息小程序消息页面本文以微信小程序内置的两个模板:购买成功和评论回复提醒为例来阐述第三方微信小程序平台的设计。 小程序端 微信用户支付成功后,微信服务通知中会收到支付成功服务提醒。见下图: 商家端 用户完成评价后,商家管理端可以查看评论。见下图: 商家进行回复: 商家回复微信小程序用户的评论后,微信用户在微信的服务通知会收到https://blog.51cto.com/u_16213674/11724849
7.如何做小程序页面设计模板?详细设计模板如何制作小程序页面设计模板?微信小程序页面的设计理念、颜色、布局等都要精心安排,但大多数想做小程序的卖家都是新手,不懂设计知识。那么小程序页面设计模板怎么做呢? 一、应用优质材料 当小程序页面设计模板、旋转图片、快捷键、产品信息必须显示材料图片,产品材料图片必须准备店铺,注意清晰、美观、材料图片风格和品牌https://www.wandongli.com/news_detail.html?id=29973
8.百度智能小程序页面状态模板page-status 页面状态模板解释: 页面状态模板,可通过配置 theme 主题选择不同的页面状态:loadingStatus 加载中,noWifiStatus 无网络,noContent 暂无内容。示例 使用方式方式一 【 NPM 】_来自百度智能小程序开发文档,w3cschool编程狮。https://www.w3cschool.cn/baiduapp/baiduapp-k7r639e7.html
9.微信小程序代码模板JavaScript| | | |-- index.wxss# 页面样式 | |-- images/# 图片资源 | |-- libs/# 第三方库目录 | |-- app.js# 小程序逻辑 | |-- app.json# 小程序公共设置 | |-- app.wxss# 小程序公共样式表 ? ? ? 页面结构模板 一个典型的微信小程序页面结构如下: https://blog.yyzq.team/post/355793.html
10.移动端APP小程序页面原型模板集合页面数量:1页 素材版本:v1.0 收费类型:素材会员素材 更新时间:2024-10-30 创建时间:2023-05-15 版权信息:用户上传 创作者 车大人 浏览量:0 点赞量:0 被收藏:0 被使用:0 TA关注的:0 关注TA的:0 TA很神秘,什么都没有留下 作品介绍 移动端APP小程序页面原型模板集合,包含各类账户明细、账户管理、文章列表https://modao.cc/community/mtlhootfw5kjivr9
11.uniapp影视小程序模板,含六个页面介绍 uniapp影视小程序模板,含六个页面:首页、分类、发现、榜单、影视详情,影评 ①本套模板由站内会员独立原创开发,采用Uni-App开发,简单修改就可以直接用了。②注:提供uniapp样式模板,没有实际功能!!③开发背景:有很多小伙伴都厌倦写CSS布局,并不是不懂CSS,只是没有专业团队那样的设计稿,设计布局只能https://www.2xiaobai.com/470.html
12.分享几个比较好看的小程序设计模板作为一个设计师学会设计一款小程序也是很加分的事情今天我就给大家分享一些免费的小程序页面设计模板 快递物流小程序页面 作者:elainegao即时设计 - 可实时协作的专业 UI 设计工具QQ 小程序页面库 作者:elainega…https://zhuanlan.zhihu.com/p/610531125
13.微信小程序模板设计的4个要点下图这个旅游小程序模板设计欣赏,就是按不同的服务项目来详细分类,并有文章页面来宣传自己,让客户能了解商家的品牌内容。 上线了小程序案例,禁止转载 总之,新手在设计小程序页面时,可以多看些高质量的小程序模板设计参考,理解小程序的主流排版布局,你才能自己做出美观的小程序,吸引用户注意力。https://www.qiduyu.com/xinwen/3839.html
14.银豹微信小程序使用指引(通用)7.选择小程序模板 查看模板效果,选择想要的小程序模板,后面提交信息给银豹小程序专员的时候需要备注想要的模板 8.提供参数信息给银豹小程序专员配置提审 上架小程序商品 1.新增商品资料 2.设置商品标签 小程序的某些页面功能模块可选择跳转至某个商品标签,可根据需要设置商品标签,非必填 http://blog.pospal.cn/kb/4326
15.template模板的使用写好wxml和wxss在别的页面引用1.文件夹建好,template(名字自己取)文件夹里放模板文件wxml,wxss,在需要用的页面进行引入对应的wxml和wxss 2. 2.template里的color.wxml templatename"lplist"!--根据自己需要,如果只有一层需要循环的数据,这里就一层循环即可--!--如果有数据两层,这里就写两层循环--blockwx:for"{{lpListItem}}"wx:for-itemhttp://www.jisuapp.cn/news/12205.html
16.Vant移动端元件库/微信小程序元件库+行业模块页面模板–AxureVant 移动端元件库/微信小程序元件库+行业模块页面模板 编辑推荐 ¥ 69.90 – 立即购买 在线演示 本作品元件部分依据Vant4.0版本:https://youzan.github.io/vant/#/zh-CN/绘制,页面模板依据支付宝设计Dapollo绘制,版权归有赞及支付宝所有。 元件包含:基础组件、表单组件、反馈组件、展示组件、导航组件、业务https://www.axureshop.com/a/583010.html
17.创世下载站免费游戏软件资源照妖镜官方版 米坛社区 上海智慧保安app 点菜宝2.0 啵啵浏览器 奇异社区官方版 蛋蛋模拟器 3733游戏盒官网版 悟空浏览器 运满满司机版 小马模拟器官方版 友情连接近期网站链接清理,一月内对部分权重仍然为0的站暂时取消链接,谢谢理解合作! 网站模板 36解析式工具箱https://www.cssmoban.com/
18.微信小程序:使用微信授权登录以及页面模板.pdf发布时间:2023-08-17发布于上海 浏览人气:344 下载次数:仅上传者可见 收藏次数:0 需要金币:*** 金币(10金币=人民币1元) 微信小程序:使用微信授权登录以及页面模板.pdf 关闭预览 想预览更多内容,点击免费在线预览全文 免费在线预览全文 微信?程序:使?微信授权登录以及页?模板 1.login.html view class=https://max.book118.com/html/2023/0815/7056015050005144.shtm
19.微信页面模板阿里云为您提供专业及时的微信页面模板的相关问题及解决方案,解决您最关心的微信页面模板内容,并提供7x24小时售后支持,点击官网了解更多内容。https://www.aliyun.com/sswb/1155710.html
20.微信小程序输入邀请码至此栏页面样式模板制作设计下载该文章是微信小程序输入邀请码至此栏页面样式模板制作设计下载,所属栏目为【小程序教程】,其中包含等等精品模板,海量素材模板免费下载尽在懒人模板lanrenmb.com!https://www.lanrenmb.com/xiaochengxujiaocheng/9691.html
21.移动端实例模板100+APP小程序原型模版本品属于APP/小程序的页面原型模板,栏目丰富样式多多,高保真高交互高复用(带仿真交互),可以快速组装成美观大方的原型图https://www.axured.cn/a/1566.html
22.微信小程序WXML页面常用语法(讲解+示例)腾讯云开发者社区在前面我们就已经提过,WXML,就可以理解为我们传统页面中的HTML,它是微信为我们提供的一套标签语言,可以说它就是我们小程序的脸面(虽然没经过CSS装饰前不一定光鲜亮丽),开发中 WXML 页面就作为我们一些逻辑行为的入口,以及效果展示的承载者。 再大白话一点:你所看到的小程序页面长什么样(不涉及背后做了什么行为,只https://cloud.tencent.com/developer/article/1681320
23.微信小程序装修页面过程,模板式一键套用,太简单微信小程序装修页面过程,模板式一键套用,太简单小海芋 福建 0 打开网易新闻 体验效果更佳外国小姐姐第一次坐高铁,根本不能理解,还以为是绿皮车 子恒海外之旅 1358跟贴 打开APP 1984年粟裕病逝,妻子将骨灰带到南京,向守志却拒绝了他的遗愿 小地大智 635跟贴 打开APP 男人在被窝欺负女孩却被父亲送进监狱,出狱https://m.163.com/v/video/VG7B5IF8K.html
24.app开发模板小程序开发模板网站模板源码下载飞博网络科技是国际一流APP开发公司,专注于APP软件开发、网站开发、小程序开发、手机软件开发,飞博科技是国内广受好评的APP开发公司、APP公司、手机APP软件开发及各各行业app模板源码免费下载.https://www.appww.cn/
25.仿大麦门票选座小程序模板一款实用的大麦app演唱会门票选座/电影票选座手机小程序页面模板。包含:购票选区,在线选座下单等。 相关标签 微网站模板微网站模板手机网页模板小程序模板app手机模板程序员电子门票网站电子门票天山海世界门票程序图标小程序app小程序程序模板应用程序微信小程序模板 https://www.17sucai.com/pins/35270.html
26.小程序模板微信小程序模板海天模板收录商城、旅游、教育、预约、招聘、汽车、装修等实用的微信小程序模板,是国内集小程序模板、小程序教程、小程序资讯为一体的综合性小程序网站。http://www.xmdeal.com/
27.学生课程管理系统手机微信页面模板.zip手机微信公众号或者小程序页面模板,包括查询教师、课时,评价、投票等功能。十分容易编辑修改,可用作同类型页面的制作 html jquery mui2019-07-29 上传大小:3.00MB 所需:14积分/C币 12-手机微信商城网站模板.zip 12-手机微信商城网站模板 上传者:zhou9898时间:2022-11-13 https://www.iteye.com/resource/xaishujin-11445189
28.免费微信小程序模板栢塑免费预约小程序模板、答题微信小程序模板,小程序免费模板注册即用,微信小程序模板免费平台,百度、抖音、头条,商家可利用模板快速完成小程序开发。http://www.baisubao.net/index.php/t-390-403-469-0?dqy=2
29.登烈小程序saas模板中心.海量免费小程序模板.高端智能线上自助小模板插件数量 紧抓移动端60+流量窗口 一扫直达页面 轻松获取页面路径链接及二维码 搜索小程序 设置页面关键词,占位搜索入口 附近的小程序 轻松获取页面路径链接及二维码 全平台跳转小程序 公众号跳转、短信、邮件、第三方APP 分享小程序 轻松获取页面路径链接及二维码 http://denglie-xcx.com/
30.银豹小程序模板常用路径小程序模板模板常用路径跳转页面 1首页模板pages/customize/customize主页/首页面 2pages/shopping/shopping/fast分类页面 3pages/shopping/nearstore/nearstore连锁门店列表 4pages/account/account/account会员中心 5pages/shopping/orderhistory/orderhistory我的订单/历史订单 http://doc.hk-cutetea.com/xuexi/kb/4155.html
31.小程序弹窗模板素材网站图片免费下载共有91256个小程序弹窗模板相关内容为您呈现 andy2016 andy2016 PR模板|智能手表诮用程序屏幕页面样机展示3D介绍动画 32 猿文件网官方账号 猿文件网官方账号 猿文件网官方账号 猿文件网官方账号 PR模板|简洁动态3D场景手机APP小程序促销节目样机产品 22 https://www.zcool.com.cn/tag/ZMTMzODc1Ng==.html