小北微信小程序小白系列教程第二篇 -- 入口

作为一名后端开发人员，我希望能从后端语言的某些模式来理解小程序，让我快速的入门。

今天我们依然模拟一个女项目经理和后端工程师的博弈，为你逐步展开小程序的面纱。

角色定位

女一号大樱桃：女项目经理，30岁，未婚。
男一号老沙：帅气的后端工程师，30岁，已婚。

App

当听到大樱桃这样说自己的时候，老沙明白的确是自己的问题，小程序工具为我们生成了一个基础的框架，但是这个框架里的文件都是做什么用，每个文件如何去操作他并不知道，这的确是一个问题。

于是老沙决定用30分钟的时候先研究下其中的 app.js / app.json / app.wxss / project.config.json

app.js

从微信小程序官方文档我们知道：“小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。”，而app的构建、维护以及配置就是由上面4个文件管理的。

@@nai8@@

当我们打开一个小程序的时候，伴随着生成一个小程序的实例，这个很像yii中入口对application的生成逻辑。

同时提供了一个叫做App()的函数用来接收

小程序实例

完成最后的注册，这个函数存在于app.js中，而所谓的注册，里面可以包含我们自己的逻辑，比如启动后你想做什么？遇到错误你想做什么，这些都可以在注册小程序的时候实现。

打开你的app.js，你发现有4+个函数，4个内置函数和你可以自己定义的N个函数。

名词解释

onLanuch 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow 当小程序启动，或从后台进入前台显示，会触发 onShow
onHide 当小程序从前台进入后台，会触发 onHide
onError 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

这里有一个疑问我想大家也会遇到，就是前后台的概念，简单的说就是当你在左上角关闭小程序后（或按home键退出微信），这个小程序并不会真正的销毁而是进入后台模式运行，当再次打开进入前台运行而非重新启动。

最明显的一个现象就是你在小程序某个特定页面关闭小程序，再次打开会直接进入这个特定页面而非启动页。

globalData

这个字段也很有用。用来存放一些全局的东西，比如统一的远程接口地址等，这里设置的值是有办法在其他page页面使用的。

比如某个小程序的globalData如下图

N个函数

我们都知道除了内置的函数，我们也可以在app.js里写其他函数，那么问题来了？什么函数要写到app.js里那？

回答这个问题之前我们要先知道一个事情，那就是在小程序的其他页面可以通过getApp函数获取到app对象，进而可以调用app.js里的东西，也就是说你在app.js里定义的那些N个函数可以被其他页面获取并使用。

这样你明白了吧？比如登录函数、获取用户信息、弹出框等用于整个app的高频函数都可以写到app.js中。

研究到此，老沙欣慰的一笑，先来杯咖啡。

onLaunch

接下来老沙决定研究一下onLaunch函数，首先要说的是onLaunch的参数options里都有什么？很简单，在onLaunch函数内写下了console.log(options)将它打印到控制台。

在今后的日子里，如果你不清楚一个对象或参数什么的，记住使用console.log打印到控制台，很方便。

当然，onLaunch可以获取很多参数，比如path代表打开小程序的路径，当你分享小程序某个页面A到微信群，别人通过A打开了小程序，则path就是A页面的路径。

关于参数的详细介绍可以看下图

path、query、scene是常规的参数，在特定情况下会出现其他参数，比如当你要捕获群分享后的数据时shareTicket参数会出现等等。

一般来说当一个小程序启动后就需要做的事情可以写到onLaunch函数，比如登录。

而onShow接收的参数和onLanuch是一致的。

注意点

官方给了一些注意点，基本就是所有了，列下方便大家学习。

App() 必须在 app.js 中注册，且不能注册多个。
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。

对于上面的getApp你可能还不了解，接下来研究下。

getApp

这是一个函数，主要目的是在其他页面获取app实例，比如接下来的代码

获取后你就可以在页面函数体内直接调用app.js的函数和数据，比如 http://app.xxx() 或app.globalData这样。

这里要重复下上面的注意事项：不要在定义于 App() 内的函数中调用 getApp()

app.json

一顿研究后，老沙对app.js已经基本了解，接下来攻克app.json这个文件。微信官方是这样说的：“app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。”

接下来用老百姓的话为大家解释下：

将页面注册到小程序如何配置？找app.json
如何设置导航栏颜色？找app.json
如何制定窗口背景颜色？找app.json
如何启动下拉功能？找app.json
如何设置小程序底部tab切换页面？找app.json
如何设置网络超时时间？找app.json

一句话，和小程序自身相关的配置，去app.json里找。

关于app.json里的详细配合可以参考官方地址

https://mp.weixin.qq.com/debu...

app.wxss

最好理解的就是它了，上篇大家已经知道wxss是样式文件，app.wxss则是小程序的全局样式，它可以应用到所有page页面。

wxss是微信小程序自己定义的样式语言，它支持内联、导入等等。同时具有css大部分的特性，所以你可以像写css一样写它们。

关于使用方法可以参考

https://mp.weixin.qq.com/debu...

project.config.json

这是一个项目配置文件，比如项目的名字，appid等等。

如果你还不懂，可以看下开发工具的详情，那里面的设置和project.config.json是一样的，一个配置文件，一个可视化的，目的是一样的。

小结

30分钟过去了，老沙基本搞明白了入口的逻辑，赶紧给大樱桃看看去。

.......

10分钟过去了