微信小程序 - 结构目录 | 配置介绍

结构目录

小程序框架提供了自己的视图层描述语言 WXML 和 WXSS,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

一.小程序文件结构和传统web对比

结构 传统web 微信小程序
结构 HTML WXML
样式 CSS WXSS
逻辑 Javascript Javascript
配置 JSON

通过以上对比得出,传统web 是三层结构。而微信小程序 是四层结构,多了一层 配置.json

二.基本的项目目录

配置介绍

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json

一.全局配置app.json

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置

app.json

{
  "pages": [
    "pages/test/test",  # 新增页面,第一位代表首页
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}

字段的含义

  1. pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  2. window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。

局部配置page.json

page.json

这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。

开发者可以独立定义每个页面的一些属性,如顶部颜色、是否允许下拉刷新等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black / white
navigationBarTitleText String   导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px。 详见 Page.onReachBottom
disableScroll Boolean false 设置为 true 则页面整体不能上下滚动;只在页面配置中有效,无法在 app.json 中设置该项

注:内容摘自 小猿取经

原文地址:https://www.cnblogs.com/waller/p/11794016.html

时间: 2024-12-08 00:03:30

微信小程序 - 结构目录 | 配置介绍的相关文章

微信小程序之全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置 文件内容为一个 JSON 对象 pages:页面路径列表 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息.文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理.数组的第一项代表小程序的初始页面(首页).小程序中新增/减少页面,都需要对 pages 数组进行修改. { "pages": ["pages/index/

微信小程序 (全局配置和页面配置)

全局配置 app.json 文件用来对微信小程序进行全局配置. 一.配置页面路径 二.window 配置全局默认的窗口 navigationBarTextStyle:导航栏的标题颜色 navigationBarTitleText:导航栏的文字 navigationBarBackgroundColor:导航栏的背景颜色: backgroundColor:窗口的背景色 三.tabar 导航条 color:HexColor 必填 导航条的默认颜色selectedColor:HexColor 必填 文字

微信小程序基本目录结构学习

今天我们就以firstdemo为例,介绍一下小程序的基本目录结构.当我们打开一个微信小程序项目后,点击进入"编辑"菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文件app.js文件,全局文件app.json文件,图片编辑文件工具app.wxss文件.<ignore_js_op> 小程序目录结构的整体结构如下:<ignore_js_op> <ignore_js_op> 我们详细介绍下小程序目录中每个文件和文件夹的功

微信小程序的目录结构

当我们打开一个微信小程序项目后,点击进入"编辑"菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文件app.js文件,全局文件app.json文件,图片编辑文件工具app.wxss文件. 小程序目录结构的整体结构如下: 小程序包含一个描述整体程序的APP和多个描述各自页面的page. 文件 必填 作用 app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表 一个小程序页面由四个文件组成,分别是: 文

微信小程序:目录结构

最近开始接触小程序了,学习的话当然是从官方文档开始. 附上微信小程序官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/ 文件结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 1.一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件 必填 作用 app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表 2.一个小程序页面由四个文件组成,分别是: 文件类型 必填

nodejs的微信小程序结构

主文件夹下的 app.js.app.json.app.wxss三个文件,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件 app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的生命周期函数.声明全局变量.调用框架提供的丰富的 API,如同步存储及同步读取本地数据. app.json 是对整个小程序的全局配置.我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题. app.wxss 是整个小程序的公

微信小程序——2、配置json文件

配置文件详解 主配置文件app.json 主配置文件位于主目录中,用于进行全局配置.包括页面文件的路径.窗口表现.设置网络超时时间.设置多tab等 下面通过微信最初自带小程序来学习 { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "na

微信小程序 wx:key详细介绍

转自:http://www.jb51.net/article/95980.htm 微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例 子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key

微信小程序app.json配置导航栏样式

1.找到app.json文件,找到window配置项 可以配置导航栏的选项有: "navigationBarBackgroundColor":#F6F6F6 // 导航栏的背景颜色 "navigationBarTextStyle":"white" // 导航栏的标题颜色,只支持balck 或者 white "navigationBarTitleText":"导航栏标题内容" // 导航栏的标题 "