有关微信小程序用户登录界面跳转问题

作为一个新手，最近在编写微信小程序的时候遇到了一个问题，分享一下我的解决方案，也欢迎大佬分享更为有效的方法。

问题是这样的：

一、需求分析

1. 用户第一次登录小程序显示登录与注册页面
2. 登陆成功后跳转至个人中心

二、遇到的问题

• 小程序app.json的pagePath路径只能跳转至一个page页面，无法根据用户登录的状态来实现不同页面的跳转

上图为登录页面展示

• 如果使用自定义tabBar组件，需要每个页面都要设置，同时因为每次点击都要加载，用户体验极差

三、解决方案

1. 使用wx:if、wx:elif、wx:elif语句控制wxml的页面布局

<view wx:if="{{login==true}}">
    <view class="box_1"></view>
</view>
<view wx:elif="{{login==false}}">
    <view class="box_2"></view>
</view>

2. 也是更为简单的方法

• 只需在wxml页面中添加hidden字段

<view class="container_1" hidden="{{login}}"></view>

• 同时在js页面中将login数据的值设置为false，当点击登录按钮时，将login数据的值在设置为true

登录后需要显示的页面代码：

<view class="container_2" hidden="{{!login}}">
	<button class="loginBtn"  hover-class="btn-hover" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">登录</button>
</view>

相应的js代码：

bindGetUserInfo: function(e) {
	this.setData({
		login:true
    })

判定登录成功后，将login数据的值更改为true即可

跳转后的页面如下：