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

1. 目录结构

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

文件	必须	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

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

文件类型	必须	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

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