微信开发者小程序

微信开发者小程序

一.环境准备

1.注册账号

微信兄程序是谁开发的，有个唯一开发者的账号。建议使用全新的邮箱，没有注册过其他小程序或者公众号的。因为每个邮箱只能申请一个小程序。
注册链接

2.获取APPID

这个APPID相当于开发者唯一的身份验证。后期小程序的发布和上线必须要提供APPID
注册成功以后，在微信公众平台获取APPID。

找到APPID

3.开发工具

查看文档有详细的工具介绍和小程序api

下载出来的就是“微信开发者工具”，这个工具集开发，预览，调试，发布于一身。但由于编码的体验不好，因此建议使用vscode+微信小程序编辑工具来实现编码。也就是说vscode负责编辑代码，微信小程序负责预览。

二.如何新建项目或导入项目

点击开发者小程序工具，出现以下界面：

1.新建项目：

没有上线时的开发阶段，可使用“测试号”。但上线或者支付获取用户信息等高级功能，必须使用APPID。

2.导入

有现成的项目，可直接使用“导入”

三.微信开发者工具介绍

四.小程序框架的结构和每一个文件的作用

微信小程序开发者对内部框架的命名叫MINA，也就是说最开始使用微信开发者工具新建小程序项目的时候，这个目录结构默认用上了原生框架MINA框架的目录结果。一般的技术博客用了MINA这个字眼指的都是小程序的原生框架。
小程序有他子级的标签(WXML)，样式(WXSS)，逻辑文件(JavaScript)，并且在视图层和逻辑层提供了数据传输事件系统，让开发者专注于事件和逻辑。

4.1小程序文件结构和传统web相比

对比可得，传统web是三层结构，而微信小程序是四层结构，多了一层配置.json。

4.2基本的项目目录

五.小程序配置文件

1)全局配置文件app.json_pages字段

在app.json里面的pages表示有哪几个页面。
在pages文件夹下如果要生成新的文件夹，只要在app.json的pages里面添加路径就会自动生成（仅在微信小程序开发工具有该快捷功能）。
pages数组里面的第一个就是编译后的第一个界面。

2)全局配置文件app.json_window

定义小程序所有页面的顶部背景颜色，文字颜色等

3)全局配置文件app.json_tabbar导航栏

4)页面.json单独配置

在单独配置的.json文件小进行头部样式的设置

六.模板语法

vscode里建议要安装“小程序开发助手”，这样，在vscode里面既有相关的标签提示

1.数据绑定

字符串，数字类型和boolean值都可以直接渲染，但object不行，要把里面的对象值取出来才能渲染。

效果：

注意：
1）{{}}可以在标签的属性中使用
2）使用Boolean值充当属性时，字符串和花括号之间不能存在空格，否则会导致识别失败，一下就是错误的示范

2.列表渲染

2.1 wx:for

注意：
1）wx:for="{{数组或者对象}}" wx:for_item=“循环项的名称” wx:for-index=“循环项的索引” **
** wx:key=“唯一的值”，用来提高列表的性能，绑定一个普通字符串的时候，这个字符串的名称 肯定是 循环数组中的 对象的 唯一属性
**wx:key="this"表示你的数组是一个普通的数组，this是个循环项

2）当出现数组的嵌套循环的时候，注意一下绑定的名称不能重名
wx:for="{{数组或者对象}}" wx:for_item="循环项的名称"

3)默认情况下，我们不写 wx:for="{{数组或者对象}}" wx:for_item=“循环项的名称”。
如果只有一层循环的话，wx:for="{{数组或者对象}}" wx:for_item="循环项的名称"可以省略

4）对象循环 wx:for="{{对象}}" wx:for_item=“对象的值” wx:for-index="对象的属性"
循环对象的时候，最好Item和index的名称都修改一下， wx:for_item=“value” wx:for-index="key”

2.2 block占位符标签

这个标签写代码的时候是存在的，但页面渲染的时候会被移除掉

3.条件渲染

1）wx:if="{{true/false}}"
wx:if / wx:elif / wx:else

2)hidden用法
在标签上直接加属性Hidden
hidden="{{true}}"

3）什么场景下用那个？
不是频繁切换 用wx:if
直接把标签从页面结构移除掉

是频繁切换 用wx:hidden
通过添加样式的方式来切换

七.小程序事件绑定

微信小程序事件对象中e.target和e.currentTarget的区别详解
target：触发事件的元素，也就是当前鼠标点击的元素。
currentTarget：事件绑定的元素，代码上面绑定的元素。

1.简单的双向数据绑定

