微信小程序开发实战（一）开发指南

1. 目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序页面由四个文件组成，分别是：

2. app.json 文件介绍

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

2.1.自动创建page页面文件

2.2 菜单栏

"tabBar": {
  "list": [
     {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "images/tabBar/icon_index.png",
        "selectedIconPath": "images/tabBar/icon_index_selected.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/tabBar/icon_my.png",
        "selectedIconPath": "images/tabBar/icon_my_selected.png"
      }
  ]
},

2.3 页面配置

每一个小程序页面也可以使用同名 ​​.json​​​ 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖​​app.json​​​ 的 ​​window​​ 中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "小程序名称",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

3 app.js文件

globalData: {
  url: "http://127.0.0.1/",
},

onLaunch() 函数：默认程序打开后一定执行的功能

4 综合小案例

这里配置两个文件：​​app.json​​​,​​index.wxml​​

4.1 app.json

{
  "pages": [
    "pages/index/index",
    "pages/my/my"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "小程序名称",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2",
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "images/tabBar/icon_index.png",
        "selectedIconPath": "images/tabBar/icon_index_selected.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/tabBar/icon_my.png",
        "selectedIconPath": "images/tabBar/icon_my_selected.png"
      }
    ]
  }
}

4.2 index.wxml

<view>
  你真棒
</view>

欢迎加入博主官方QQ群交流: 779133600