生命周期

全局生命周期

• onLaunch 用户首次打开，页面初始化渲染完成时，会触发，全局触发一次
• onShow 小程序启动，从后台进入前台时触发
• onHide 小程序隐藏或者从前台进入后台触发
• onError 小程序脚本发生错误或者API调用发生错误时触发

页面生命周期

• onLoad 监听页面加载 此时可以发送网络请求获取数据 onShow 页面显示 此时可以请求数据
• onReady 页面初次渲染完成，渲染页面元素和样式，此时可以获取页面元素的信息
• onHide 页面隐藏 小程序跳转到其他页面或者进入后台运行时触发，此时可以终止任务
• onUnload 页面卸载 调用wx.redirected或wx.navigateBack触发 此时可以终止任务
• onResize 页面窗口大小调整时触发

自定义组件的生命周期

• created 组件实例被创建
• attached 组件实例初始化完成，进入页面节点数，组件绝大多数的初始化操作都在此生命周期进行
• ready 组件初次渲染完成
• moved 组件被移动到新的节点位置时触发
• detached 组件被从页面节点数移除，退出页面时
• error 每当组件方法抛出错误时执行

自定义组件还有一些特殊的生命周期

• lifeTimes 用于替代原有的生命周期方法
• pagelifeTimes 用于监听组件所在页面的生命周期，可以定义show(页面显示),hide(页面隐藏),resize(页面尺寸变化)

主要文件目录详解

wxml 模版文件

• wxss 模版文件样式
• js 逻辑文件，网络请求
• json 页面配置文件，页面标题相关，引入组建等
• app.js 全局逻辑，可监听全局的生命周期
• app.json 全局配置文件入口，包括pages页面路径，tabBar设置（最多五个，最少两个），window页面配置顶部的背景颜色，文字颜色
• app.wxss 全局页面样式

常用内置API

• wx.showToast 提示
• wx.showModal 提示框
• wx.showLoading 加载进度条
• wx.setNavigationBarTitle 设置标题栏文字
• wx.setNavigationBarColor 设置标题栏颜色
• wx.request 网络请求

页面传值的方式

1. 使用全局变量传递数据

• 提示：利用 app.js 中的 globalData 将数据存储为全局变量，在需要使用的页面通过 getApp().globalData 获取

App({
  globalData: {
    userName: '全局变量传值',
  }
})
 
// 步骤二：获取应用实例，不然无法调用全局变量
const app = getApp()
 
// 步骤三：调用全局变量
Page({
  data: {
  
  },
  onLoad: function (options) {
    console.log(app.globalData.userName);
  },
})

2.使用本地存储传递数据

• 提示：利用微信小程序提供的本地存储 wx.setStorageSync 与 wx.getStorageSync 进行传值。
• 设值：wx.setStorageSync('title', title)
• 取值：var title=wx.getStorageSync('title')

3.使用路由传递数据

传值
const data = JSON.stringify(this.data);
wx.redirectTo({
   url: `跳转url?data=`+data='&name=hahha'
})
取值
onLoad(options){
    const data = JSON.parse(JSON.stringify(options.data));
    const name = options.name
}

总结：解决小程序跳转URL数据过长报错的问题 encodeURIComponent(obj) 跳转url时的转换方法 decodeURIComponent(options.obj) 页面接收参数页面的转换方法

4.父子组件传值

• 父向子传值使用的是属性绑定，子组件中 的 properties 对象 进行接收父组件传递过来的值
• 子向父传值使用的是自定义事件，父组件通过自定义事件中的 事件对象e 来接收子组件传递过来的值

父向子传值
父组件
<child name="{{ name }}" age="{{ age }}" ></child>
export default{
    data(){
        return{
            name:"老五",
            age:0
        }
    }
}
子组件
<view>
  这是父组件传递过来的值 name: {{ name }}-----age {{age}}
</view>
// 接受父组件传递过来的值
  properties: {
    name:{
      type:String,
      value:'我是默认值：哈哈'
    },
    age:{
      type:Number,
      value:'我是默认值： 100'
    }
  },
  
子向父传值
​
​  data: {
    msg:'我是子组件的值'
  },
  methods: {
    send(){
      this.triggerEvent('send',this.data.msg)
    }
  },
  
  父组件
 <child  name="{{ name }}" age="{{ age }}" bindsend="send"></child>
  // 父组件接受子组件传递过来的值
  send(e){
    console.log(e.detail);
  }