步骤：
①需要给Input标签绑定input事件，绑定关键字bindinput
②通过事件源对象 e.detail.value来获取输入框的值
③输入框的值直接赋值到data中
不能：this.data.num=e.detail.value 或者 this.num=e.detail.value
正确的写法：
this.setData({
num:e.detail.value
})

2.事件传参data-opertaion

注意：
①小程序中的点击事件是bindtap
②无法在小程序的事件中进行传参，需要通过自定义属性data-operation进行参数传递
③然后通过事件源获取自定义属性

做了个小demo：

<input type="text" bindinput="handleinput"/>
<button bindtap="handletap" data-opertaion="{{1}}">+</button>
<button bindtap="handletap" data-opertaion="{{-1}}">-</button>

<view>{{num}}</view>

// pages/demo01/demo01.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      num:0,
	 
  },
  handleinput(e){
      this.setData({
        num:e.detail.value
      })
  },
  handletap(e){
    const opertaion=e.currentTarget.dataset.opertaion;
    this.setData({
      num:this.data.num+opertaion
    })
  },
})

八.样式wss

1.尺寸样式

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

注意：
1）小程序中不需要主动来引入样式文件，只要在一个文件夹包裹就会生效。
2）需要把页面中某些元素的单位 由 px改成 rpx
由于设计稿750px，而750px = 750rpx；所 以 1 px = 1 rpx
如果把屏幕宽度 改成 375px，375px=750rpx；所以1 px = 2 rpx，即 1 rpx = 0.5px
3）如果设计稿page宽度为100px，那以上需求实现不同宽度的适配。
page px = 750 rpx
1 px = 750rpx / page
100 px = 750 rpx * 100/page
计算的需要利用calc属性，这个属性css和wxss都支持，但数字和单位750和rpx中间不要留空格，运算符的两边要留空格。

view{
  width: 200px;
  height: 200px;
  font-size: 40px;
  background: red;
}

2.样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
1）在根目录引入全局css，新建个style文件夹，创建common.wxss

view{
  color: red;
  font-size: 12px;
}

2)在需要的.wxss文件里面引入这个全局css

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

3.选择器

小程序中不支持通配符*

4.小程序中使用less

原生小程序不支持Less，其他基于小程序的框架大体都支持，如webp,mpvue,taro。但我们不能为了使用Less，而引入一个框架，所以可以用下面的方法实现：
1）编辑器是vscode
2)安装插件 easy Less

3)在vscode中的设置中加入如下配置：

"less.compile":{
	"outExt":".wxss"
}

4)在编写样式的地方，新建less文件或者把.wxss文件改为.less文件，如index.less，然后正常编辑即可。
把.wxss文件改为.less文件，保存以后会在这个文件夹内自动生成.css文件

在这个.less文件里面也可以引入其他Less文件，保存后可以自动在wxss文件里面编译

九.常见组件

view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox等

1.view

特点：代替以前的div

2.text

特点：
1）文本标签
2）只能嵌套text，只能嵌套自己
3）小程序中只有这个标签有长安文字可以复制的功能
4）可以对空格，大于号，小于号， 回车等 进行编码

<!--pages/demo01/demo01.wxml-->
<text user-select decode>
  text
  &nbsp;
  123 &lt;
</text>

效果：

3.image

1)t图片统一用外网图片。因为小程序打包上线有大小要求，所以腾讯规定上线的大小不能超过2M，所以据欸的那个很多静态资源放到网上。
2)图片标签，image组件默认宽度320px，高度240px
3)mode决定图片内容如何和图片标签宽高做适配。

wxss:

image{
    border: 1px solid #000;
    width: 100px;
    height: 100px;
  }

<image src="https://www.baidu.com/img/flexible/logo/pc/result.png" mode="aspectFit"/>

4）小程序当中的图片 直接就支持懒加载 lazy-load
lazy-load开启后，会自动判断 当图片出现在视口上下三层的高度之内的时候，自己开始加载图片

4.swiper

4-1轮播图的特点

1.）轮播图的外层容器swiper，swiper高度无法由内容撑开
2.）每一项轮播图 swiper-item
3.）swiper标签 存在默认样式 width:100%;height:150px；
而image图片也存在默认宽高 320*240
4.）先找出来原图的宽度和高度，等比例给swiper定宽度和高度

假设原图的宽度和高度：1125*352px
swiper宽度(100vw / 100% / 375rpx) / swiper高度 = 原图的宽度 / 原图的高度
swiper高度=swiper宽度 * 原图的高度 / 原图的宽度
height = 100vw * 352 / 1125

4-2示例：

