对微信小程序的理解

前言

相信很多人对微信小程序都比较情有独钟，首先大家应该知道小程序的优点，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

小程序开发框架组成介绍

首先介绍一个小程序宿主环境差异，其中iOS是基于JavaScriptCore，Android是基于X5内核，IDE是基于nwjs。

1.WXML （WeiXin Markup Language）

它是框架设计的一套标签语言，结合组件、WXS和事件系统，可以构建出页面的结构。你需要了解他的相关知识：

1）数据绑定

2）列表渲染

3）条件渲染

4）模板及引用

2.WXSS

它是一套样式语言，用于描述WXML的组件样式。（CSS也是一套样式语言，是一种样式表语言，用来描述HTML或XML文档的呈现）你需要了解它的相关知识：

1）响应式像素

2）样式

3）选择器

在小程序中生命周期分为三大类

应用生命周期
页面生命周期
组件生命周期

应用生命周期

onLaunch(Object)

小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
参数说明：

与 wx.getLaunchOptionsSync 一致
onShow(Object)

小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听
参数说明：

与 wx.onAppShow 一致

onHide()

小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。

onError(String error)

小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。

参数说明

与 wx.onError 一致

onPageNotFound(Object)

基础库 1.9.90 开始支持，低版本需做兼容处理。

小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound。

参数说明：

与 wx.onPageNotFound 一致
示例代码

App({
  onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  }
})

getApp(Object)
全局的 getApp() 函数可以用来获取到小程序 App 实例。
示例代码

// other.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意：

不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。

页面生命周期

onShow()
页面显示/切入前台时触发。
 
onReady()
页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
 
注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。详见生命周期
 
onHide()
页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
 
onUnload()
页面卸载时触发。如redirectTo或navigateBack到其他页面时。

组件生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。

组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

好啦，这篇对微信小程序的理解就到这里吧

预知下事如何，请看下次分解