微信小程序学习—01—


 

一、

1.wxml:

2.wxss:

rpx的规定是屏幕宽度是750rpx;

所以,如果设计稿是750px的,那么1rpx就等于1px;

如果设计稿是375px的,那么1rpx等于0.5px;

 

3.js:

ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言, JavaScript 是 ECMAScript 的一种实现。

理解 JavaScript 是 ECMAScript 一种实现后,可以帮助开发者理解小程序中的 JavaScript同浏览器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的。

在浏览器中,js对象可以操作dom和bom是不在ecma规范的,是浏览器自己添加上的特有功能;

 

 

 

 

 

 

 

 

 

 

二、程序和页面的生命周期

2.1程序:

onlaunch-》onshow-》onHide  (感觉类似vue的created、actived、deactived这三个钩子函数)

初次进入小程序的时候,微信客户端初始化好宿主环境,同时从网络下载或者从本地缓存中拿到小程序的代码包,把它注入到宿主环境,初始化完毕后,微信客户端就会给App实例派发onLaunch事件,App构造器参数所定义的onLaunch方法会被调用。
进入小程序之后,用户可以点击右上角的关闭,或者按手机设备的Home键离开小程序,此时小程序并没有被直接销毁,我们把这种情况称为“小程序进入后台状态”,App构造器参数所定义的onHide方法会被调用。
当再次回到微信或者再次打开小程序时,微信客户端会把“后台”的小程序唤醒,我们把这种情况称为“小程序进入前台状态”,App构造器参数所定义的onShow方法会被调用。

 

 

 

2.2页面:

onload-》onshow-》onReady  (感觉类似vue的created、beforeMounted、mounted这三个钩子函数)

注意:如果页面跳转出去时都会调用onhide,但是只有路由为wx.redirectTo或wx.navigateBack时,即页面被销毁了(理解为页面关闭了并且路由栈中删除了本记录),才会调用onUnload;这一点是和vue不一样的,vue不管是怎么样的路由,只要是跳出了当前组件那么当前组件都会被销毁,都会调用destoryed钩子函数;

 

页面初次加载的时候,微信客户端就会给Page实例派发onLoad事件,Page构造器参数所定义的onLoad方法会被调用,onLoad在页面没被销毁之前只会触发1次,在onLoad的回调中,可以获取当前页面所调用的打开参数option,关于打开参数我们放在这一节的最后再展开阐述。
页面显示之后,Page构造器参数所定义的onShow方法会被调用,一般从别的页面返回到当前页面时,当前页的onShow方法都会被调用。
在页面初次渲染完成时,Page构造器参数所定义的onReady方法会被调用,onReady在页面没被销毁前只会触发1次,onReady触发时,表示页面已经准备妥当,在逻辑层就可以和视图层进行交互了。
以上三个事件触发的时机是onLoad早于 onShow,onShow早于onReady。
页面不可见时,Page构造器参数所定义的onHide方法会被调用,这种情况会在使用wx.navigateTo切换到其他页面、底部tab切换时触发。
当前页面使用wx.redirectTo或wx.navigateBack返回到其他页时,当前页面会被微信客户端销毁回收,此时Page构造器参数所定义的onUnload方法会被调用。

 

 

 

每一个tab页有一个单独的页面栈;

页面栈中使用wx.switchTab({ url: 'pageF' }),此时原来的页面栈会被清空(除了已经声明为Tabbar页pageA外其他页面会被销毁),然后会切到pageF所在的tab页面,页面栈变成 [ pageF ],此时点击Tab1切回到pageA时,pageA不会再触发onLoad,因为pageA没有被销毁。

 

 

若从页面A使用wx.navigateTo跳转到页面B,再使用wx.navigateTo跳转到页面A,此时页面栈中有三个页面:A、B、A,而不是两个A、B。所以这就是navigateTo和navigateBack的区别;

在视图层内,小程序的每一个页面都独立运行在一个页面层级上。小程序启动时仅有一个页面层级,每次调用wx.navigateTo,都会创建一个新的页面层级;相对地,wx.navigateBack会销毁一个页面层级。

对于wx.redirectTo,这个调用不会打开一个新的页面层级,而是将当前页面层级重新初始化:重新传入页面的初始数据、路径等,视图层清空当前页面层级的渲染结果然后重新渲染页面。

posted @ 2023-02-03 16:35  Eric-Shen  阅读(103)  评论(0编辑  收藏  举报