<swiper autoplay interval='1000' circular indicator-dots indicator-color='red' indicator-active-color='green'>
  <swiper-item>
  	<image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"/>
  </swiper-item>
  <swiper-item>
  	<image mode="widthFix" src="//img.alicdn.com/imgextra/i2/2206686532409/O1CN01B4edGv1TfMnWwcubz_!!2206686532409-0-lubanimage.jpg"/>
  </swiper-item>
  <swiper-item>
  	<image mode="widthFix" src="//img.alicdn.com/imgextra/i4/2206686532409/O1CN01HtCoDf1TfMnR37wUR_!!2206686532409-0-lubanimage.jpg"/>
  </swiper-item>
</swiper>

通过mode="widthFix"属性，宽度写死，就是100%，高度自适应。

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

4-3 swiper的属性

autoplay 自动切换
interval 切换时间间隔
circular 衔接滑动
indicator-dots 显示面板指示点
indicator-color 指示点颜色
indicator-active-color 选中的指示点颜色

5.navigator

1）块级元素，默认会换行，可以直接设置宽度和高度
2）url要跳转的页面路径，可设置绝对路径和相对路径
3）target 要跳转到当前的小程序还是其他的小程序页面
self 默认值，自己的小程序页面
miniProgram 其他的小程序页面
4）open-type跳转的方式

• navigate 默认值，保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面
• redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
• switchTab 跳转到tabbar页面，并关闭其他所有非tabbar页面
• reLaunch 关闭所有页面，打开到应用内的某个页面
• navigateBack 返回上一级页面，可设置返回上级或者多级
• exit 退出小程序，target="miniProgram"时生效

<navigator url="/pages/demo01/demo01">轮播图页面</navigator>
<navigator url="/pages/index/index">直接跳转到tabbar页面</navigator>
<navigator open-type="redirect" url="/pages/demo01/demo01">redirect轮播图页面</navigator>
<navigator open-type="switchTab" url="/pages/index/index">switchTab直接跳转到tabbar页面</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">reLaunch直接跳转到tabbar页面</navigator>

6.rich-text富文本标签

<rich-text nodes="{{html}}"></rich-text>

效果：

7.button

样式可直接看官网
Button开发能力

7-1 size 的合法值

default和ini

7-1 type 的合法值

primary,default,warn

7-1form-type 的合法值

submit和reset

7-1 open-type:

1） contact 打开客服会话，需要在未学小程序的后台配置，真机调试

<button open-type="contact"  type="primary" >openSetting</button>

实现流程：
①将小程序的appid由测试号改为自己的appid
获取自己的appid

②添加客服
为了方便演示，准备两个账号：普通用户A，客服账号B

③用户A微信扫码

2） share 转发当前的小程序给微信朋友，不能把小程序分享到朋友圈，真机调试

<button open-type="share"  type="primary" >share</button>

3） getPhoneNumber 获取用户手机号，结合一个事件来使用，不是企业的小程序账号没有权限获取用户的手机号

	①绑定一个事件bindgetphonenumber（注意都是小写）
	②在事件的回调函数中，通过参数来获取信息
	③获取到的信息，已经加密过了。需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号，返回小程			序中。就可以看到信息了。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" type="primary" >getPhoneNumber</button>

Page({
  getPhoneNumber(e){
    console.log(e)
  }
})

4） getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 （小程序插件中不能使用）

直接获取，不存在加密字段

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo" type="primary" >getUserInfo</button>

// pages/demo01/demo01.js
Page({
  getUserInfo(e){
    console.log(e)
  }
})

5） launchApp 在小程序中打开APP

需要在app中通过app的某个链接打开小程序，在小程序中再通过这个功能，重新打开小程序。
找到京东app和京东小程序

<button open-type="launchApp"  type="primary" >launchApp</button>

6） openSetting 打开授权设置页

 授权页面中只会出现用户曾经点击过的权限

<button open-type="openSetting"  type="primary" >openSetting</button>

如果清了缓存就没有

7） feedback 打开小程序内置的意见反馈页面，只能够通过真机打开

<button open-type="feedback"  type="primary" >feedback</button>

8.icon

9.radio

需要搭配radio-group一起使用，可以通过color属性修改颜色

<radio-group bindchange="handleChange">
  <radio color="red" value="male">男</radio>
  <radio color="red" value="female">女</radio>
</radio-group>
<view>您选中的是：{{gender}}</view>

// pages/demo01/demo01.js
Page({
  data:{
    gender:""
  },
  handleChange(e){
    //1.获取单选框中的值
    let gender=e.detail.value;
    //2.把值赋值给data中的数据
    this.setData({
      gender
    })
  }
  
})

10.checkbox

需要搭配checkbox-group一起使用

