小程序快速入门:坏境和生命周期

2019-08-01  本文已影响0人  康小曹

1、JSCore到底是个什么东西?

动态渲染原理和过程:

1、wxml会被转换成js对象来表达这个page
2、js对象会被转化成dom
3、逻辑层数据发生改变,调用setData
4、对比新旧dom,将差异应用到原来的dom中,从而实现动态渲染

小程序宿主环境的三个部分:
渲染层:和数据绑定,展示页面;
逻辑层:产生数据,操作数据,发起数据传递请求,发起网络请求;
native:从逻辑层接收数据传递请求并转发到渲染层、从逻辑层接收网络请求并通过native发送请求;

说白了,就是微信把操作dom对象的一系列操作封装在了setData方法中,省去了操作dom的同时,还提供了wxml+wxss+api的环境,使开发者不用重复造轮子,实现快速、简单的开发方式。

生命周期

1、app的生命周期
小程序通过app.js中的App()函数注册一个小程序app,可以通过getApp()获取到这个单例对象,类似于iOS中的Appdelegate。

App()函数中默认注册了onLaunch、onShow、onHide、onError四个回调函数:
onLaunch:初始化完成,全局只有一次
onShow:加载完成或者从后台进入前台
onHide:从前台进入后台
onError:脚本错误、api调用失败

App()函数中还可以注册任意的自定义函数和变量,都可以通过getApp().xxx获取到;

onLauch和onShow可以通过参数获取小程序启动或者显示的一些信息:

App({
  onLaunch: function(options) { console.log(options) },
  onShow: function(options) { console.log(options) }
})

线程问题
1、每个页面都有一个独立的webview线程渲染页面
2、所有的js脚本都运行在jscore线程中
由此,需要注意几个问题:
1、页面跳转时,在跳转之前需要清楚无效的定时器,比如setTimeout()、setInterval()等
2、如果是同一个jscore线程,那么多个page.js之间是如何实现模块化的呢?是否会相互影响?

经测试,确实是不想不影响。如果在page2.js中打印page1.js中的全局变量,直接会报错,变量未定义,程序无法继续运行

2、页面的生命周期
小程序中,app通过Page()函数来注册页面,前提是当前页面需要在app.json中的pages中声明。

一个页面是分三部分组成:界面、配置和逻辑。界面由WXML文件和WXSS文件来负责描述,配置由JSON文件进行描述,页面逻辑则是由JS脚本文件负责。一个页面的文件需要放置在同一个目录下,其中WXML文件和JS文件是必须存在的,JSON和WXSS文件是可选的。

页面跳转/切换

跳转url的特殊之处:url是相对url,且以当前js文件所处的文件夹为起始路径,例子:


跳转url的设定

url的参数的传递:
?来分离path和query
&来连接多个参数
urlencode:转义特殊字符
urlencode怎么使用:

页面数据的传递和更新

setData()方法
注意点:
1、只设置不调用setData方法将无效且会造成数据不统一的后果
2、setData是异步的,第一个参数是要传递的变量,第二个参数是成功后的回调函数
3、只需要设置改变的值,所以要遵循一个原则:每次只设置需要改变的最小单位数据
4、不能设置变量为undefined

上一篇 下一篇

猜你喜欢

热点阅读