双线程模型

像 Vue 的双向数据绑定

总结:

  1. 在渲染层将wxml文件与wxss文件转成js对象,也就是虚拟的dom
  2. 逻辑层生成数据,把数据与虚拟的dom相结合,得到真实的dmo,然后在交给渲染层渲染
  3. 当有数据变化的时候,逻辑层负责更新数据,js对象发生改变,这种改变方式采用的是diff算法进行比较,只改变,变化的部分
  4. 将更新的数据,进行反馈,再次得到虚拟的dmo中,从而更新页面。

小程序的启动流程

小程序中 app.js 中的生命周期

app.js 小程序全局只有一个App对象

// 下文中所说的后台是指:用户将小程序切换到手机的后台运行。这种操作我们叫做从前台切换到后台。和我们平时开发中的后台没有关系

//下文中所说的前台是指:用户将小程序重手机后台运行,调用到用户手机的显示界面,我们叫做从后台切换到前台。

  1. App({
  2. /*
  3. 当小程序初始话完成,会触发onlaunch(全局只触发一次),onlaunch在手机后台到前台切换是不会执行的。
  4. 如果要他再次执行,除非在手机中关闭(关闭不是切换到后台,而是直接删除小程序的后台运行)小程序,然后重新打开,才能执行,
  5. */
  6. onLaunch: function () {
  7. console.log("小程序的初始话:onlaunch")
  8. },
  9. /**
  10. * 当小程序启动,或者是重后台进入到前台的时候,会执行onshow,
  11. * 那我们可以通过这个option中的scene值来判断不同进入场景
  12. */
  13. onShow:function(option){
  14. console.log("小程序onshow,:onShow",option)
  15. },
  16. /*小程序重前台进入到后台的时候,会触发:onHide*/
  17. onHide:function(){
  18. console.log("小程序重前台进入到后台的时候,会触发:onHide")
  19. },
  20. /**可以在全局使用 */
  21. globalData: {
  22. userInfo: null
  23. }
  24. })

执行App.js生命周期的时候以及在整个App对象我们可以做什么?

  1. 在注册 app 时候,我们可以通过 onshow 来判断用户进入小程序的场景
  2. 我们可以在生命周期函数中,做一些数据请求。
  3. 我们可以在 app 中设置一个全局的对象,让所有的页面都可以使用,比如上面的globalData

小程序的页面的生命周期


  1. // pages/test/test.js
  2. Page({
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. msg:'own is sb',
  8. },
  9. /**
  10. * 生命周期函数--监听页面加载,页面如果不关闭,这个onload只执行一次
  11. */
  12. onLoad: function (options) {
  13. console.log("onLoad")
  14. },
  15. /**
  16. * 生命周期函数--监听页面显示,页面从底下切到上面的时候也会执行
  17. */
  18. onShow: function () {
  19. console.log("onShow")
  20. },
  21. /**
  22. * 生命周期函数--监听页面隐藏
  23. */
  24. onHide: function () {
  25. console.log("onHide")
  26. },
  27. /**
  28. * 生命周期函数--监听页面卸载
  29. */
  30. onUnload: function () {
  31. console.log("onHide")
  32. },
  33. /**
  34. * 生命周期函数--监听页面初次渲染完成,这个真实dom要渲染的时候,就会执行
  35. */
  36. onReady: function () {
  37. },
  38. /**
  39. * 页面相关事件处理函数--监听用户下拉动作,如果你要监听这个动作,然后触发底下的函数的话,你必须"enablePullDownRefresh" :true配置成可以下拉刷新。
  40. */
  41. onPullDownRefresh: function () {
  42. console.log("onPullDownRefresh")
  43. },
  44. /**
  45. * 页面上拉触底事件的处理函数,如果要成功触发这个事件,必须页面显示不够一页显示
  46. */
  47. onReachBottom: function () {
  48. console.log("onReachBottom")
  49. },
  50. })

在页面的page对象中可以做哪些事情

  1. 在生命周期函数中,向服务器请求数据
  2. 在 data 中初始话数据,给 wxml 使用
  3. 监听 wxm l事件,绑定对应的事件
  4. 监听页面的上拉,下拉等