<checkbox-group bindchange="handleChange">
  <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
<view>您选中的是：{{checkList}}</view>

// pages/demo01/demo01.js
Page({
  data:{
    list:[
      {
        id:1,
        name:'苹果',
        value:'apple'
      },{
        id:2,
        name:'香蕉',
        value:'banana'
      },{
        id:3,
        name:'橙子',
        value:'orange'
      }
    ],
    checkList:[]
  },
  handleChange(e){
    //1.获取单选框中的值
    let checkList=e.detail.value;
    //2.把值赋值给data中的数据
    this.setData({
      checkList
    })
  }
  
})

十.自定义组件

类似页面，一个自定义组件有json,wxml,wxss,js 4个文件组成。
可以在微信开发者工具中快速创建组件的文件结构

1.如何使用自定义组件

第一步：新增组件

根目录创建components，内部再内部创建一个Tabs，然后再Tabs文件夹里面右键，选择“新建components”，回车，就自动创建成功。

第二步：在dem01.json里面声明组件

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

第三步：在demo01.xml里面引入组件

<Tabs></Tabs>

这样，页面就能直接展示组件的数据：

2.标题激活选中

效果：

tabs.wxml:

<!--components/Tabs/Tabs.wxml-->
<view class="tabs">
  <view class="tabs_title">
    <view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?'active':''}}"
    bindtap="handleItemTap" data-index="{{index}}">{{item.name}}</view>
  </view>
  <view class="tabs_content">内容</view>
</view>

tabs.wxss:

/* components/Tabs/Tabs.wxss */
.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;
}
.tabs_content{}

tabs.js:

注意：
1.页面.js文件中 存放事件回调函数的时候，存放在data同层级下！！！
2.组件.js文件中 存放事件回调函数的时候，必须要存放在methosd中！！！

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
    ]
  },
  /*
  1.页面.js文件中 存放事件回调函数的时候，存放在data同层级下！！！
  2.组件.js文件中 存放事件回调函数的时候，必须要存放在methosd中！！！
  */
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
     //1.获取索引
     const {index}=e.currentTarget.dataset;
     //2.获取data中的数组
     let {tabs}=this.data;
     //上面的写法相当于：let tabs=this.data.tabs
     //3.循环数组，并且给当前索引的项 添加激活效果
     tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
     this.setData({
      tabs
     })
    }
  }
})

3.父向子传值和子向父传值

1）父向子传值

父组件通过属性的方式给子组件传值

这边把tabs放在父级，传给子级

效果：

demo01.js：

// pages/demo01/demo01.js
Page({
  data:{
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
    ],
  }
  
})

demo01.wxml：

<Tabs tabs="{{tabs}}"></Tabs>

tabs.js：

子级组件properties接受参数

// components/Tabs/Tabs.js
Component({
  properties:{
    tabs:{
      type:Array,
      value:[]
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    
  },
  /*
  1.页面.js文件中 存放事件回调函数的时候，存放在data同层级下！！！
  2.组件.js文件中 存放事件回调函数的时候，必须要存放在methosd中！！！
  */
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
     //1.获取索引
     const {index}=e.currentTarget.dataset;
     //2.获取data中的数组
     let {tabs}=this.data;
     //上面的写法相当于：let tabs=this.data.tabs
     //3.循环数组，并且给当前索引的项 添加激活效果
     tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
     this.setData({
      tabs
     })
    }
  }
})

2）子向父传值

子组件通过事件的方式给父组件传递参数
像上面父传子的情况，存在的问题就是子级的数据发生了改变，但父级还是原数组的样子，没有改变。如下。所以我们需要进行子传值给父级。

tabs.js：

this.triggerEvent(“父组件自定义事件的名称”,要传递的参数)

// components/Tabs/Tabs.js
Component({
  properties:{
    tabs:{
      type:Array,
      value:[]
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    
  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
     //1.获取索引
     const {index}=e.currentTarget.dataset;

     //2.触发父组件的自定义事件，同时传递数据给父组件
     //this.triggerEvent("父组件自定义事件的名称",要传递的参数)
     this.triggerEvent("itemChange",{index})
    }
  }
})

demo01.wxml：

通过bind+子级触发的自定义事件名称 来触发父级的自定义事件

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>

demo.js

// pages/demo01/demo01.js
Page({
  data:{
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
    ],
  },
  //自定义事件 用来接收子组件传递的数据结构
  handleItemChange(e){
    const {index}=e.detail;
    let {tabs}=this.data;
    tabs.forEach((v,i)=>i === index?v.isActive=true:v.isActive=false)
    this.setData({
      tabs
    })
  }
  
})

