微信小程序知识点总结（一）

1、微信小程序宿主环境

微信小程序使用的技术栈是js/wxml/wxss。跟咱们web开发使用的技术栈存在一些不一样。

• js：微信小程序的js运行是基于微信客户端，或者只微信APP上下文来运行的，并非在浏览器中运行，所以它不能访问浏览器环境下的DOM对象，也不能访问node.js下的操做系统API等。
• wxml：是微信提供的一种新的基于XML的语法格式，做为微信小程序的展现层，提供整个页面的结构。
• wxss：是一套用于修饰微信组件的样式语言。wxss具备大部分的css特性，可是仍存在一些其余的不足。

微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具

在 iOS 上，小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS八、iOS九、iOS10；

在 Android 上，
    旧版本，小程序逻辑层的 javascript 代码运行中 X5 JSCore 中，视图层是由 X5 基于 Mobile Chrome 57 内核来渲染的；

    新版本，小程序逻辑层的 javascript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 67 内核来渲染的；
    
在 开发工具上， 小程序的 javascript 代码是运行在 nwjs（chrome内核） 中，mwjs是合并browser和node的运行时，使用前端技术来开发跨平台的应用，微信小程序开发工具就是使用其开发的。

注意：三端环境各不相同，虽然提供了相似的实现，可是仍是存在一些不一样，JavaScript 语法和 API 支持不一致，咱们能够经过开启ES6自动转换来规避一些问题。

具体的js支持状况，咱们能够参考官方文档。
JavaScript 支持状况

2、MINA框架解析

微信小程序的底层框架咱们又称为是MINA框架。

以上是官方提供的一张图。微信小程序的运行环境包含渲染层和逻辑层。渲染层负责页面的渲染工做，由wxml和wxss来负责呈现，逻辑层负责整个小程序js脚本运行。

渲染层和逻辑层是不一样的线程在执行，渲染层 使用webView来渲染，逻辑层由jsCore线程来执行。微信小程序由多个页面组成，每个页面都是一个webView线程。渲染层线程和逻辑层线程之间的通讯须要借助于微信客户端Native来完成。同时逻辑层发送网络请求也须要咱们的Native来提供支持。

看了官网提供的图，咱们再来看另外一个图。

整个小程序只有一个App service。而且常驻内存。APP Service将数据绑定到咱们的视图层，触发视图的更新，视图中经过事件监听来回调咱们逻辑层的方法，在逻辑层去处理咱们的逻辑，更新数据。视图层和逻辑层经过系统层Native中的JsBridge来实现通讯。系统层提供了访问微信原生能力的能力，同时也为网络请求等提供服务。

App Service由两部分组成，一部分是Manager负责逻辑的执行，另外一部分是API，对不一样的平台微信为咱们作了一层处理，使得咱们能够经过同一个API接口来实现。

3、微信小程序的启动分类

小程序启动会有两种状况，一种是「冷启动」，一种是「热启动」。

• 热启动：假如用户已经打开过某小程序，而后在必定时间内再次打开该小程序，此时无需从新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；
• 冷启动：用户首次打开或小程序被微信主动销毁后再次打开的状况，此时小程序须要从新加载启动，即冷启动。

小程序没有重启的概念。

只有当小程序进入后台必定时间，或者系统资源占用太高，才会被真正的销毁。

4、微信小程序的启动机制

一、首先从CDN加载咱们的小程序包，而后加载运行，只有当页面放入WebView后才能显示出来。
二、下次咱们运行的时候，（冷启动）会再次向CDN发送请求，去判断是否有更新信息，而后异步下载最新的代码包。
   咱们下次启动的时候才能使用最新的代码。若是没有更新，则直接使用本地缓冲的代码包

5、微信小程序的生命周期

应用的生命周期

当咱们第一次启动小程序的时候，首先初始化小程序执行环境，而后会从本地缓冲或者是CDN下载代码包进行加载，当咱们的小程序初始化完成以后，会触发APP实例的onLaunch方法，全局只调用一次。
当咱们切换小程序到后台的时候调用onHide，当切回前台的时候调用的是onShow方法。当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。

页面的生命周期

• onLoad 页面第一次加载的时候调用，只调用一次，此时咱们能够拿到一些页面的打开参数。
• onShow 页面显示或者从后台切回前台的时候调用的，该方法可能会调用屡次，好比咱们页面的跳转和返回，都会调用onShow。
• onHide 页面隐藏或者切到后台会调用，也是会调用屡次。
• onReady 页面渲染完成以后调用，一个页面只调用一次。
• onUnload 页面销毁的时候调用，好比咱们点击返回键，那么当前页面会销毁执行onUnload。

咱们结合页面跳转来分析一下页面生命周期的调用顺序～

假如咱们有index和logs页面。index为首页，index有一按钮能够跳转到logs

一、第一次进入，先调用app实例的onLaunch和onShow。
二、调用index页面的onLoad、onShow、onReady
三、点击按钮：调用index的onHide，而后调用logs的onLoad、onShow、onReady
四、点击左上角的返回，先调用logs的onUnload,而后调用index的onShow
五、点击按钮：调用index的onHide，而后调用logs的onLoad、onShow、onReady

上面是官网提供的一个图，咱们能够分析一下～

一、小程序执行须要两个线程，一个是UI线程负责视图层，一个是AppService线程，负责逻辑处理。
二、AppService线程建立好以后会依次调用onLoad和onShow方法，咱们能够在这里作一些数据请求操做
三、UI线程建立好以后会进行初始化工做，当初始化ok以后，会告诉AppService线程，此时AppService发送数据，提供给UI线程进行页面数据填充。而后页面进行初次渲染，渲染好以后告诉AppService线程，此时onReady回调开始触发。
四、期间AppService线程能够处理一些事件触发，从而更新data数据，从新触发视图的渲染。

针对路由变化，页面生命周期的调用

总之页面出栈，会调用onUnload去销毁咱们的页面，若是不出栈，调用onHide。

如何能好的掌握页面路由变化咱们页面生命周期怎么变化，咱们还须要知道路由变化的机制。

• tabbar页面的切换，咱们能够参考官方文档。页面切换

注意

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 能够打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数能够在目标页面的onLoad中获取。