2019独角兽企业重金招聘Python工程师标准>>> 
前言
最近发布了一批搞笑的文字类小程序；故记录一下有关小程序的一些开发心得。开篇就拿样例工程入手。
此篇主要是介绍一下小程序样例工程的目录结构，以及小程序的文件构成。另外还对于自己认为callback获取用户信息的疑点做出了一些说明。
样例工程
小程序样例工程（QuickStart）目录结构
│ app.js
│ app.json
│ app.wxss
│ jsconfig.json
│ project.config.json
│
├─.vscode
│ settings.json
│
├─pages
│ ├─index
│ │ index.js
│ │ index.wxml
│ │ index.wxss
│ │
│ └─logs
│ logs.js
│ logs.json
│ logs.wxml
│ logs.wxss
│
├─typings
│ wx.d.ts
│
└─utils
util.js
注意：因我使用了vscode作为小程序的开发工具，故会自动增加
.vscode以及typings(vscode小程序开发插件自动增加)目录
官网中的API文档有提到不同文件的含义
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
JSON文件
在项目中有以下几个JSON文件 app.json、project.config.json、pages/logs/logs.json
app.json
app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
pages用于描述当前小程序所有页面路径（让微信客户端知道当前你的小程序页面定义在哪个目录）
window定义小程序所有页面的顶部背景颜色。
工具配置 project.config.json
project.config.json 是指个性化的配置信息；如配置版本库、该小程序是发布到哪个appId，以及工程名等...
页面配置 page.json
为每个page定义顶部颜色、是否允许下拉刷新等
该文件在page中可有可无，如果不存在，则默认为app.json的配置；存在则以该文件的配置为准。
WXML 模板
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。简单来说：WXML 充当类似 HTML 的角色。
而且小程序是基于MVVM的开发模式，对于已经熟悉Vue、React等前端开发框架的话，会很容易上手。另外有个WXML的一些数据绑定、事件等可参考官网API：WXML
需要注意的是小程序本身已经封装了属于自身的标签: view, button, text 等等；具体用法可以在官网API中了解：组件说明
WXSS 样式
也就是小程序的页面样式，官网有提到app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
另外WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼。也就是说，rpx是类似于rem等单位尺寸；但rpx不需要要增加根大小，直接使用即可。
JS 交互逻辑
该文件是作为小程序的交互逻辑文件；处理相关交互逻辑。 在此可查看与小程序交互逻辑API：交互逻辑API
小程序的启动
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行
整个小程序只有一个 App 实例，全部页面共享
App实例相关回调函数说明
对于样例工程中，callback的理解
下面先看看样例工程中的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
}
})
上面有关callback的的疑问大多都在
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
其实 userInfoReadyCallback 可以换成你想要的命名。
我们在index.js中可以看到有这样的代码:
const app = getApp()
......
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
......
结合app.js、index.js的代码，可以得出callback的作用：
//app.js
if (this.userInfoReadyCallback) { //是否定义了userInfoReadyCallback
this.userInfoReadyCallback(res) //定义后就调用该函数，并且传入res的参数信息
}
//index.js
//此处定义了function userInfoReadyCallback(res)，注意app.userInfoReadyCallback；也就是在app.js中定义了userInfoReadyCallback；故在执行获取用户信息的时候，会将用户信息设置到index.wxml页面的data中
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
最后有关 js 的 callback 可以参考一下：Understand JavaScript Callback Functions and Use Them 文章。
后续将介绍，在小程序中使用Promise。