微信小程序 17 个人中心和登录 的跳转

17.1 前提知识

---

1. 跳转

wx.request()：路由跳转，不关闭其它的页面。但是不能跳转到由 tapbar 定义的页面。

wx.switchTab()：专门 用来跳转 tabbar 页面的，但是会 关闭 其它所有页面。

wx.reLaunch()：关闭所有页面，然后打开 一个页面。这个页面可以是 tab 也可以不是。

2. 存储数据信息 到本地

wx.setStorageSync(存储名,存储的数据)：将 数据信息 存储到本地。最好是 存储一个 json 对象。

JSON.stringify(xxx)：将一个 js对象 或 字符串文本，转换为 json 文本数据。

JSON.parse() ：解析一个 json 对象 为 一个 js 对象。

wx.getStorageSync(存储名)：读取 本地 保存的 数据。

---

17.2 实操

这个时候 我们 就可以 采用 三目运算符的方式，来判断一下 本地是否有数据然后 显示了。就比如：

{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}

意思就是说 userInfo.avatarUrl 是否存在/有值呢？如果有的话，就用 avatarUrl，如果没有 就用 静态图片。

<view class="personalContainer">
    <view class="user-section">
        <image class="bg" src="/static/images/personal/bgImg2.jpg"></image>
        <view class="user-info-box" bindtap="toLogin">
            <view class="portrait-box">
                <image class="portrait" src='{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}'></image>
            </view>
            <view class="info-box">
                <text class="username">{{userInfo.nickname?userInfo.nickname: '游客'}}</text>
            </view>
        </view>

        <view class="vip-card-box">
            <image class="card-bg" src="/static/images/personal/vip-card-bg.png" mode=""></image>
            <view class="b-btn">
                立即开通
            </view>
            <view class="tit">
                <!-- 会员图标-->
                <text class="iconfont icon-huiyuan-"></text>
                云音乐会员
            </view>
            <text class="e-m">atguigu Union</text>
            <text class="e-b">开通会员听歌, 撸代码</text>
        </view>
    </view>


    <view
            class="cover-container"
            bindtouchstart="handleTouchStart"
            bindtouchmove="handleTouchMove"
            bindtouchend="handleTouchEnd"
            style="transform: {{coverTransform}}; transition: {{coverTransition}}"
    >
        <image class="arc" src="/static/images/personal/arc.png"></image>
        <!-- 个人中心导航 -->
        <view class="nav-section">
            <view class="nav-item"  hover-class="common-hover"  hover-stay-time="50">
                <text class="iconfont icon-xiaoxi"></text>
                <text>我的消息</text>
            </view>
            <view class="nav-item"   hover-class="common-hover" hover-stay-time="50">
                <text class="iconfont icon-myRecommender"></text>
                <text>我的好友</text>
            </view>
            <view class="nav-item"  hover-class="common-hover"  hover-stay-time="50">
                <text class="iconfont icon-gerenzhuye"></text>
                <text>个人主页</text>
            </view>
            <view class="nav-item" hover-class="common-hover"  hover-stay-time="50">
                <text class="iconfont icon-gexingzhuangban"></text>
                <text>个性装扮</text>
            </view>
        </view>

        <!-- 个人中心列表 -->
        <view class="personalContent">
            <view class="recentPlayContainer">
                <text class="title">最近播放</text>
                <!-- 最近播放记录 -->
                <scroll-view wx:if="{{recentPlayList.length}}" scroll-x class="recentScroll" enable-flex>
                    <view class="recentItem" wx:for="{{recentPlayList}}" wx:key="{{id}}">
                        <image src="{{item.song.al.picUrl}}"></image>
                    </view>
                </scroll-view>
                <view wx:else>暂无播放记录</view>
            </view>

            <view class="cardList">
                <view class="card-item">
                    <text class="title">我的音乐</text>
                    <text class="more"> > </text>
                </view>
                <view class="card-item">
                    <text class="title">我的收藏</text>
                    <text class="more"> > </text>
                </view>
                <view class="card-item">
                    <text class="title">我的电台</text>
                    <text class="more"> > </text>
                </view>
            </view>
        </view>
    </view>
</view>

wx.setStorage() 和 wx.setStorageSync 都是 永久的存储，除非 用户主动删除。佛祖额是删除不掉的。