黑马程序员-小程序

黑马程序员-小程序

前言

【WEB前端】零基础玩转微信小程序的网课笔记

---

一、快捷键

1.alt + shift：多行同时打字

2.ctrl + D :匹配相同的文本

3.shift + end : 选中光标所在位置后的所有文本

4.shift + alt + “↓”/“↑” : 向下/上复制

二、模块语法

1.数据绑定

<!--
  1.text相当于以前web中的span标签 行内元素 不会换行
  2.view相当于web的div标签 块级元素 会换行
  3.checkbox 以前的复选框标签
-->
<!--1.字符串-->
<view> {{msg}}</view>
<!--2.数字类型-->
<view> {{num}}</view>
<!--3.bool类型-->
<view> 是否是伪娘：{{isGirl}}</view>
<!--4.object类型-->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

<!--5.在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>
<!--6.使用bool类型充当属性 checked
  1.字符串和花括号之间一定不要存在空格，否则会导致识别失败
  以下写法是错误的示范：
    <checkbox checked="      {{isChecked}}"> </checkbox>
-->
<view>
  <checkbox checked="{{isChecked}}"> </checkbox>
</view>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg:"hello mina",
    num:10000,
    isGirl:false,
    person:{
      age:74,
      height:145,
      weight:200,
      name:"富婆"
    },
    isChecked:false,
  }
})

2.运算

<!--7.运算 => 表达式
  1.可以在花括号中加入表达式--“语句”
  2.表达式
    一般指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算...
    1.数字的加减
    2.字符串的拼接
    3.三元表达式
  3.语句
    1.复杂的代码段
      1.if else
      2.switch
      3.do while
      4.for
-->
<view> {{1+1}}</view>
<view> {{'1'+'1'}}</view>
<view> {{10 % 2 == 0 ? "偶数" : '奇数'}}</view>

3.列表渲染

3.1 wx:for

<!--
  8.列表循环
    1.wx:for="{{数组/对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"
    2.wx:key="唯一的值"用来提高列表渲染的性能
      1.wx:key 绑定一个普通的字符串的时候 那么这个字符串的 名称 肯定是 循环数组 中的 对象的 唯一属性
      2.wx:key ="*this" 就表示你的数组是一个普通的数组 *this 表示是 循环项
        [1,2,3,44,5] ["1","222","asfds"]
    3.当出现数组的嵌套循环的时候 尤其要注意 以下绑定的名称不要重名
      wx:for-item="item" wx-for-index="index"
    4.默认情况下 我们不写
      wx:for-item="item" wx-for-index="index"
      小程序也会把循环项的名称 和 索引的名称 item 和 index
      只有一层循环的话(wx:for-item="item" wx:for-index="index") 可以省略

  9.对象循环
    1.wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
    2.循环对象的时候 最好把 item 和 index 的名称都修改一下
      wx:for-item="value" wx:for-index="key"
-->
<view>
  <view wx:for="{{list}}" 
        wx:for-item="item" 
        wx:for-index="index"
        wx:key="id">
    索引:{{index}}
    --
    值:{{item.name}}
  </view>
</view>
<view>
  <view>对象循环</view>
  <view wx:for="{{person}}"
        wx:for-item="value" 
        wx:for-index="key">
    属性：{{key}}
    属性值:{{value}}
  </view>
</view>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    person:{
      age:74,
      height:145,
      weight:200,
      name:"富婆"
    },
    list:[
      {
        id:0,
        name:"猪八戒"
      },
      {
        id:1,
        name:"天蓬元帅"
      },
      {
        id:2,
        name:"悟能"
      }
    ]
  }
})

3.2 Block

<!--
  10 block
    1.占位符一样的标签
    2.写代码的时候 可以看到这标签存在的
    3.页面渲染时 小程序会将它移除掉
-->
<view>
  <block wx:for="{{list}}" 
        wx:for-item="item" 
        wx:for-index="index"
        wx:key="id"
        class="my_list">
    索引:{{index}}
    --
    值:{{item.name}}
</block>
</view>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:0,
        name:"猪八戒"
      },
      {
        id:1,
        name:"天蓬元帅"
      },
      {
        id:2,
        name:"悟能"
      }
    ]
  }
})

4.条件渲染

4.1 wx:if

4.2 Hidden