3）父组件插槽slot传值

slot标签其实就是一个占位符（插槽），等到父组件调用子组件的时候，再传递标签过来 最终 ，
这些被传递的标签就会得到替换slot插槽的位置

tabs.wxml：

<!--components/Tabs/Tabs.wxml-->
<view class="tabs">
  <view class="tabs_title">
    <view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?'active':''}}"
    bindtap="handleItemTap" data-index="{{index}}">{{item.name}}</view>
  </view>
  <view class="tabs_content">
    <slot></slot>  
  </view>
</view>

demo01.wxml：

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
  <block wx:if="{{tabs[0].isActive}}">0</block>
  <block wx:elif="{{tabs[1].isActive}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>
  <block wx:else>3</block>
</Tabs>

4.组件的其他属性

properties 组件对外接受的数据
data 组件内部的数据
observers 监听 properties 和 data 的变化（只存在于组件当中，页面当中是不存在的）
methods 事件中的回调函数
组件的生命周期：
created 在组件实例刚刚被创建时执行，注意此时不能调用 setData
attached 在组件实例进入页面节点树时执行
ready 在组件布局完成后执行
moved 在组件实例被移动到节点树另一个位置时执行
detached 在组件实例被从页面节点树移除时执行

十一.小程序的生命周期

分为应用生命周期和页面生命周期

1.应用生命周期

只有一个文件，就是app.js

1）onLaunch 引用第一次启动的就会触发的事件

使用场景：第一次启动的时候，获取用户的个人信息

2）onShow 应用被用户看到

使用场景：切换时 每次进入应用都会触发这个生命周期。一般用于对应用数据或者页面效果的重置。

3）onHide 应用被隐蔽了

使用场景：离开就马上触发这个生命周期。一般用于暂停或者清除定时器。

4）onError 应用的代码发生了报错的时候，就会触发

使用场景：在应用发生代码错误的时候，手机用户的错误信息，通过异步请求，将错误的信息发送给后台。

5）onPageNotFound 应用第一次启动的时候，如果找不到第一个入口，才触发

解决方案：如果页面不存在了，通过js的方式来重新跳转页面，重新跳到第二个首页。

onPageNotFound(){
    //这个跳转方法不能跳转到tabbar页面
    wx.navigateTo({
      url: '/pages/demo01/demo01',
    })
    console.log("onPageNotFound")
  }

还原触发该生命周期的场景：

普通编译 ——>添加编译模式——>修改“模式名称”和“启动页面”，启动页面是不存在的路径


虽然控制台有报错，单页面没有报错，依旧能够正常显示页面。

2.页面生命周期

// pages/demo02/demo02.js
Page({
  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onUnload")
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {}
})

1）data 页面的初始数据

2）onLoad 类似于应用生命周期的onLaunch。

使用场景：发送异步请求来初始化页面数据

3）onShow 页面显示

4）onHide页面隐藏

使用场景：包括应用的隐藏和页面的隐藏

5）onReady 页面初次渲染完成

6）onUnload 页面卸载

下面带“关闭”字眼的的都是卸载页面

<text>pages/demo02/demo02.wxml</text>

<navigator url="/pages/demo01/demo01" open-type="redirect">
  demo01
</navigator>

onUnload: function () {
    console.log("onUnload")
  },

7）onPullDownRefresh 监听用户的下拉操作

使用场景：对页面的数据或者效果进行下拉刷新

8）onReachBottom 页面上拉触底事件，触底自动触发

需要页面存在上下滚动才行，高度不够是不会触发的。

9）onShareAppMessage 用户点击右上角转发

10）onPageScroll 只要页面滚动就会触发

11)onResize 页面尺寸发生变化的时候就会触发

**使用场景：**小程序发生横屏或者竖屏切换的时候就会触发
**开发调试：**全局搜索onResize，可以搜索api.
在允许屏幕旋转的情况下，可分为横屏与竖屏
手机端设置 “pageOrientation”: “auto” 或 iPad 上设置 “resizable”: true 时会允许屏幕旋转，此时使用 Page 的 onResize 事件或者 wx.onWindowResize 方法可对该操作进行监听，进而判断是使用横屏还是竖屏布局
可以全局设置，也可以在需要的页面设置。如下是在demo02.json文件里面设置

{
  "pageOrientation": "auto" 
}

就会多个这个图标，点击即可横屏和竖屏转换

12）onTabItemTap 当前是tab页时，点击tab时触发

满足两条件：
必须是tabbar页面；必须点击的是自己。点击其他的不会触发。

生成二维码

地址：https://mp.weixin.qq.com
设置->基本设置->小程序码