微信小程序开发实战（一）-一一网

全局配置（app.json）

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

完整配置项说明请参考：小程序全局配置

以下是一个包含了部分常用配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "小邓科技"
  },
  "tabBar": {
    "selectedColor": "#8B7500",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/index1.png",
        "selectedIconPath": "static/tabbar/index2.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/tabbar/home1.png",
        "selectedIconPath": "static/tabbar/home2.png"
      }
    ]
  }
}
复制代码

全局配置效果图.png

pages（页面）

pages 介绍说明和开发相关配置项，参考官方文档：pages配置

window（导航栏）

window 介绍说明和开发相关配置项，参考官方文档：window配置

组件（标签）

组件开发相关信息参考微信小程序官网组件文档：组件

text

编写文本信息，类似于 span 标签

view

容器，类似于 div 标签

image

图片

flex 布局（非小程序特有，通用的布局方式）

一种非常方便的布局方式。在容器中一般记住以下四个样式即可：

display: flex;                 // flex 布局
flex-diretion: row;            // 规定主轴的方向；row/column
justify-content: space-around; // 元素在主轴方向上的排列方式：flex-star/flex-end/space-around/space-between/center
align-items: center;           // 元素在辅轴方向上的排列方式：flex-star/flex-end/space-around/space-between/center
复制代码

比如要给 menu 布局 flex，如下写法：

.menu {
  display: flex;
  flex-direction: row; // 按行展示
  /*flex-direction: column; // 按列展示*/
}
复制代码

index.wxml 代码示例：

<!--pages/index/index.wxml-->
<view>示例一</view>

<view class="menu">
  <view class="item">
    <image src="/static/gift/gift1.png"></image>
    <text>礼物一</text>
  </view>
  <view class="item">
    <image src="/static/gift/gift2.png"></image>
    <text>礼物二</text>
  </view>
  <view class="item">
    <image src="/static/gift/gift3.png"></image>
    <text>礼物三</text>
  </view>
  <view class="item">
    <image src="/static/gift/gift4.png"></image>
    <text>礼物四</text>
  </view>
</view>
复制代码

index.wxss 代码示例：

.menu { 
  height: 1500rpx; 
  border: 1rpx solid #bbbbbb;
  display: flex;

  /* 水平方向排列(规定主轴方向) row/column */
  flex-direction: column;

  /* 元素在主轴方向如何排列 flex-start/center/space-around/space-between/flex-end */
  justify-content: space-around;

  /* 元素在辅轴方向如何排列 flex-start/center/space-around/space-between/flex-end */
  align-items: center;
}
.menu .item {
  display: flex;
  flex-direction: column;
}
复制代码