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

1. 目录结构

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

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

2. app.json 文件介绍

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>