<!--
  11.条件渲染
    1.wx:if="{{true/false}}"
      1.if,else,if else
        wx:if
        wx:elif
        wx:else
      2.hidden
        1.在标签上直接加入属性 hidden
        2.hidden="true"
      3.什么场景下用哪个
        1.当标签不是频繁地切换显示 优先使用 wx:if
          直接把标签从页面结构给移除掉
        2.当标签频繁地切换使用时 优先使用hidden
          通过添加样式的方式来切换显示
          hidden属性不要和样式display一起使用
  -->
  <view>
  <view>条件渲染</view>
  <view wx:if="{{true}}">显示</view>
  <view wx:if="{{false}}">隐藏</view>
  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{false}}">2</view>
  <view wx:else>3</view>
  <view>----------------------------</view>
  <view hidden="true">hidden</view>
  <view>--------000----------</view>
  <view wx:if="{{false}}">wx:if</view>
  <view hidden style="display : flex;">hidden</view>
  </view>

三、小程序事件的绑定

1.事件绑定

<!--
  1.需要给input标签绑定 input事件
    绑定的关键字 bindinput
  2.如何获取 输入框的值
    通过事件源对象来获取
    e.detail.value
  3.把输入框的值 赋值到 data中
    不能直接
      1.this.data.num = e.detail.value
      2.this.num = e.detail.value
    争取的写法：
      this.setData({
        num:e.detail.value
      })
-->
<input type="text" bindinput="handleInput"/>
<view>
  {{num}}
</view>

// pages/demo04/demo04.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
  //输入框的input事件的执行逻辑
  handleInput(e){
   // console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  }
})

2.加减法

<!--
  1.需要给input标签绑定 input事件
    绑定的关键字 bindinput
  2.如何获取 输入框的值
    通过事件源对象来获取
    e.detail.value
  3.把输入框的值 赋值到 data中
    不能直接
      1.this.data.num = e.detail.value
      2.this.num = e.detail.value
    争取的写法：
      this.setData({
        num:e.detail.value
      })
  4.需要加入一个点击事件
      1.bindtap
      2.无法在小程序当中的 事情中 直接传参
      3.需要通过自定义属性的方式来传递参数
      4.事件源中获取自定义属性
-->
<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
  {{num}}
</view>

// pages/demo04/demo04.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0
  },
  //输入框的input事件的执行逻辑
  handleInput(e){
   // console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  },
  //加减按钮的事情
  handletap(e){
    //console.log(e);
    //1.获取自定义属性 operation
    //
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num:this.data.num+operation
    })
  }
})

四、样式wxss

1.尺寸单位

/*1.小程序中不需要主动引入样式文件

  2.需要把页面中的某些元素的单位，由px改成rpx

	1.设计稿是750px

​      750px=750rpx

​      1 px = 1 rpx

​    2.把屏幕换成375px

​      375px=750rpx

​      1 px = 0.5 rpx

​    3.存在一个设计稿 宽度414 或者未知page

​      1.设计稿 page 存在一个元素 宽度100px

​      2.拿以上的需求，去实现不同宽度的页面适配

​      page px = 750 rpx

​      px = 750 rpx / page

​      100px = 750 rpx * 100 / page

​    4.利用一个属性 calc属性 css 和 wxss 都支持 一个属性

​      1.750和rpx中间不要留空格

​      2.运算符的两边也不要留空格

*/

 

view{

  width: 200prx;

  height: 200rpx;

  background-color: aqua;

  /*一下代码写法错误*/

  /*width: 750 rpx * 100 / 375;*/

  width: calc(750rpx * 100 / 375);

}

<view>
  rpx
</view>

2.样式导入

新建文件：

view{
  color: aqua;
  font-size: 100px;
}

引入文件

/*
  1.引入的代码是通过 @import 来引入的
  2.路径 只能写相对路径
  */
  @import "../../styles/common.wxss";

<view>pages/demo06/demo06.wxml</view>

五、常见组件

1.view

代替html 的 div

2.text

\1. ⽂本标签
\2. 只能嵌套text
\3. ⻓按⽂字可以复制（只有该标签有这个功能）
\4. 可以对空格 回⻋ 进⾏编码

对字符进行编码

<!--
  1.长按文字复制 selectable
  2.对文本内容 进行解码
-->
<text selectable='{{true}}' decode="true">
  text
  &nbsp;123 &lt;
</text>

3.image