小程序的事件

事件绑定

wxml 文件

  1. <!--pages/test1/test1.wxml-->
  2. <view bindtap="click1">我是事件</view>
  3. <button bind:tap="click1" data-name="{{name}}" data-age="18" id="bt">我是按钮</button>
  4. <view id="outter" bindtap="click3" data-a="o">外面
  5. <view id="innder" bindtap="click2" data-a="i">
  6. 里面
  7. </view>
  8. </view>

js 文件

  1. Page({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. name:"owen"
  7. },
  8. //e为事件对象,事件所有产生的数据都在e中
  9. click1:function(e){
  10. console.log("你点我了"e)
  11. },
  12. )}

总结:

  1. 响应函数直接写在 page 对象中就可以了,不需要和 vue 一样写在 methods 里面
  2. <view bind:事件名称 = "响应函数的函数名" data-参数名 = "值">
  3. 获取2中传过来的值,在事件对象中。例如:e.currentTarget.dataset中

事件补充

js 文件

  1. // pages/test1/test1.js
  2. Page({
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. name:"owen"
  8. },
  9. click1:function(e){
  10. console.log("你点我了",e)
  11. },
  12. click2:function(e){
  13. console.log("里面",e)
  14. },
  15. click3:function(e){
  16. console.log("外面",e)
  17. },
  18. click4:function(e){
  19. console.log("捕获外")
  20. },
  21. click5:function(e){
  22. console.log("捕获中")
  23. },
  24. click6:function(e){
  25. console.log("捕获里")
  26. }
  27. ,
  28. click7:function(e){
  29. console.log("冒泡外")
  30. },
  31. click8:function(e){
  32. console.log("冒泡中")
  33. },
  34. click9:function(e){
  35. console.log("冒泡里")
  36. }
  37. })

wxml 文件


  1. <!-- capture-bind:tap 事件的捕获,从外面到里面-->
  2. <!-- bind:tap就是事件的冒泡,重里面到外面传递 -->
  3. <view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
  4. <view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
  5. <view class="innder" capture-bind:tap="click6" bind:tap="click9">
  6. 里面
  7. </view>
  8. 中间
  9. </view>
  10. </view>
  11. <!-- 如何阻止事件捕获 将 capture-bind:tap改成 capture-catch:tap-->
  12. <view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
  13. <view class="midd" capture-catch:tap="click5" bind:tap="click8" data-a="i">
  14. <view class="innder" capture-bind:tap="click6" bind:tap="click9">
  15. 里面
  16. </view>
  17. 中间
  18. </view>
  19. </view>
  20. <!-- 如何阻止事件冒泡 将bind:tap 改成 catch:tap-->
  21. <view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面
  22. <view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
  23. <view class="innder" capture-bind:tap="click6" catch:tap="click9">
  24. 里面
  25. </view>
  26. 中间
  27. </view>
  28. </view>

wxss 文件

  1. /* pages/test1/test1.wxss */
  2. #outter{
  3. width: 400rpx;
  4. height: 400rpx;
  5. background-color: red;
  6. }
  7. #innder{
  8. width: 200rpx;
  9. height: 200rpx;
  10. background-color: yellow;
  11. }
  12. .outter{
  13. width: 600rpx;
  14. height: 600rpx;
  15. background-color: red;
  16. }
  17. .midd{
  18. width: 400rpx;
  19. height: 400rpx;
  20. background-color: blue;
  21. }
  22. .innder{
  23. width: 200rpx;
  24. height: 200rpx;
  25. background-color: yellow;
  26. }