跟随事件传值

在 页面标签上通过 绑定 data-key = value ， 然后绑定点击通过 e.currentTarget.dataset.key 来获取标签上绑定的值。

<button bindtap="get" data-name="测试"> 拿到传值</button>

get(e){ console.log(e.currentTarget.dataset.name) },

页面跳转的方式及区别

wx.navigateTo 保存当前页面，跳转到其他页面，但是不能跳转到tabBar页面

wx.redirectTo 关闭当前页面，跳转到其他页面，但是不能跳转到tabBar页面

wx.switchTab 跳转到Tab页，并关闭其他的所有非tab页

wx.navigateBack 关闭当前页面，放回上一页面或多级页面，可以用getCurrentPages获取当前的页面栈，然后决定返回几层

小程序运行机制

热启动：假如用户已经打开了某个小程序，在一定时间范围内再次打开小程序的话，这个时候就不用重新启动小程序了，只是把小程序从后台显示出来

冷启动：用户首次打开小程序或者被微信主动销毁再次打开的情况，小程序需要重新加载启动

bindTap与catchTap区别

相同点：都是点击事件

不同点：bindTap不会阻止冒泡

catchTap会阻止冒泡

实现下拉刷新的方式

方案 一 ：

• 通过在 app.json 中， 将 "enablePullDownRefresh": true, 开启全局下拉刷新。
• 或者通过在 组件 .json ， 将 "enablePullDownRefresh": true, 单组件下拉刷新。

方案二：

• scroll-view ： 使用该滚动组件 自定义刷新，通过 bindscrolltoupper 属性， 当滚动到顶部/左边，会触发 scrolltoupper事件，所以我们可以利用这个属性，来实现下拉刷新功能。

小程序的双向绑定与vue区别

小程序直接用this.data.key=value 是不能将数据更新到视图中的 小程序需要使用this.setData({key:value})来更新值

小程序wxss与css区别

① 新增了 rpx 尺寸单位 

• CSS 中需要手动进行像素单位换算，例如 rem 
• WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算 

② 提供了全局的样式和局部样式 

• 项目根目录中的 app.wxss 会作用于所有小程序页面 
• 局部页面的 .wxss 样式仅对当前页面生效 

③ WXSS 仅支持部分 CSS 选择器 

• .class 和 #id 
• element 
• 并集选择器、后代选择器 
• ::after 和 ::before 等伪类选择器

rpx

rpx是小程序独有的，用来解决屏幕适配的尺寸单位

rpx实现原理

• 因为不同设备屏幕的尺寸大小不同，为了实现屏幕的自动适配，rpx将所有设备的屏幕，在宽度上划分为750等份(即当前屏幕宽度为750rpx)，在较小的设备上，1rpx代表的宽度较小，在较大的设备上，1rpx代表的宽度较大，小程序在不同设备运行的时候会自动把rpx单位转化为像素单位来渲染，从而实现屏幕的适配

rpx与px之间的单位换算

• 一般设计稿可以用iPhone6作为视觉稿的标准
• 开发举例：在iPhone6上绘制宽100px,高20px的盒子，换算成rpx单位，分别为200rpx,40rpx

openid、unionid

openid 同一用户在同一应用下的唯一标识（长度28）

unionid 同一用户在不同应用下的唯一标识（长度29）

提升小程序速度的方法

图片优化

• 使用压缩后的图片，合理选择图片格式。如webp 借助工具压缩图片，减小图片大小，并保持较高质量

减少http请求次数

• 合并小程序的请求，减少请求次数，利用缓存，减少对服务器的频繁请求

懒加载技术

• 仅加载用户视野内的内容，延迟加载非必要资源，在滚动时异步加载列表中数据，而不是一次加载所有内容

分包加载

• 根据业务场景将小程序分成多个分包，按需加载，降低首次启动时的负担

小程序体积优化

• 移除未使用的代码和资源，避免引入过多不必要的第三方库或插件

小程序优点和缺点

优点：

• 1.无需下载
• 2.打开速度快
• 3.开发成本低
• 4.安全性好
• 5.服务请求快

缺点：

• 1.不能开发后台
• 2.大小限制，不能打开超过5个层级的页面

自定义组件步骤

• 1.创建一个components文件夹
• 2.创建然后新建component结构
• 3.把json中 的 "component" 改为true
• 4.在那个页面中调用就设置json ,在里边引入
• 5.直接在xhtml中使用