<!--
  1.image图片标签
    1.src 指定要加载的图片的路径
      图片存在默认的宽度和高度 320*240  原图大小是200*100
    2.mode 决定 图片内容 如何 和 图片标签 宽高 做适配
      1.scaleToFill 默认值 不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满 image 元素
      2.aspectFit 保持宽高比 确保图片的长边显示出来 页面轮播图 常用的
      3.aspectFill 保持纵横⽐缩放图⽚，只保证图⽚的 短边 能完全显⽰出来。 少用
      4.widthFix 相当于以前web图片的 宽度指定之后 高度 会自己按比例来调整 常用
      5.top 不缩放图⽚，只显⽰图⽚的顶部区域 类似于以前的背景图片位置
    3.小程序当中的图片 直接支持 懒加载
      1.lazy-load 会自己判断 当 图片 出现在 视口 上下三屏的高度之内 小程序会自己开始加载图片
-->
<image mode = "bottom" lazy-load src="../img/23.png">
</image>

image{
  box-sizing: border-box;
  border:1px solid red;
  width: 300px;
  height: 200px;
}

4.swiper

微信内置轮播图组件

4.1 swiper

4.2 swiper-item

<!--
  1.轮播图的外层容器 swiper
  2.每一个轮播项 swiper-item
  3.swiper标签 存在默认样式
    1.width 100%
    2.height 150px image存在默认宽度和高度 320*240
    3.swiper 高度 无法实现由内容撑开
  4.先找出原图的宽度和高度 再等比例地给swiper定宽度和高度
    原图：1920*1080
    swiper 宽度/swiper 高度 = 原图的宽度/原图的高度
    swiper 高度 = swiper 宽度 * 原图的宽度/原图的高度
    height：100vw * 1080 / 1920
  5.autoplay 自动轮播 一般是5s
  6.interval 修改轮播时间
  7.circular 衔接轮播
  8.indicator-dots 显示指示器 分页器
  9.indicator-color 未选中颜色 
    indicator-active-color 当前选中的指⽰点颜⾊
-->
<swiper autoplay interval="2000" circular indicator-dots indicator-color="#FFFFFF" 
indicator-active-color="#FF0000">
  <swiper-item><image mode="widthFix" src="../img/23.png"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="../img/23.png"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="../img/23.png"></image></swiper-item>
</swiper>

swiper{
  width: 100%;
  height: calc(100vw * 1080 / 1920);
}
image{
  width: 100%;
}

5.navigator

导航组件 类似超链接标签
open-type 有效值：

<!--
  导航组件 navigator
  0.块级元素 默认会换行 可以直接加入宽度和高度
  1.url 要跳转的页面路径 绝对路径 相对路径
  2.target 要跳转到当前的小程序 还是 其他小程序页面 self/miniProgram
    self 默认值 自己的小程序页面
    miniProgram 其他的小程序页面
  3.open-type 跳转的方式
    1.navigate 默认值 | 保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到tabbar ⻚⾯
    2.redirect 关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar ⻚⾯。
    3.switchTab 跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯
    4.reLaunch 关闭所有⻚⾯，打开到应⽤内的某个⻚⾯
-->
<navigator url="/pages/demo10/demo10">轮播图页面</navigator>
<navigator url="/pages/index/index">直接跳转到tabBar页面</navigator>
<navigator open-type="redirect" url="/pages/demo10/demo10">轮播图页面 redirect</navigator>
<navigator open-type="switchTab" url="/pages/index/index">switchTab 跳转到 tabBar ⻚⾯</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">reLaunch 可以随便跳</navigator>

6.rich-text

富文本标签 | 可以将字符串解析成 对应标签，类似 vue中 v-html 功能

<!--
  rich-text 富文本标签
  1.nodes属性来实现
    1.接收标签字符串
    2.接收对象数组
-->
<rich-text nodes="{{html}}"></rich-text>

// pages/demo12/demo12.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //1.标签字符串 最常用的
    //    html:'<div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://www.tmall.com/wow/z/heybox/heyboxrax/heybox?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.1&amp;scm=1007.home_icon.tmallxp.d&amp;wh_biz=tm&amp;disableNav=YES"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">天猫新品</p></a><a class="sc-EHOje hrPgER" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.6&amp;scm=1007.home_icon.chongzzx.d&amp;_wml_code=Vfw8V4IdfflvFcsPv2fKDCLgFlhCoOQ406ZO9WKS70zNVh2FhuClrYZQHV%2BUj8rweMrPJgOrvqON3zeUHJMIALqc03AQZnf3hmtKmJM2g5PuR9UuzwivVDM%2Bil4nBDGBPXlfSqZZA3CdATGQpVOeZMO8SbyJvaZdoC89%2B2Gg8FZsD4wqDUKs7VcgTjZxbgdE&amp;subSource=stcz_1"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1llI3f4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">充值中心</p></a></div>'
    //2.对象数组
    html:[
      {
        //1.div标签 name属性来指定
        name:"div",
        //2.标签上有哪些属性
        attrs:{
          //标签上的属性 class style
          class:"my_div",
          style:"color:red"
        },
        //3.子节点 children 要接收的数据类型 和nodes第二种渲染方式的数据类型一致
        children:[
          {
            name:"p",
            attrs:{},
            //放文本
            children:[{
              type:"text",
              text:"hell"
            }]
          }
        ]
      }
    ]
  },

})

