微信小程序 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

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