0
点赞
收藏
分享

微信扫一扫

02-微信小程序目录结构及配置



文章目录

  • 微信目录结构
  • 配置说明
  • app.json 配置项
  • window配置项
  • restartStrategy
  • tabBar配置项
  • 创建一个自己的页面
  • 真机调试


微信目录结构

了解微信小程序项目的目录以及一些文件用途

02-微信小程序目录结构及配置_小程序

在小程序中,对于html、js、css均做了 扩展限制 ,并且对其文件后缀有了新的定义。

  • 主体文件,由三个文件组成,必须放在项目的根目录,如下:
  • app.js 作用:小程序逻辑 必填项
  • app.json 作用:小程序公共设置 必填项
  • app.wxss 作用:小程序公共样式表 非 必填项
  • 页面由四个文件组成,分别是:

文件类型

作用

是否必填

js

页面逻辑 ( 微信小程序没有window和document对象 )


wxml

页面结构 ( WeiXin Markup Language,不是HTML语法 )


wxss

页面样式表 (WeiXin Style Sheets 拓展了rpx尺寸单位,微信专属响应式像素 )


json

页面配置


注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

02-微信小程序目录结构及配置_微信_02

配置说明

app.json 配置项

app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置 tab 等。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:

配置项

属性

类型

必填

描述

最低版本

entryPagePath

string


小程序默认启动首页

pages

string[]


页面路径列表

window

Object


全局的默认窗口表现

tabBar

Object


底部 tab 栏的表现

networkTimeout

Object


网络超时时间

debug

boolean


是否开启 debug 模式,默认关闭

functionalPages

boolean


是否启用插件功能页,默认关闭

2.1.0

subpackages

Object[]


分包结构配置

1.7.3

workers

string


Worker 代码放置的目录

1.9.90

requiredBackgroundModes

string[]


需要在后台使用的能力,如「音乐播放」

requiredPrivateInfos

string[]


调用的地理位置相关隐私接口

plugins

Object


使用到的插件

1.9.6

preloadRule

Object


分包预下载规则

2.3.0

resizable

boolean


PC 小程序是否支持用户任意改变窗口大小(包括最大化窗口);iPad 小程序是否支持屏幕旋转。默认关闭

2.3.0

usingComponents

Object


全局自定义组件配置

开发者工具 1.02.1810190

permission

Object


小程序接口权限相关设置

微信客户端 7.0.0

sitemapLocation

string


指明 sitemap.json 的位置

style

string


指定使用升级后的weui样式

2.8.0

useExtendedLib

Object


指定需要引用的扩展库

2.2.1

entranceDeclare

Object


微信消息用小程序打开

微信客户端 7.0.9

darkmode

boolean


小程序支持 DarkMode

2.11.0

themeLocation

string


指明 theme.json 的位置,darkmode为true为必填

开发者工具 1.03.2004271

lazyCodeLoading

string


配置自定义组件代码按需注入

2.11.1

singlePage

Object


单页模式相关配置

2.12.0

supportedMaterials

Object


聊天素材小程序打开相关配置

2.14.3

serviceProviderTicket

string


定制化型服务商票据

embeddedAppIdList

string[]


半屏小程序 appId

2.20.1

halfPage

Object


视频号直播半屏场景设置

2.18.0

debugOptions

Object


调试相关配置

2.22.1

enablePassiveEvent

Object或boolean


touch 事件监听是否为 passive

2.24.1

resolveAlias

Object


自定义模块映射规则

renderer

string


全局默认的渲染后端

2.30.4

rendererOptions

Object


渲染后端选项

2.31.1

componentFramework

string


组件框架,详见相关文档

2.30.4

miniApp

Object


多端模式场景接入身份管理服务时开启小程序授权页相关配置,详见相关文档

static

Object


正常情况下默认所有资源文件都被打包发布到所有平台,可以通过 static 字段配置特定每个目录/文件只能发布到特定的平台(多端场景) 相关文档

window配置项

可以借助UE编辑器来随便找个颜色

02-微信小程序目录结构及配置_微信小程序_03

02-微信小程序目录结构及配置_客户端_04

window用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性

类型

默认值

描述

最低版本

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色,如 #000000

navigationBarTextStyle

string

white

导航栏标题颜色,仅支持 black / white

navigationBarTitleText

