微信开发之旅———Day2（小程序框架——上）

上次大概了解了一下微信开发是什么，安装了环境，注册了账号，创建了第一个项目并调戏了它一会~~

##框架结构

pages，顾名思义，是页面的意思，这个文件夹里汇总着所有的页面。pages文件夹下还有多个子文件夹，就是具体的每一个页面。而每一个页面文件夹下又有着.wxml、.wxss、.js和.json文件。

然后继续来看，除了pages，同一级目录下还有app.js 、app.json 、app.wxss 、project.config.json

##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
  }
})

app.js文件是小程序的脚本代码，用来监听并处理小程序的生命周期函数、声明全局变量。对于app的注册来说，涉及到一个App（）方法，用于对小程序进行初始化操作。

App()的参数及其描述

参数	类型	描述	触发时机
onLaunch	Function	生命周期函数——监听小程序初始化	当小程序初始化完成，会触发onLaunch
onShow	Function	生命周期函数——监听小程序显示	当小程序启动，或从后台进入前台显示，会触发onShow
onHide	Function	生命周期函数——监听小程序隐藏	当小程序从前台进入后台，会触发onHide
onError	Function	错误监听函数	当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息
其他	Any	开发者自定义函数或数据

示例代码：

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

##app.wxss
是整个小程序的公共样式表，每一个页面都可以使用，但是页面优先级较高（也就是说，如果页面和这里的样式产生冲突，会优先采用页面的wxss配置）

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

##app.json
是整个小程序的全局配置，配置小程序由哪些页面组成，配置小程序的窗口背景色等等。（每新加一个页面，都要来这里注册一下！！！否则打不开！窗口背景色等窗体配置同wxss一样，页面会覆盖这里的全局配置）

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

这里来详细介绍一下app.json的配置问题。

1.全局配置

配置项	类型	是否必填	描述
pages	Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部的tab表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启debug模式

2.window配置

对象	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，支持black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口背景色
backgroundTextStyle	String	dark	下拉背景字体、loading图样式，支持dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新

3.tabBar配置

对象	类型	是否必填	默认值	描述
color	HexColor	是		标签页上的文字默认颜色
selectColor	HexColor	是		标签页上文字选中时的颜色
backgroundColor	HexColor	是		标签页的背景色
borderStyle	String	否	black	标签条上的框线颜色，支持black/white
list	Array	是		标签页列表，支持至少两个，至多五个标签页
position	String	否	bottom	可选值bottom、top

4.networkTimeout配置

对象	类型	是否必填	描述
request	Number	否	wx.request的超时时间，单位为ms
connectSocket	Number	否	wx.connectSocket的超时时间，单位为ms
uploadFile	Number	否	wx.uploadFile的超时时间，单位为ms
downloadFile	Number	否	wx.downloadFile的超时时间，单位为ms

##project.config.json
这是一个小程序的基础配置文件，用来配置一些最基础的信息在里面，比如项目名啊，版本号啊，一些功能的启动啊等等等等

{
	"description": "项目配置文件",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.5.0",
	"appid": "wxc897608a4adfe2eb",
	"projectname": "test01",
	"debugOptions": {
		"hidedInDevtools": []
	},
	"isGameTourist": false,
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

##Q&A:

Q：页面文件夹一定要叫pages吗？
A：不是强制的，不用pages命名也可以。但是更推荐这样，会便于代码的查看和后期的维护。

Q：每个页面都有自己的配置，为什么还要全局配置呢，不是很多余吗？
A：当然不是啦，使用全局配置可以少写很多代码，提高代码的精简度，减少工作量~

上一篇：微信开发之旅———Day1（小程序初体验）
下一篇：微信开发之旅———Day3（小程序框架——下）