前言
相信很多人对微信小程序都比较情有独钟,首先大家应该知道小程序的优点,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。
小程序开发框架组成介绍
首先介绍一个小程序宿主环境差异,其中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 会被触发。