前情提要
路由跳转
微信小程序中支持路由跳转的常用API有,
wx.navigateTo()
,保留当前页面,跳转到应用中的某个页面。但是,不能跳转到tabbar页面。wx.redirectTo()
,关闭当前页面,跳转到应用内的某个页面。wx.reLaunch()
,关闭所有页面,打开应用中的某个页面。wx.switchTab()
,跳转到tabbar页面,并关闭其他所有非tabbar页面。
数据缓存
微信小程序提供了数据缓存API,一个同步,另一个异步。
同步数据缓存
wx.setStorageSync(key,data)
,将数据缓存在本地,除非主动删除或因存储空间原因被系统清理,否则数据一直可用。单个key允许存储的最大数据长度为1MB,所有数据存储上限为10MB。wx.getStorageSync(key)
,从本地缓存中获取指定key的内容。wx.removeStorageSync(key)
,从本地缓存中移除指定key。wx.clearStorageSync()
,清理本地缓存。
异步数据缓存
wx.setStorage(Object object)
。wx.getStorage(Object object)
。wx.removeStorage(Object object)
。wx.clearStorage(Object object)
。
小程序项目
代码涉及的主要文件有:
- app.json
- app.wxss
- pages/home/home.wxml
- pages/camera/camera.wxml
- pages/camera/camera.json
- pages/user/user.wxml
- pages/user/user.js
- pages/user/user.json
- pages/login/login.wxml
- pages/login/login.json
- pages/login/login.wxss
- 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));
}
})