微信小程序生命周期,事件的更多相关文章

  1. 微信小程序生命周期

    微信小程序 生命周期 通俗的讲,生命周期就是指一个对象的生老病死. 从软件的角度来看,生命周期指程序从创建.到开始.暂停.唤起.停止.卸载的过程. 下面从一下三个方面介绍微信小程序的生命周期: 应用生 ...

  2. 微信小程序-生命周期图解

    微信小程序-生命周期图解 小程序生命周期 App 生命周期 https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.htm ...

  3. 微信小程序生命周期——小程序的生命周期及页面的生命周期。

    最近在做微信小程序开发,也发现一些坑,分享一下自己踩过的坑. 生命周期是指一个小程序从创建到销毁的一系列过程. 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面. 首先来 ...

  4. 微信小程序生命周期详解

    文章出处:https://blog.csdn.net/qq_29712995/article/details/79784222 在我看来小程序的生命周期虽然简单,但是他渗透了小程序开发的整个过程,对于 ...

  5. 微信小程序 - 生命周期 - 参数传递

    ​ 现在WEB开发门槛越来越高,不想java 会了就可以有工作,前端不行 ,不仅JavaScript要求不低,基础的HTML+CSS还要扎实,jquery也是必须要会,现在的前端框架 Vue Ng R ...

  6. 浅谈微信小程序生命周期

    之前在做微信小程序的时候,一直对生命周期里面的onLoad,onShow,onUnload不是很理解.比如说什么时候会触发onUnload. 经过一段时间的测试发现,普通页面的onUnload在三种情 ...

  7. 微信小程序 - 生命周期

    生命周期 1.小程序注册完成后,加载页面,触发onLoad方法.(切记,onShow和onLoad的区别,onShow是每当进入这个页面时就会触发,而onload是载入进来时才触发) 2.页面载入后触 ...

  8. 微信小程序生命周期、页面生命周期、组件生命周期

    1. 生命周期 App(全局) 位置:项目根目录app.js文件 App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(optio ...

  9. 微信小程序~生命周期方法详解

    生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js ...

随机推荐

  1. 「雕爷学编程」Arduino动手做(31)——ISD1820语音模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  2. react项目中使用less并修改antd主题样式

    一.react项目中使用less 1. 安装配置 npm i -D less less-loader 2. 查看webpack配置 npm run eject 此操作不可逆,生成新的目录. 3. 修改 ...

  3. java web基础

    WEB基础 C/S:即服务器-客服机(Client-Server)结构.C/S结构通常采用两层结构,服务器负责数据的管理,客户机负责完成与用户的交互任务.客户通过局域网与服务器相连,接受用户的请求,并 ...

  4. 仿开源框架从零到一完整实现高性能、可扩展的RPC框架 | 6个月做成教程免费送

    去年年就在写一本付费小册,今年年初基本上就写完了,本来预计计划是春节上线结果由于平台的原因一直拖着没上.五一前跟平台联系给的反馈是五月份能上,结果平台又在重构,停止小册的申请和上线,最后我考虑了一下决 ...

  5. js操作html的基本方法

    刚学了js操作html的基本方法,在写代码过程中,有很多格式不规范,忘记加双引号尤其重要,通常这 样的错误很容易范,并且这种错误很难找.随着代码学习量越来越多,很多写法容易搞混.今天记录一下,以便后期 ...

  6. 【项目练习】thinkphp用户注册

    使用mvc,ajax 路由 //后台登陆 Route::group('admin', function () { Route::rule('login', 'admin/Index/login'); ...

  7. vue端口号被占用

    今天在启动一个Vue项目的时候,遇到了一个问题. 得知是Vue项目端口号占用的问题.   解决方法: 换一个端口号. 在调用  npm run dev 的时候,实际上是在调用根目录下的 package ...

  8. 【Copy攻城狮日志】docker搭建jenkins拉取svn代码打包vue项目部署到nginx

    ↑开局一张图,故事全靠编↑ 前言 打开搜索引擎输入『Copy攻城狮』,发现最新的一条记录已经是去年的4月,意味着我又有一年时间没有再总结成长了.习惯了“温水煮青蛙”的日子,无论是经验水平还是薪资收入, ...

  9. C#线程 基本同步

    第二部分:  基本同步 同步要点 到目前为止,我们已经描述了如何在线程上启动任务,配置线程以及双向传递数据.我们还描述了局部变量如何专用于线程,以及如何在线程之间共享引用,从而允许它们通过公共字段进行 ...

  10. 小谢第2问:后端返回为数组list时候,怎么实现转为tree

    要求后端返回给我的list时候,在数组中定义有id , parentid, 可以用双重循环的方法,得到tree需要的数据结构,这样得到的数据就可以直接复制给树组件的data啦const oldData ...