05-小程序(wx.setStorageSync等相关数据存储API,-小程序App和Page生命周期,跳转tabbar页面wx.switchTab, 进入我的页面如果未登录跳转微信授权登录与手机号)

01-数据缓存

传送门

就是小程序里面存取数据

回顾localStorage与sessionStorage

1. 使用

   localStorage.setItem(key,value) //存，value必须是字符串
   localStorage.getItem(key)//取
   localStorage.removeItem(key) //清除指定key的存储
   localStorage.clear() //全部清除
   

2. 区别

   1. sessionStorage在浏览器关闭后就消失了

3. 缺点：

   1. 存储大小是5M
   2. 一般小程序或者hybrid App的存储一般不用localStorage

API的使用

1. 推荐使用同步的API，也就是带sync

wx.setStorage({
    data: 'joven',
    key: 'name',
    success(){
        console.log('存成功了')
    }
})

wx.setStorageSync('age', 18) //存
console.log(wx.getStorageSync('name'))//取 
wx.removeStorageSync('name') //移除指定的Key的存储
wx.clearStorageSync() //清除所有的key的存储

问题: 为什么setStorage有回调函数？为什么还有对应的Sync的方法？（了解)

1. 小程序的数据缓存本质是对手机文件系统的存取

2. sync方法可以理解成异步方法包装同步方法，类似于await promise

3. 代码里面对内存的读取是同步的，对硬盘的读取是异步的

4. 硬盘和内存的区别

   1. 硬盘，容量大，便宜，断电不会丢失，速度慢

   2. 内存，容量小，贵，断电会丢失，速度快

   3. SSD介于硬盘和内存之间
      

使用场景：

1. 尽量使用sync的API

注意点

1. 单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB
2. 小程序存取API可以是对象
3. wx.getStorageInfo是用来获取storage相关信息，不要和wx.getStorage混淆

02-登录页-存储token

1. 请求获取到的数据，只有message，没有token
   1. 解决方案：公共的请求方法里面resolve(res.data)
2. 登录成功，提示，并存token
   1. 提示 wx.showToast
   2. 存token
      1. wx.setStorageSync(‘token’,value)

注意点

1. 在微信开发者工具里面，调试器的storage可以看到存储的情况

03-小程序App生命周期

App生命周期

1. 小程序启动 onLaunch
   1. 全局只会执行一次
   2. 如果想在小程序初始化时执行,在onLaunch里面写
2. 小程序显示 onShow
3. 小程序隐藏 onHide

04-小程序Page生命周期

Page生命周期

可以和浏览器里面的页面对照起来记忆

1. 页面加载 onLoad

2. 页面显示 onShow

3. 页面初次渲染完成 onReady

   1. 对应 DOMContentLoaded

4. 页面隐藏 onHide

5. 页面销毁 onUnload

   // 是简写
   $(function(){
   	// dom渲染完成后
   })
   // ready背后是DOMContentLoaded实现
   $.ready(function(){
       
   })
   

注意点

1. B页面返回A时,B会销毁的

05-Tabbar页特点

传送门

1. 跳转tabbar页面,用wx.switchTab
2. 跳转非tabbar页面,用wx.navigateTo
3. 没有在app.json的tabBar里面配置路径的页面, 不会显示底部的tab栏
4. 小程序初始化时,只会初始化第一个tabbar页面, 其他tabbar页面第一次点击后才会初始化
5. tabbar页面只要初始化过后, 就不会销毁. 切换tabbar页面时,只会显示/隐藏

06-我的-页面分析

1. 入口: 点击tab栏我的,显示我的页面
2. 主要模块: 用户头像,昵称
3. 其他说明
   1. 如果未登录,跳转登录,登录完成后,跳转我的,刷新

我的-静态页面

1. 省略
2. 主体部分向上突出效果，margin-top:负值

我的-渲染页面

1. 何时判断用户是否登录呢? 如果用户未登录跳转登录

   1. onLoad/onShow不确定???

2. 微信授权登录成功后, toast消失后再返回我的页面

   1. 方法wx.navigateBack()

      wx.showToast({
                title: data.message,
                // toast显示的时候会触发success
                success: () => {
                  // toast不显示时，跳转
                  setTimeout(() => {
                    // 返回上一个页面
                    wx.navigateBack()
                  }, 1500)
                }
              })
      

3. 如果用户有登录态, 渲染头像和昵称

   1. 如果用户是登录的,那么就发请求
   2. 发请求
   3. 拿到请求数据,设置为data属性
   4. 渲染了

4. 如果用户未登录,跳转登录,返回时,并不会刷新页面

   1. 判断用户登录和渲染页面逻辑应该放在onShow
      1. onShow的执行时机,初始化, 页面显示的时候

5. bug:如果用户未登录, 依然发请求

6. 跳转页面后,当前页面逻辑依然是执行的.

组件Input

传送门

概念

输入框

1. 小程序的input就是输入框, 如果需要radio和checkbox的话,有对应的组件

如何使用

1. 没有边框,如果需要的话,自行设置样式
2. type字段是键盘类型
   1. 默认是text,是文本键盘
   2. number,数字键盘
   3. idcard身份证键盘
3. content-type设置键盘右下角按钮文案
   1. search 文案就是搜索

1. 获取输入框的值
   1. 注册bindInput事件,在事件理处理方法event.detail.value 来获取
   2. 小程序没有v-model
2. 点击键盘右下角按钮时的事件 bindconfirm

手机号登录页-页面分析

1. 入口: 微信授权登录,点击手机号码登录跳转过来的
2. 主要模块: 手机号码输入框,获取验证码,验证码输入框, 立即验证按钮
3. 其他说明
   1. 输入手机号码,点击获取验证码,发请求获取验证码,toast出来, 输入验证码,点立即验证,调接口登录
   2. 点击获取验证码时, 获取验证码按钮变成倒计时,并且倒计时中, 点击无效

手机号登录页-获取验证码-练习

1. 两个输入框限制输入的长度maxlength
2. 获取输入框的内容
   1. bindblur 在点击按钮也就是输入框失去焦点时,会触发
   2. 设置data属性phoneNumber,
3. 点击获取验证码,变成60s
   1. 点击事件bindtap: getVcode
   2. data里面声明属性, isCountDown
   3. 在结构中isCountDown, 渲染样式
4. 开始倒计时
   1. 每一秒减1
      1. 每一秒setInterVal
      2. data属性countNum, 每一秒countNum–
5. 倒计时如果为1, 就结束倒计时
6. 检查bug
   1. 再次倒计时,从1开始
      1. 结束倒计时,把countNum重置
   2. 再次倒计时,速度太快
      1. 结束倒计时,要清除定时器
   3. 如果正在倒计时中,点击的话, 倒计时速度加快
      1. 如果正在倒计时中,点击无效

手机号登录页-获取验证码&完成登录

1. 点击获取验证码,请求验证码
   1. 逻辑应放在getVcode
   2. 请求方法queryUserVcode
   3. TODO:判断手机号码格式是否正确
2. toast提示验证码
   1. wx.showToast的title这个参数必须是字符串,不能是数字
3. 输入框输入验证码,点击立即验证,完成登录
   1. 获取验证码输入框的内容 bindblur
   2. 点击立即验证 bindtap: phoneLogin
   3. 在phoneLogin发请求
   4. 完成登录后, 提示,存token,跳转

注意点：

1. 前端尽量检验请求参数是否合格,如果不合格不发请求.
   1. 常见的手机号码格式不对的话,不必发请求
2. 手机号码登录完成后,我的页面请求我的信息是没有头像和昵称, 这是后端接口的问题,忽略.