简单了解微信小程序的目录结构

 更新时间:2019年07月01日 17:09:04   作者:三分钟it小课堂   我要评论

这篇文章主要介绍了简单了解小程序的目录结构,在开发小程序之前,首先需要对其目录结构进行了解,以便于提升开发效率,需要的朋友可以参考下

前言

在开发小程序之前,首先需要对其目录结构进行了解,以便于提升开发效率。

使用微信开发者工具构建一个小程序项目,可以看到目录下生成了件。

  • ① 以.json为后缀的json配置文件;
  • ② 以.wxml为后缀的wxml模板文件,其可以看做是一个简洁的html页面,略有不同的则是文件后缀以及其中的部分标签不同;
  • ③ 以.wxss为后缀的wxss样式文件,也可以看做一个css样式文件;
  • ④ 以.js为后缀的js脚本文件。

在上图的示例中,可以看到根目录下有js、json、wxss类型文件,这是作为全局配置;而pages/index目录下的四类文件是对具体的页面进行详细设置。

由此可以看出这四类文件在小程序中负责不同的功能,它们在不同的目录下扮演不同的角色。接下来,将详细说明四类文件的作用。

1json配置

在小程序中,json是一种数据格式,其并不是编程语言,它用于配置静态的属性。可以看到在根目录下有app.json、project.config.json、以及sitemap.json,在pages/index下有index.json。前三种是对整个小程序的全局配置,而后一种是对具体页面的配置。接下来,对其做详细说明。

①、app.json配置文件

其作为当前小程序的全局配置,包括配置页面路径列表、全局默认窗口表现、网络超时时间、底部tab栏、小程序接口权限相关设置等。

注:在json文件中是不能加注释的,此处只为了解释,因此在使用过程中切勿加注释,其他相关属性查看官方文档。


{
 /**
  * 页面路径列表
  * 用于指定小程序由那些页面组成,每一项都对应一个页面的路径。
  * 数组列表中的第一项代表小程序的首页。
 */ 
 "pages": [
  "pages/index/index"
 ],
 /**
  * 全局默认窗口表现
  * 用于设置小程序的状态栏、导航条、标题、窗口背景颜色
 */ 
 "window": {
  "navigationbarbackgroundcolor": "#fff",//导航栏背景颜色
  "navigationbartitletext": "miniprogramedemo",//导航栏标题文字内容
  "navigationbartextstyle": "black"http://导航栏标题颜色,仅支持black/white
 },
 //底部tab栏
 "tabbar": {
  "list": [//tab的列表,最少2个,最多5个
   {
    "pagepath": "pages/index/index",//页面路径
    "text": "首页"http://tab上按钮文字
   },
   {
    "pagepath": "pages/index/index",
    "text": "第二个首页"
   }
  ]
 },
 //配置小程序及其页面是否允许被微信索引,若没有该配置,则默认所有页面都允许被索引
 "sitemaplocations": "sitemap.json"
}

②、project.config.json工具配置

通常在使用各类开发工具时,都会根据自己的喜好做一些简单的配置,如界面配置成护眼模式等。但更换电脑后,需要重新配置或导入以前的配置文件,而小程序开发者工具使用project.config.json来统一管理,在不同的电脑上导入同一个项目的代码包后,不需要再进行配置。

一般会对项目设置(setting)中的是否启用es6转es5(es6)、上传代码时样式是否自动补全(postcss)、是否检查安全域名和tls版本(urlcheck)等来进行配置。
注:可以通过开发者工具右上角的【详情】按钮来快速配置。

③、sitemap配置

小程序提供了配置小程序及其页面是否允许被微信索引的功能,可以通过配置一些索引规则来约束页面是否能被索引,使其不能被微信索引。若没有配置该项,则默认所有页面都允许被索引。

注:其他相关配置信息请参照官方文档设置。

{
 "rules": [{//索引规则列表
 "action": "allow",//页面是否能被索引,取值仅限allow、disallow
 "page": "*"http://*表示所有页面,不能作为通配符使用
 }]
}

④、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;
} 
/**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('button.open-type.getuserinfo')
 },
 onload: function () {
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论