微信小程序——入口
角色定位
女一号 大樱桃:女项目经理,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的函数和数据,比如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是一样的,一个配置文件,一个可视化的,目的是一样的。