7.button

<!--
  外观的属性
    1.size 控制按钮大小
      default 默认大小
      mini 小尺寸
    2.type 用来控制按钮的颜色
      default 灰色
      primary 绿色
      warn 红色
    3.plain 按钮是否镂空，背景⾊透明
    4.loading 名称前是否带 loading 图标 是否等待
-->
<button>默认按钮</button>
<button size="mini"> mini默认按钮</button>
<button type="primary"> primary默认按钮</button>
<button type="warn"> warn默认按钮</button>
<button type="warn" plain> warn默认按钮</button>
<button type="primary" loading> primary默认按钮</button>
<!--
  button按钮的开放能力 open-type
    1.contact 直接打开 客服对话功能 要在微信小程序后台设置
    2.share 转发当前小程序 到微信朋友中 不能把小程序分享到朋友圈
    3.getPhoneNumber 获取当前⽤⼾⼿机号 结合一个事件来使用 不是企业的小程序账号 没有权限来获取用户的手机号码的
      1.绑定一个事件 bindgetphonenumber
      2.在事件的回调函数中 通过参数来获取信息
      3.获取到的信息 已经加密过了
        需要用户自己搭建一个小程序的服务器 在后台服务器中进行解析 手机号码 返回到小程序中 可以看到信息了
    4.getUserInfo 获取当前⽤⼾的个人信息 
      1.使用方法 类似 获取用户的手机号码
      2.可以直接获取 不存在加密的字段
    5.launchApp 在小程序中 直接打开app 
      1.需要先在app中 通过app 的某个链接 打开小程序
      2.在小程序中 再通过这个功能 重新打开app
    6.openSetting 打开小程序中内置的 授权页面 
      1.授权页面中 只会出现用户曾经点击过的权限
    7.feedback 打开小程序中内置的 意⻅反馈 ⻚⾯
      1.只能通过真机调试来打开
-->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

// pages/demo13/demo13.js
Page({
  //获取用户的手机号码信息
  getPhoneNumber(e){
    console.log(e);
  },
  //获取用户个人信息
  getUserInfo(e){
    console.log(e);
  }
})

8.icon

<!--
  小程序中的字体图标
  1.type 图标的类型
    success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  2.size 大小
  3.color 图标的颜色
-->
<icon type="cancel" size="60" color="#0094ff"></icon>

9.radio

单选框标签
可以通过 color属性来修改颜色
需要搭配 radio-group ⼀起使⽤

<!--
  radio 单选框
    1.radio标签 必须要和 父元素 radio-group来使用
    2.value 选中的单选框的值
    3.需要给 radio-group 绑定 change 事件
    4.需要在页面中显示选中的值
-->
<radio-group bindchange="handleChange">
  <radio color="red" value="male">男</radio>
  <radio value="female">女</radio>
</radio-group>

<view>您选中的是：{{gender}}</view>

// pages/demo15/demo15.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender:""
  },
  handleChange(e){
    //1.获取单选框中的值
    let gender = e.detail.value;
    //2.把值赋值给data中的数据
    this.setData({
      gender
      //gender:gender
    })
  }
})

10.checkbox

复选框标签

可以通过 color属性来修改颜色

需要搭配 checkbox-group ⼀起使⽤

<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>
  </checkbox-group>
  <view>
    选中的水果:{{checkedList}}
  </view>
</view>

// pages/demo16/demo16.js
Page({
  data: {
    list:[
      {
      id:0,
      name:"苹果",
      value:"apple"
    },
    {
      id:1,
      name:"葡萄",
      value:"grape"
    },
    {
      id:2,
      name:"香蕉",
      value:"banana"
    }
  ],
  checkedList:[
  ]
  },
  //复选框的选中事件
  handleItemChange(e){
    //1.获取被选中的复选框的值
    const checkedList = e.detail.value;
    //2.进行赋值
    this.setData({
      checkedList
    })
  }, 
})

