微信小程序（1）——项目基础架构及页面组成结构

从2017年年初微信小程序出世以来，因为它不用安装，不占内存，即点即用等优良特性，受到了广大人民群众的喜爱，越来越多的企业、组织和团体把目光投向了微信小程序的开发，微信小程序的热度也随之水涨船高。

 

▍默认基础结构（自动创建）

【注意】app.js、app.json、app.wxss作用于全局所有的页面。

1、app.js：小程序逻辑。

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

2、app.json：小程序公共设置，对微信小程序进行全局配置，决定页面文件的路径【pages】、窗口表现【window】、设置网络超时时间【networkTimeout】、设置多 tab【tabBar】 等。

【注意】json文件中不能添加注释，否则会报错。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#fff",
    "enablePullDownRefresh": false,
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "red",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

【pages】页面文件的路径。数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

【window】窗口表现。

【tabBar】底部导航栏。只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

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

【networkTimeout】设置网络超时时间。

【debug】是否开启调试模式。true或者false。

3、app.wxss：小程序公共样式表（类似于h5的css文件，支持class、id等选择器）。

/**app.wxss**/

/* 引入框架方式，非必需 */
@import "resources/styles/weui.wxss";

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

4、project.config.json：项目配置文件（若非必要，请勿修改配置）。

{
	"description": "项目配置文件。",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.0.4",
	"appid": "你的APPID",
	"projectname": "你的项目名",
	"isGameTourist": false,
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

▍页面组成及结构

创建的页面路径必须添加到app.json的page中。

一个页面一般由wxml、js、wxss、json四个文件组成，四个文件必须同名。

【建议】可以直接在app.json的page中添加你想要添加的页面，此时页面的4个文件会自动生成，不需要手动创建。

1、wxml：必要文件。页面结构，其标签与H5所使用的标签有一定的区别。例如：H5主要的容器标签是<div></div>，但是在wxml文件中没有div标签，其主要容器标签为<view></view>。参考示例：

<!--pages/index/introduction.wxml-->
<view class='contain'>
  <text>文本控件</text>
</view>

2、js：必要文件。页面中的数据以及函数方法处理。

3、wxss：非必要文件。页面的样式文件。当页面wxss文件配置的样式与app.wxss配置的样式出现冲突时，以页面wxss文件配置的样式为准。

4、json：非必要文件。在json文件中仅能配置下面表格中的参数（配置详情可参考app.json的【window】），当页面配置的json文件与app.json出现冲突时，以页面配置的json文件。