01-数据缓存
就是小程序里面存取数据
回顾localStorage与sessionStorage
-
使用
localStorage.setItem(key,value) //存,value必须是字符串 localStorage.getItem(key)//取 localStorage.removeItem(key) //清除指定key的存储 localStorage.clear() //全部清除
-
区别
- sessionStorage在浏览器关闭后就消失了
-
缺点:
- 存储大小是5M
- 一般小程序或者hybrid App的存储一般不用localStorage
API的使用
- 推荐使用同步的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的方法?(了解)
-
小程序的数据缓存本质是对手机文件系统的存取
-
sync方法可以理解成异步方法包装同步方法,类似于await promise
-
代码里面对内存的读取是同步的,对硬盘的读取是异步的
-
硬盘和内存的区别
-
硬盘,容量大,便宜,断电不会丢失,速度慢
-
内存,容量小,贵,断电会丢失,速度快
-
SSD介于硬盘和内存之间
-
使用场景:
- 尽量使用sync的API
注意点
- 单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB
- 小程序存取API可以是对象
wx.getStorageInfo
是用来获取storage相关信息,不要和wx.getStorage
混淆
02-登录页-存储token
- 请求获取到的数据,只有message,没有token
- 解决方案:公共的请求方法里面resolve(res.data)
- 登录成功,提示,并存token
- 提示 wx.showToast
- 存token
- wx.setStorageSync(‘token’,value)
注意点
- 在微信开发者工具里面,调试器的storage可以看到存储的情况
03-小程序App生命周期
- 小程序启动 onLaunch
- 全局只会执行一次
- 如果想在小程序初始化时执行,在onLaunch里面写
- 小程序显示 onShow
- 小程序隐藏 onHide
04-小程序Page生命周期
可以和浏览器里面的页面对照起来记忆
-
页面加载 onLoad
-
页面显示 onShow
-
页面初次渲染完成 onReady
- 对应
DOMContentLoaded
- 对应
-
页面隐藏 onHide
-
页面销毁 onUnload
// 是简写 $(function(){ // dom渲染完成后 }) // ready背后是DOMContentLoaded实现 $.ready(function(){ })
注意点
- B页面返回A时,B会销毁的
05-Tabbar页特点
- 跳转tabbar页面,用
wx.switchTab
- 跳转非tabbar页面,用
wx.navigateTo
- 没有在app.json的tabBar里面配置路径的页面, 不会显示底部的tab栏
- 小程序初始化时,只会初始化第一个tabbar页面, 其他tabbar页面第一次点击后才会初始化
- tabbar页面只要初始化过后, 就不会销毁. 切换tabbar页面时,只会显示/隐藏
06-我的-页面分析
- 入口: 点击tab栏我的,显示我的页面
- 主要模块: 用户头像,昵称
- 其他说明
- 如果未登录,跳转登录,登录完成后,跳转我的,刷新
我的-静态页面
- 省略
- 主体部分向上突出效果,margin-top:负值
我的-渲染页面
-
何时判断用户是否登录呢? 如果用户未登录跳转登录
- onLoad/onShow不确定???
-
微信授权登录成功后, toast消失后再返回我的页面
-
方法
wx.navigateBack()
wx.showToast({ title: data.message, // toast显示的时候会触发success success: () => { // toast不显示时,跳转 setTimeout(() => { // 返回上一个页面 wx.navigateBack() }, 1500) } })
-
-
如果用户有登录态, 渲染头像和昵称
- 如果用户是登录的,那么就发请求
- 发请求
- 拿到请求数据,设置为data属性
- 渲染了
-
如果用户未登录,跳转登录,返回时,并不会刷新页面
- 判断用户登录和渲染页面逻辑应该放在onShow
- onShow的执行时机,初始化, 页面显示的时候
- 判断用户登录和渲染页面逻辑应该放在onShow
-
bug:如果用户未登录, 依然发请求
-
跳转页面后,当前页面逻辑依然是执行的.
组件Input
概念
输入框
- 小程序的input就是输入框, 如果需要radio和checkbox的话,有对应的组件
如何使用
- 没有边框,如果需要的话,自行设置样式
- type字段是键盘类型
- 默认是text,是文本键盘
- number,数字键盘
- idcard身份证键盘
- content-type设置键盘右下角按钮文案
- search 文案就是搜索
- 获取输入框的值
- 注册bindInput事件,在事件理处理方法
event.detail.value
来获取 - 小程序没有v-model
- 注册bindInput事件,在事件理处理方法
- 点击键盘右下角按钮时的事件 bindconfirm
手机号登录页-页面分析
- 入口: 微信授权登录,点击手机号码登录跳转过来的
- 主要模块: 手机号码输入框,获取验证码,验证码输入框, 立即验证按钮
- 其他说明
- 输入手机号码,点击获取验证码,发请求获取验证码,toast出来, 输入验证码,点立即验证,调接口登录
- 点击获取验证码时, 获取验证码按钮变成倒计时,并且倒计时中, 点击无效
手机号登录页-获取验证码-练习
- 两个输入框限制输入的长度
maxlength
- 获取输入框的内容
- bindblur 在点击按钮也就是输入框失去焦点时,会触发
- 设置data属性phoneNumber,
- 点击获取验证码,变成60s
- 点击事件bindtap: getVcode
- data里面声明属性, isCountDown
- 在结构中isCountDown, 渲染样式
- 开始倒计时
- 每一秒减1
- 每一秒setInterVal
- data属性countNum, 每一秒countNum–
- 每一秒减1
- 倒计时如果为1, 就结束倒计时
- 检查bug
- 再次倒计时,从1开始
- 结束倒计时,把countNum重置
- 再次倒计时,速度太快
- 结束倒计时,要清除定时器
- 如果正在倒计时中,点击的话, 倒计时速度加快
- 如果正在倒计时中,点击无效
- 再次倒计时,从1开始
手机号登录页-获取验证码&完成登录
- 点击获取验证码,请求验证码
- 逻辑应放在getVcode
- 请求方法
queryUserVcode
- TODO:判断手机号码格式是否正确
- toast提示验证码
- wx.showToast的title这个参数必须是字符串,不能是数字
- 输入框输入验证码,点击立即验证,完成登录
- 获取验证码输入框的内容 bindblur
- 点击立即验证 bindtap: phoneLogin
- 在phoneLogin发请求
- 完成登录后, 提示,存token,跳转
注意点:
- 前端尽量检验请求参数是否合格,如果不合格不发请求.
- 常见的手机号码格式不对的话,不必发请求
- 手机号码登录完成后,我的页面请求我的信息是没有头像和昵称, 这是后端接口的问题,忽略.