简单了解⼩程序的⽬录结构
前⾔
在开发⼩程序之前，我们⾸先需要对其⽬录结构进⾏了解，以便于提升开发效率。
我们使⽤开发者⼯具构建⼀个⼩程序项⽬，我们可以看到⽬录下⽣成了件。烤箱烤红薯怎么烤
①以.json为后缀的JSON配置⽂件；
②以.wxml为后缀的WXML模板⽂件，其可以看做是⼀个简洁的HTML页⾯，略有不同的则是⽂件后缀以及其中的部分标
签不同；
③以.wxss为后缀的WXSS样式⽂件，也可以看做⼀个CSS样式⽂件；
④以.js为后缀的JS脚本⽂件。
在上图的⽰例中，我们可以看到根⽬录下有JS、JSON、WXSS类型⽂件，这是作为全局配置；⽽pages/index⽬录下的四类⽂件是对具体的页⾯进⾏详细设置。
由此可以看出这四类⽂件在⼩程序中负责不同的功能，它们在不同的⽬录下扮演不同的⾓⾊。接下来，我们将详细说明四类⽂件的作⽤。
1JSON配置
在⼩程序中，JSON是⼀种数据格式，其并不是编程语⾔，它⽤于配置静态的属性。我们可以看到在根⽬录下有app.json、fig.json、以及sitemap.json，在pages/index下有index.json。前三种是对整个⼩程序的全局配置，⽽后⼀种是对具体页⾯的配置。接下来，我们对其做详细说明。
①、app.json配置⽂件
其作为当前⼩程序的全局配置，包括配置页⾯路径列表、全局默认窗⼝表现、⽹络超时时间、底部tab栏、⼩程序接⼝权限相关设置等。
注：在json⽂件中是不能加注释的，此处只为了解释，因此在使⽤过程中切勿加注释，其他相关属性查看官⽅⽂档。
圣诞节时间{
/**
* 页⾯路径列表
* ⽤于指定⼩程序由那些页⾯组成，每⼀项都对应⼀个页⾯的路径。
* 数组列表中的第⼀项代表⼩程序的⾸页。
*/
"pages": [
"pages/index/index"孙红雷 小沈阳
],
/**
* 全局默认窗⼝表现
* ⽤于设置⼩程序的状态栏、导航条、标题、窗⼝背景颜⾊
*/
"window": {
"navigationBarBackgroundColor": "#fff",//导航栏背景颜⾊
"navigationBarTitleText": "MiniProgrameDemo",//导航栏标题⽂字内容
"navigationBarTextStyle": "black"//导航栏标题颜⾊，仅⽀持black/white
},
//底部tab栏
"tabBar": {
"list": [//tab的列表，最少2个，最多5个
{
"pagePath": "pages/index/index",//页⾯路径
"text": "⾸页"//tab上按钮⽂字
},
{
"pagePath": "pages/index/index",
"text": "第⼆个⾸页"
}
]
},
//配置⼩程序及其页⾯是否允许被索引，若没有该配置，则默认所有页⾯都允许被索引 "sitemapLocation": "sitemap.json"
}
②、fig.json⼯具配置
通常我们在使⽤各类开发⼯具时，都会根据⾃⼰的喜好做⼀些简单的配置，如界⾯配置成护眼模式等。但我们更换电脑后，需要重新配置或导⼊以前的配置⽂件，⽽⼩程序开发者⼯具使⽤fig.json来统⼀管理，我们在不同的电脑上导⼊同⼀个项⽬的代码包后，不需要再进⾏配置。
⼀般我们会对项⽬设置（setting）中的是否启⽤es6转es5（es6）、上传代码时样式是否⾃动补全（postcss）、是否检查安全域名和TLS版本（URLCheck）等来进⾏配置。
注：我们可以通过开发者⼯具右上⾓的【详情】按钮来快速配置。
③、sitemap配置
⼩程序提供了配置⼩程序及其页⾯是否允许被索引的功能，我们可以通过配置⼀些索引规则来约束页⾯是否能被索引，使其不能被索引。若没有配置该项，则默认所有页⾯都允许被索引。
注：其他相关配置信息请参照官⽅⽂档设置。
{
"rules": [{//索引规则列表
"action": "allow",//页⾯是否能被索引，取值仅限allow、disallow
"page": "*"//*表⽰所有页⾯，不能作为通配符使⽤
}]
}
④、index.json页⾯配置
如果我们想设置具体的某个页⾯的属性，则可以在相应页⾯的JSON⽂件中⾃定义配置。
{
什么事业最赚钱"navigationBarBackgroundColor": "#FF5500",//导航栏背景颜⾊
"navigationBarTextStyle": "white",//导航栏标题颜⾊，仅⽀持black/white
"navigationBarTitleText": "⾸页",//导航栏标题⽂字内容
"backgroundTextStyle": "dark", //下拉loading样式，仅⽀持dark/white
"enablePullDownRefresh": true,//是否启⽤下拉刷新
"onReachBottomDistance": 50,//页⾯上拉触底事件触发时距离页⾯底部距离
"usingComponents": {}//页⾯⾃定义组件配置
}
逾期多久会被列入失信人名单2WXML模板
我们在开发web页⾯时，使⽤HTML+CSS+JS这样的组合来构建展⽰给⽤户的页⾯，其中HTML是⽤来描述当前页⾯的结
构，CSS是⽤来描述页⾯的样式，JS通常处理页⾯与⽤户之间的交互。
⽽⼩程序开发中，其⾃⼰的⼀套书写规范，但与web页⾯也有相似之处，如WXML在其中就充当了HTML的⾓⾊。和HTML⾮常相似，WXML也是由标签、属性等构成，但也存在着众多不⼀样的地⽅：
标签名不⼀样，在HTML中我们经常会使⽤div、p、span等来组合出不同的效果。⽽在⼩程序中，我
们会使⽤view、button、text等标签，同时⼩程序页提供了地图、视频、⾳频等组件供开发者使⽤。
多了⼀些wx:if这样的属性以及表达式，在web页⾯开发中，我们通过使⽤JS来控制DOM，以及响应⽤户操作。⽽⼩程序通过{{}}的语法将数据绑定到界⾯，同时也可以通过wx：开头的属性来控制数据的显⽰。
<!--index.wxml-->
<view class="container">
<text>{{msg}}</text>
<view wx:if="{{flag}}">当前显⽰状态为true</view>
</view>
3 WXSS样式
WXSS具有CSS⼤部分特性，同时也做了⼀些扩充和修改：
新增了尺⼨单位。为了考虑⼿机设备屏幕宽度和设备像素⽐的不同，需要换算，⼩程序提供了新的尺
⼨单位rpx，其不需要开发者⾃⼰换算，⽽是由⼩程序底层来完成。
提供全局样式和局部样式。在app.wxss中可以设置全局样式，⽽在具体的页⾯.wxss中可以设置当前页⾯的样式。
此外WXSS仅⽀持部分CSS选择器。
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
送40-50妈妈礼物实用/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
4 JS交互
在web开发中，我们使⽤JS来控制与⽤户的交互⾏为，⽽⼩程序中也是使⽤JS来处理⽤户的操作。如先前，我们在页⾯上显⽰“Hello World！”。我们只需要在页⾯的JS⽂件中，对其进⾏设置值即可。
Page({
data: {
msg: 'Hello World',
flag: false,
canIUse: wx.canIUse('UserInfo')
},
onLoad: function () {
},
})
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
发布评论