网易云案例:小程序 本地存储，个人中心,登录页面交互

个人中心页面：

<view class="wrap1" style="background:url(/static/images/mybanner.jpg)no-repeat;">
<view class="header" >
//头像绑定跳转功能
<image  bindtap="navbar"  src='{{userinfo.avatarUrl?userinfo.avatarUrl:"/static/images/ico/touxiang.png"}}'></image>
//判断是否有图片，没有就使用默认图片路径，下面名称同理
<view>{{userinfo.nickname?userinfo.nickname:"游客"}}</view>
</view>

data: {
    userinfo:{},
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //跳转回来，getStorageSync获取 Key。再将把值赋给userinfo 
      let userinfo = wx.getStorageSync('userinfo')
      if(userinfo){
      this.setData({
        //将数据再转换成js数据
     userinfo:JSON.parse(userinfo)
      })
    }
    console.log(userinfo);
  
  },
//点击头像跳转到登录页页面
 navbar(){
   wx.navigateTo({
     url: '/pages/login/login',
   })
 },

登录页：

<view class="login">
<view class="h1">欢迎回来！</view>
<view class="table">
  <form>
<view class="box"> 
 <view class="tit">手机号码</view> 
 <input class="input" type="number" value="" placeholder="请输入手机号码" bindinput="handinput" id="phone" />
</view>

<view class="box"> 
 <view class="tit">密码</view> 
 <input class="input" type="password" placeholder="请输入密码"  bindinput="handinput" id="password"/>
</view>
</form>
</view>

<button bindtap="login" class="login-btn">登录</button>
<view class="wangj">忘记密码？</view>

<view class="bottom">
  <text>还没有账号?</text>
  <text class="txt">马上注册</text>
</view>

</view> <!--login结束-->

JS页

import request from '../../utils/request.js';  //引入封装好的接口

Page({
  /**
   * 页面的初始数据
   */
  data: {
  phone:'',
  password:'',
  },
//点击登录按钮
login:async function(){
//获取数据，赋给phone 跟 password
  let{phone,password} = this.data;
  if(!phone){
    wx.showToast({
      title: '手机号不能为空',
      icon:'error',
    })
    return;
  };
  //正则表达
  let phoneReg = /^1(1|2|3|4|5|6|7|8|9)\d{9}$/;
//第一位是1，第二位1-9，\d是纯数字，后面再加9位数字。
if(!phoneReg.test(phone)){
wx.showToast({
  title: '手机号格式不正确',
})
return;
};
  if(!password){
    wx.showToast({
      title: '密码不能为空',
      icon:'error',
    })
    return;
  };
   //调用接口，
   //例子： login/cellphone?phone=xxx&password=yyy
   let result =  await  request('/login/cellphone',{phone,password});
  //账号密码正确的话，开始执行
  if(result.code===200){
      wx.showToast({
        title: '登录成功',
      }),
      //成功后 setStorageSync本地保存数据   ('key','对象数据')转换成JSON编译， 个人中心接收后再进行转换。JSON.parse(userinfo)
      wx.setStorageSync('userinfo',JSON.stringify(result.profile));
      //登录成功，跳转到个人中心，sreLaunch可以使页面进行刷新，switchtab是不刷新页面的
      wx.sreLaunch({
        url: '/pages/personal/personal',
      })

    }else if(result.code===400){
      wx.showToast({
        title: '手机号错误',
        icon:'error'
      })
    }else if(result.code===502){
      wx.showToast({
        title: '密码错误',
        icon:'none'
      })
    }else{
      wx.showToast({
        title: '登录失败，请重新登录',
        icon:'none'
      })
    }
 
},
 //事件绑定，获取页面的value值，赋值到对应的区域
  handinput(event){
  //根据id获取到对应的数据值
    let type = event.currentTarget.id;
    this.setData({
      [type]:event.detail.value
    })
    // console.log(event.currentTarget.id);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})