持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

一、项目文件介绍

pages：对应的是页面文件
ml后缀名是页面内容， js或者ts是页面的js逻辑 ss为样式文件夹 json为配置文件，一般会设置全局的默认窗口表现和底部 tab 栏的表现

详情可参考官方小程序全局配置

这里小编为你们罗列了一个张图，大家可以看看

配置-认识全局配置文件app.json

目标

了解小程序全局配置app.json中的常见配置

官网文档

全局配置

通过 app.json 文件对小程序进行全局配置，如页面文件的路径、窗口表现、设置网络超时时间、设置 tab标签页等。

配置清单：

属性	类型	必填	描述
pages	Array	是	设置页面路径
window	Object	否	设置默认窗口表现
tabBar	Object	否	设置底部标签栏

app.json 示例

{
  "pages":[
    "pages/index/index",
    "pages/detail/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

pages

数组类型，数组中每一项都是字符串，来指定小程序由哪些页面组成。
每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的默认首页--打开小程序后看到的第一个页面。文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json , .js, .wxml , .wxss 四个文件进行整合。
小程序中新增/减少页面，都需要对 pages 数组进行修改。

// 创建目录及文件
// 习惯性的将页面统一放到名叫 pages 的目录中，不是强制要求，可以起任意名称的目录
pages
├── detail
│   ├── index.js
│   └── index.wxml
└── index
    ├── index.js
    └── index.wxml

配置-window

目标

了解小程序状态栏、导航条、标题、窗口背景色等配置

window项配置

在app.json中，window项用于设置全局小程序的状态栏、导航条、标题、窗口背景色。(查看window更多配置属性)

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容

图示

配置-tabBar

目标

掌握小程序tab菜单配置

tabBar

// 示例配置
  "tabBar": {
    "color": "#000",  // tab 上的文字默认颜色
    "selectedColor": "#fff", // tab 上的文字选中时的颜色
    "backgroundColor": "#fd1688",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }

对象类型，配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色，仅支持 black/white
list	Array	是		tab 的列表，最少2个、最多5个
position	String	否	bottom	可选值 bottom、top

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，配置项最少2个、最多5个 tab，tab 按数组的顺序排序。

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	描述
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

配置-pages

配置首页

通过全局配置或者编译模式控制小程序默认首页

方式：

数组中第一项，为默认首页
添加不同的编译模式，去指定默认首页（特别说明：只在开发测试时使用，上线就不能生效了）

页面局部配置

每个页面可以有不同的表现，通过 pages 目录下的 .json 文件，如 logs.json ，实现页面的局部配置。但是只能设置 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容

页面的结构和样式

目标

了解小程序如何开发页面结构和样式

页面

小程序的每一个页面都是由 .wxml、.wxss、.js 三部分构成，并且要求文件名一致
通常为了管理方便，会将小程序的每个页面单独归到同一个目录下，所有的页面又都归到了 pages 目录下。
小程序与Web类似，也分为结构、表现、行为三部分。
- 使用标记语言 WXML 定义结构
- 使用 WXSS 定义表现
- 使用 JavaScript 定义行为。

WXML-页面

wxml 指的是 Wei Xin Markup Language，微信团队以 XML 为基础，定义的一套用以实现小程序页面布局的标记语言，与HTML非常类似。
wxml有一套自已的标签（基础组件）如 form、input、textarea、button、audio、video、view、text等，其含义与html的标签也是一样的。wxml中的 view、text 可分别与 html 中的 div、span 对应。

<form>
  <view class="items">
    <view>
      <label for="">姓名:</label>
      <input type="text" placeholder="请填写您的真实姓名" />
    </view>
    <view>
      <label for="">手机:</label>
      <input type="text" placeholder="请填写您的手机号" />
    </view>
    <view>
      <label for="">身份:</label>
      <input type="text" placeholder="请选择您与宝宝的关系身份" />
    </view>
    <view>
      <label for="">验证码:</label>
      <input type="text" placeholder="六位数字验证码" />
      <button class="verify" size="mini">获取验证码</button>
    </view>
  </view>
  <button class="submit">绑定并登录</button>
</form>

扩展阅读：组件文档

WXSS-样式

wxss 指的是 Wei Xin Style Sheet，微信团队定义的一套用以实现小程序布局样式的层叠样式表，与CSS非常接近。可以理解成 wxss 是 css 的一个子集，也包括选择器、属性、值部分，同样具有层叠的特征。
小程序会自动根据 wxml 文件名，自动将 wxss 进行加载，例如：当加载 pages/style/index.wxml 时，会自动将 pages/style/index.wxss 加载。

/* 样式仅供参考 */
page {
    background: #F0F0F0;
}

.items {
    padding-left: 15px;
    background: #FFF;
}

.items view {
    display: flex;
    padding: 10px 15px 10px 0;
    color: #3C3C3C;
    font-size: 14px;
    border-bottom: 1px solid #F0F0F0;
}

.items view:last-child {
    border-bottom: 0 none;
}

`小结`

view、text 可分别与 html 中的 div、span 对应，小程序常用布局元素
css编写方式、语法和web类似
1. 小程序会自动引入样式

页面屏幕适配

目标

了解小程序屏幕适配

为什么要适配

移动设备种类较多，如操作系统有 Android、IOS、Windows Phone等，屏幕尺寸有 4寸、4.7寸、5.5寸等

常用适配方案

rem

rem是一个相对单位
换算关系：rem大小是相对于html字体大小

例子：html的font-size: 32px => 1rem = 32px

vw/vh

小程序适配

rpx（responsive pixel）可以根据屏幕宽度进行自适应。小程序专有的单位，它规定所有屏幕宽均为750rpx

操作系统的差异。小程序运行在微信中，微信有 Android版本和 IOS版本，天然可以实现跨平台（操作系统）运行。
任何尺寸。为了保证小程序能够在任何尺寸的屏幕上都能正常显示，微信提供了一个新的尺寸单位** rpx** ，rpx是一个相对长度单位，会根据屏幕尺寸自动调整（有点类似百分比的意思）。
- 750rpx === 100%屏幕宽度

rpx 与 px 的换算关系

设备	屏幕尺寸	RPX换算PX (屏幕宽度/750)	PX换算RPX (750/屏幕宽度)
iPhone5	320px	1rpx = 0.42px	1px = 2.34rpx
小米MIX 2S	360px	1rpx = 0.48px	1px = 2.083rpx
iPhone6	375px	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	414px	1rpx = 0.552px	1px = 1.81rpx
HUAWEI Mate 10	480px	1rpx = 0.64px	1px = 1.562rpx

说明：上述表格展示了 rpx 与 px 的换算关系，但是由微信小程序在执行过程中自动换算的，我们只需要了解换算关系就可以了。

总结

开发小程序时所有屏幕宽度都是 750rpx
开发微信小程序时设计师可以用 750px (1:1)作为视觉稿的标准，这样可以一定程序上避免换算带来的误差。
rpx原理和rem适配类似：大屏幕1rem对应的px值大，相反则小

页面小结

页面构成：.js, .wxml, .wxss, .json

创建新页面：添加文件夹，右键-> 新建 page (它会自动在app.json中补充pages)

访问新页面：在tabBar中，添加配置，设置导航栏，以跳转页面

案例-游乐园-配置

目标

通过案例练习项目创建和配置

设计高保真参考文件

开发流程：

新建项目

配置window

编辑 app.json，添加字段 windows

"window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "游乐园",
    "navigationBarTextStyle": "black"
},

颜色值从设计稿中获取

配置tabbar

图标文件：02-其它资源/游乐园/icons，复制到项目下

新建tabbar页面

使用微信开发者工具快速创建页面（可以删除默认创建的页面）

在新创建的目录下=》选择新建 Page =〉自动生成.js、.json、.wxml、.wxss四个文件

配置 tabBar 页面

  "tabBar": {
    "color": "#333",
    "selectedColor": "#FFC64B",
    "backgroundColor": "#FFF",
    "borderStyle": "black",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/home/home",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-active.png"
      },
      {
        "text": "卡券",
        "pagePath": "pages/card/card",
        "iconPath": "icons/card.png",
        "selectedIconPath": "icons/card-active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/my/my",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-active.png"
      }
    ]
  },

最终效果

总结

tabBar在页面A中自动生效的提前是：页面A在tabBar中的list列表中定义了
创建项目注意填写自己的appid
掌握window和tabbar配置

小程序的第一个页面搭建，配置文件的介绍，及基本的使用