微信小程序中的路由跳转和缓存

前情提要

路由跳转

微信小程序中支持路由跳转的常用API有，

1. wx.navigateTo()，保留当前页面，跳转到应用中的某个页面。但是，不能跳转到tabbar页面。
2. wx.redirectTo()，关闭当前页面，跳转到应用内的某个页面。
3. wx.reLaunch()，关闭所有页面，打开应用中的某个页面。
4. wx.switchTab()，跳转到tabbar页面，并关闭其他所有非tabbar页面。

数据缓存

微信小程序提供了数据缓存API，一个同步，另一个异步。

同步数据缓存

1. wx.setStorageSync(key,data)，将数据缓存在本地，除非主动删除或因存储空间原因被系统清理，否则数据一直可用。单个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB。
2. wx.getStorageSync(key)，从本地缓存中获取指定key的内容。
3. wx.removeStorageSync(key)，从本地缓存中移除指定key。
4. wx.clearStorageSync()，清理本地缓存。

异步数据缓存

1. wx.setStorage(Object object)。
2. wx.getStorage(Object object)。
3. wx.removeStorage(Object object)。
4. wx.clearStorage(Object object)。

小程序项目

代码涉及的主要文件有：

1. app.json
2. app.wxss
3. pages/home/home.wxml
4. pages/camera/camera.wxml
5. pages/camera/camera.json
6. pages/user/user.wxml
7. pages/user/user.js
8. pages/user/user.json
9. pages/login/login.wxml
10. pages/login/login.json
11. pages/login/login.wxss
12. pages/login/login.js

主体

app.json

{
  "pages": [
    "pages/home/home",
    "pages/camera/camera",
    "pages/user/user",
    "pages/login/login"
  ],
  "window": {
    "navigationBarBackgroundColor": "#0149af",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#0149af",
    "selectedColor": "#0149af",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/static/images/tabIcons/homepage.png",
      "selectedIconPath": "/static/images/tabIcons/homepage_fill.png"
    },{
      "pagePath": "pages/camera/camera",
      "text": "相册",
      "iconPath": "/static/images/tabIcons/camera.png",
      "selectedIconPath": "/static/images/tabIcons/camera_fill.png"
    },{
      "pagePath": "pages/user/user",
      "text": "个人中心",
      "iconPath": "/static/images/tabIcons/people.png",
      "selectedIconPath": "/static/images/tabIcons/people_fill.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.wxss

.container{
  margin: 40rpx;
  padding: 40rpx;
  height: 600rpx;
  background:#a3c8f8;
  border-radius: 6rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 48rpx;
  color: #fff;
}

首页（pages/home）

pages/home/home.wxml

<view class="container">
  首页
</view>

相册（pages/camera）

pages/camera/camera.wxml

<view class="container">
  相册
</view>

pages/camera/camera.json

{
  "navigationBarTitleText": "相册"
}

个人中心（pages/user）

pages/user/user.wxml

<view class="userContainer">
  <image src='{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/vistor.png"}}'></image>
  <view class="name">{{userInfo.nickname?userInfo.nickname:"游客"}}</view>
  <view class="text" bindtap="handleTap" wx:if="{{!userInfo.avatarUrl}}">去登录？</view>
</view>

pages/user/user.js

Page({
  data:{
    userInfo:{}
  },
  onLoad(){
    const data = wx.getStorageSync("userInfo");
    if(data){
      const userInfo = JSON.parse(data);
      this.setData({userInfo});
    }
    console.log("userInfo.avatarUrl",this.data.userInfo.avatarUrl);
  },
  handleTap(){
    wx.navigateTo({
      url: '/pages/login/login',
    })
  }
})

pages/user/user.json

{
  "navigationBarTitleText": "个人中心"
}

登录（pages/login）

pages/login/login.wxml

<view class="loginContainer">
  <view class="title">登录</view>
  <view class="list">
    <view class="item">
      <input type="text" data-type="username" bindinput="handleInput" placeholder="用户名" />
    </view>
    <view class="item">
      <input type="text" password data-type="password" bindinput="handleInput" placeholder="密码" />
    </view>
  </view>
  <button size="mini" bindtap="login">登录</button>
</view>

pages/login/login.json

{
  "navigationBarTitleText": "登录"
}

pages/login/login.wxss

.loginContainer{
  padding: 20rpx;
}
.loginContainer .title{
  padding: 20rpx 0;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 32rpx;
}
.list{
  margin: 40rpx auto 20rpx;
}
.item{
  margin: 12rpx 0;
  padding: 0 20rpx;
  border: 1px solid #ddd;
  border-radius: 6rpx;
}
.item input{
  width: 100%;
  height: 60rpx;
  font-size: 28rpx;
}
button{
  font-weight: normal;
  font-size: 28rpx!important;
  color: #fff;
  background: #0149af;
}

pages/login/login.js

Page({
  data:{
    username:"",
    password:""
  },
  handleInput(e){
    const type = e.target.dataset.type;
    this.setData({
      [type]:e.detail.value
    })
  },
  login(){
    const {username,password} = this.data;
    if(!username){
      wx.showToast({
        title: '请输入您的用户名',
        icon:'error'
      })
      return;
    }
    if(!password){
      wx.showToast({
        title: '请输入您的密码',
        icon:'error'
      })
      return;
    }
    this.sendLoginRequest();
    wx.showToast({
      title: '登录成功',
      success:() => {
        setTimeout(() => {
          wx.reLaunch({
            url: '/pages/user/user',
          })
        },300)
      }
    })
  },
  sendLoginRequest(){
    const userInfo = {
      avatarUrl:"/static/images/avatar.png",
      nickname:"Duck先生"
    }
    wx.setStorageSync("userInfo",JSON.stringify(userInfo));
  }
})

相关链接

微信小程序中的路由跳转