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


Posted in Javascript onJuly 01, 2019

前言

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

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

  • ① 以.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"//导航栏标题颜色,仅支持black/white
 },
 //底部tab栏
 "tabBar": {
  "list": [//tab的列表,最少2个,最多5个
   {
    "pagePath": "pages/index/index",//页面路径
    "text": "首页"//tab上按钮文字
   },
   {
    "pagePath": "pages/index/index",
    "text": "第二个首页"
   }
  ]
 },
 //配置小程序及其页面是否允许被微信索引,若没有该配置,则默认所有页面都允许被索引
 "sitemapLocation": "sitemap.json"
}

②、project.config.json工具配置

通常我们在使用各类开发工具时,都会根据自己的喜好做一些简单的配置,如界面配置成护眼模式等。但我们更换电脑后,需要重新配置或导入以前的配置文件,而小程序开发者工具使用project.config.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;
} 
/**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 () {
 },
})

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

Javascript 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
vue如何实现自定义底部菜单栏
Jul 01 #Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 #Javascript
vue中的面包屑导航组件实例代码
Jul 01 #Javascript
Vue动态面包屑功能的实现方法
Jul 01 #Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 #Javascript
基于Vue SEO的四种方案(小结)
Jul 01 #Javascript
JavaScript一元正号运算符示例代码
Jun 30 #Javascript
You might like
php curl 上传文件代码实例
2015/04/27 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
JSON相关知识汇总
2015/07/03 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
小程序实现单选多选功能
2018/11/04 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
会计辞职信范文
2014/01/15 职场文书
全国道德模范事迹
2014/02/01 职场文书
八一建军节主持词
2015/07/01 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python