六、自定义组件

1.创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

1.1. 声明组件

⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

Pages17:
<Tabs></Tabs>

1.2. 编辑组件

.tabs{}
.tabs_title{
  display: flex;
  padding: 10rpx 0;
}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color:red;
  border-bottom: 5rpx solid currentColor;
}
.title_content{}

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="title_item active">首页</view>
    <view class="title_item">原创</view>
    <view class="title_item">分类</view>
    <view class="title_item">关于</view>-->
    <view wx:for="{{tabs}}"
      wx:key="id"
      class="title_item {{item.isActive ? 'active' : ''}}"
      >
      {{item.name}}
    </view>
  </view>
  <view class="tabs_content"></view>
</view>

2.父向子传递数据 //没听懂

3.子向父传递数据 //没听懂

4.slot

Tabs.wxml
<view class="tabs_content">
    <!--
      slot 标签 其实就是一个占位符 插槽
      等到 父组件 调用 子组件时 再传递 标签过来 最终这些被传递的标签
      会就替换slot的位置
    -->
    <slot></slot>
  </view>

Pages14.wxml
<Tabs tabs="{{tabs}}" >
  <view>父组件传递过来的</view>
  <block wx:if="{{tab[0].isActive}}">0</block>
  <block wx:elif="{{tab[1].isActive}}">1</block>
</Tabs>

5.其他属性

七、小程序声明周期

1.应用生命周期

//app.js
App({
 //1.应用第一次启动就会触发的事件
 onLaunch(){
   //在应用第一次启动的时候 获取用户的个人信息
   console.log("onLaunch");
 },
 //2.应用被用户看到的时候触发的
 onShow(){
  console.log("onShow");
 },
 //3.应用 被隐藏了
 onHide(){
   console.log("Hide");
 },
 //4.应用的代码发生了报错的时候 就会触发
 onError(err){
   //在应用发生代码报错时，收集用户的错误信息 通过异步请求 将报错的信息发送到后台去
   console.log("onError");
   console.log(err);
 },
 //5.onPageNotFoundm 页面找不到就会触发
 //应用第一次启动的时候，如果找不到第一个入口页面 才会触发
 onPageNotFound(){
   console.log("onPageNotFound");
 }
})

2.页面生命周期

// pages/demo18/demo18.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //console.log("onLoad")
    //一般是在onLoad中发送一些异步请求来初始化页面数据 
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onShow");
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onHide");
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onUnload");
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("onPullDownRefresh");
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("onReachBottom");
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("onShareAppMessage");
  },
  //onPageScroll function ⻚⾯滚动触发事件的处理函数
  onPageScroll:function(){
    console.log("onPageScroll");
  },
  //onResize function ⻚⾯尺⼨改变时触发，详⻅ 响应显⽰区域变化
  //当小程序发生了 横屏 竖屏 切换的时候触发
  onResize:function(){
    console.log("onResize");
  },
  /*onTabItemTap 
    1.必须要求当前页面 也是tabbar页面
    2.点击自己的tab item的时候才触发
  */
  onTabItemTap:function(){
    console.log("onTabItemTap");
  }
})

3.页面生命周期图解

八、实用小技巧

1.旋转屏幕

在手机上启用屏幕旋转支持

从小程序基础库版本 2.4.0 开始，小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是：在 app.json 的 window 段中设置 "pageOrientation": "auto" ，或在页面 json 文件中配置 "pageOrientation": "auto" 。

以下是在单个页面 json 文件中启用屏幕旋转的示例。

{
  "pageOrientation": "auto"
}

如果页面添加了上述声明，则在屏幕旋转时，这个页面将随之旋转，显示区域尺寸也会随着屏幕旋转而变化。

  onPullDownRefresh: function () {
    console.log("onPullDownRefresh");
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("onReachBottom");
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("onShareAppMessage");
  },
  //onPageScroll function ⻚⾯滚动触发事件的处理函数
  onPageScroll:function(){
    console.log("onPageScroll");
  },
  //onResize function ⻚⾯尺⼨改变时触发，详⻅ 响应显⽰区域变化
  //当小程序发生了 横屏 竖屏 切换的时候触发
  onResize:function(){
    console.log("onResize");
  },
  /*onTabItemTap 
    1.必须要求当前页面 也是tabbar页面
    2.点击自己的tab item的时候才触发
  */
  onTabItemTap:function(){
    console.log("onTabItemTap");
  }
})