string

导航栏标题文字内容

navigationStyle

string

default

导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。参见注 2。

iOS/Android 微信客户端 6.6.0,Windows 微信客户端不支持

homeButton

boolean

default

在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键

微信客户端 8.0.24

backgroundColor

HexColor

#ffffff

窗口的背景色

backgroundTextStyle

string

dark

下拉 loading 的样式,仅支持 dark / light

backgroundColorTop

string

#ffffff

顶部窗口的背景色,仅 iOS 支持

微信客户端 6.5.16

backgroundColorBottom

string

#ffffff

底部窗口的背景色,仅 iOS 支持

微信客户端 6.5.16

enablePullDownRefresh

boolean

false

是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh

onReachBottomDistance

number

50

页面上拉触底事件触发时距页面底部距离,单位为 px。 详见 Page.onReachBottom

pageOrientation

string

portrait

屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化

2.4.0 (auto) / 2.5.0 (landscape)

restartStrategy

string

homePage

重新启动策略配置

2.8.0

initialRenderingCache

string

页面初始渲染缓存配置,支持 static / dynamic

2.11.1

visualEffectInBackground

string

none

切入系统后台时,隐藏页面内容,保护用户隐私。支持 hidden / none

2.15.0

handleWebviewPreload

string

static

控制预加载下个页面的时机。支持 static / manual / auto

2.15.0

  • 注 1:HexColor(十六进制颜色值),如"#ff00ff"
  • 注 2:关于

navigationStyle

  • iOS/Android 客户端 7.0.0 以下版本,navigationStyle 只在 app.json 中生效。
  • iOS/Android 客户端 6.7.2 版本开始,navigationStyle: custom 对 web-view 组件无效
  • 开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉
  • Windows 客户端 3.0 及以上版本,为了给用户提供更符合桌面软件的使用体验,统一了小程序窗口的导航栏,navigationStyle: custom 不再生效
restartStrategy

基础库 2.8.0 开始支持,低版本需做兼容处理。

重新启动策略配置

可选值

含义

homePage

(默认值)如果从这个页面退出小程序,下次将从首页冷启动

homePageAndLatestPage

如果从这个页面退出小程序,下次冷启动后立刻加载这个页面,页面的参数保持不变(不可用于 tab 页)

如:

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

02-微信小程序目录结构及配置_微信_05

tabBar配置项

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置 项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

属性

类型

必填

默认值

描述

最低版本

color

HexColor


tab 上的文字默认颜色,仅支持十六进制颜色

selectedColor

HexColor


tab 上的文字选中时的颜色,仅支持十六进制颜色

backgroundColor

HexColor


tab 的背景色,仅支持十六进制颜色

borderStyle

string


black

tabbar 上边框的颜色, 仅支持 black / white

list

Array


tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab

position

string


bottom

tabBar 的位置,仅支持 bottom / top

custom

boolean


false

自定义 tabBar,见详情

2.5.0

其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

属性

类型

必填

说明

pagePath

string


页面路径,必须在 pages 中先定义

text

string


tab 上按钮文字

iconPath

string


图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 positiontop 时,不显示 icon。

selectedIconPath

string


选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 positiontop 时,不显示 icon。

示例

02-微信小程序目录结构及配置_微信_06

创建一个自己的页面

现在我们在pages下新建目录 demodemo 下新建 index.wxml文件

02-微信小程序目录结构及配置_微信_07

当在app.json中配置 保存后会自动生成其他文件

02-微信小程序目录结构及配置_客户端_08

02-微信小程序目录结构及配置_微信小程序_09

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#80ff80",
    "navigationBarTitleText": "我的第一个微信小程序",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text":"首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text":"日志"
      },
      {
        "pagePath": "pages/demo/index",
        "text":"设置"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

会发现,下面的tabBar文字不居中,实际上这是编辑器的问题,在真机上测试是正常的。

02-微信小程序目录结构及配置_微信小程序_10

真机调试

在开发者工具中点击【真机调试】等待加载二维码,用手机微信扫码二维码即可

手机上底部字体居中看着还是很nice的

02-微信小程序目录结构及配置_微信_11

结束调试

02-微信小程序目录结构及配置_json_12

下一章节 微信小程序常用组件-视图容器组件


举报

相关推荐

0 条评论