微信小程序学习（2）

微信小程序学习（2）

2.2：小程序–事件

回顾：事件
-事件二类：
（1）用户操作
点击click
keyDown keyUp
（2）系统触发 window.onload
-事件对象：

当事件触发时浏览器产生一个对象：事件对象

事件对象：哪个圆度；位置；鼠标左；…
-事件冒泡：

当元素触发某个事件，此事件向父元素，父元素

传递 docuemnt

事件分类（pc端/移动端）
（1）Pc端 键盘和鼠标 click，mousemove，keydown
（2）移动端 手指

-touchstart 当手指触碰屏幕时

-touchmove 当手指在屏幕滑动

-touchend 当手指离开屏幕

-touchcancel 当手指操作被打断时

 -tap          当手指触碰屏幕后立即离开（类似于click）

-longtap 当手指长摁超过350ms 后触发事件（旧）

-longpress 当手指长摁超过350ms 后触发事件（新）
（3）事件绑定方式

-支持事件冒泡

-不支持事件冒泡

2.3:小程序–组件生命周期

组件：（wxml+wxss+js+json:一个组件）

组件生命周期：从创建组件开始到使用最后销毁过程

小程序组件在不同生命周期内触发不同事件

-onLoad
当组件创建成功后立即触发此事件

-onReady
页面初始渲染完成：组件内容绑定模板上

-onHide
组件显示（多次）

-onShow
组件隐藏（多次）

-onUnload
组件在销毁之前调用此事件

大家创建组件有两种方法：
1.右击pages,新建文件夹，再右击你新建好的文件夹，新建page,这样就创建好一个新的组件。
注意：新创建的组件可能运行报错，找不到pages/…/…，这是你打开app.json中“pages:"中看看你新建的文件夹有没有写入，自行添加
2.直接再app.json中写入你新建组件，如： “pages/home/home”,这样刷新下在pages的菜单下就可以看见你写好的组件。

小程序-组件之间跳转

wx.redirectTo({

      url: '/pages/exam04/exam04',

    })

销毁

详解：先看https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.redirectTo.html
微信官方文档对几种跳转都有详细的介绍。

跳转：

1：当组件对象从内存中销毁

2：显示新组件

#如果组件定义底部导航条则跳转失败

保留跳转:

1. 当组件对象保存在内存中
   

2. 显示新组件
   

#如果组件定义底部导航条则跳转失败

小程序配置文件-json

App.json: 全局配置文件

Exam04.json 当前组件配置文件

注意：配置文件要求较高–不能加任何注释

导航栏学习
Tabbar组件，也可以用来作为小程序的自定义Tabbar使用

“navigationBarTextStyle”: “black”

该属性只有黑色和白色

 "tabBar": {

"color":"#00f",    默认文字颜色

   
"selectedColor": "#f00",   选中文字颜色

   
"list": [     #list表示按钮列表（最少2个，最多5个）

    {

     
"pagePath": "pages/exam02/exam02",     当用户点击按钮时显示的那个组件

     
"text": "美食",        按钮文字

     
"iconPath": "images/1.png",     按钮默认状态图片

     
"selectedIconPath": "images/2.png"   按钮选中状态图片路径

    }

  ]
  [
  ....
  ]

  }