Taro开发微信小程序实现简单的登录退出功能

Taro是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架，还有我发现从某度上搜索的结果首页居然看不到Taro框架的任何信息，但是谷歌首页就直接给出了结果，Taro使用文档。我是准备用它来开发微信小程序的，而且公司使用的前端架构正好是React，感觉冥冥之中一切自有定数。
一些初始化的例子我这里不多说了，官方说的很详细了，我选择的初始化方式是使用redux,Sass，并且不开启TypeScript.
首先我们要进入的页面是index.js
试想一下，如果你第一次使用这款应用的时候需要登录，那么你第二次肯定不会想再登录一次了，所以依托微信这个母体，小程序可以在进入页面时直接加载本地的一些信息，所以我们可以在componentWillMount中调用

Taro.getStorage({key:'userInfo'}).then(rst => {   //从缓存中获取用户信息
	this.props.setBasicInfo(rst.data)
})

这个函数也很简单，下面看一下action 和 reducer

export const setBasicInfo = (param) => {
    // console.log('222',param)
    return {
        type: BASICINFO,
        payload: param
    }
}

switch (action.type) {
     case BASICINFO:
         // console.log('i am here',action)
         return {
             ...state,
             basicinfo: action.payload
         }
     default:
         return state
 }

这个BASICINFO就是和初始化时给出的样例一样，在常量中定义的一个值。这样一来，如果上次登录过的话，这次一进入到项目，就可以直接获取用户信息了。
接下来做一个登录页面，UI 大概就写这个样子，

<View className='index'>
    <View>
        <Text>申请获取你的公开信息（昵称、头像等）</Text> 
        <Button open-type='getUserInfo' onGetUserInfo={this.getUserInfo} > 微信授权 </Button>
    </View>
</View >

虽说封装了框架，很多还是支持微信小程序的写法的，比如open-type,这个和原生的写法并没有什么出入。

getUserInfo = (userInfo) => {
    console.log('userinfo',userInfo)
    if(userInfo.detail.userInfo){   //同意
        this.props.setBasicInfo(userInfo.detail.userInfo) //将用户信息存入redux
        Taro.setStorage({key:'userInfo',data:userInfo.detail.userInfo}).then(rst => {  //将用户信息存入缓存中
            Taro.navigateBack()
        })
    } else{ //拒绝,保持当前页面，直到同意 
    }
}

看现在的逻辑，登录之后，就可以把用户信息存储到缓存中了，下次进入小程序，也不会需要你登录了。而且注意一下Taro.navigateBack(),他可以跳转回到login之前的界面，实为***点睛之笔***。
页面UI大概可以是这个样子：其中的className为引入的全局样式，使用的是Taro-ui,但是Taro-ui没有和框架绑定，需要使用者自行下载。不过使用什么无所谓，意思到位就好。

<View className='index'>
    <View className='at-row userinfo'>
        <View className='at-col at-col-3 userinfo-avatar'>
            <AtAvatar openData={{type:'userAvatarUrl'}} circle></AtAvatar>
        </View>
        <View className='at-col at-col-9'>
            {
                basicinfo.nickName 
                    ? <Text>{basicinfo.nickName}</Text>
                    : <AtButton size='small' onClick={this.login}>登录</AtButton>
            }
        </View>
    </View>
    <View>
        <AtList>
            <AtListItem title='个人信息' note='可修改单位、电话等信息' arrow='right' onClick={this.personInfo} />
        </AtList>
    </View>
    {
        basicinfo.nickName 
            ?  <View className='logout-btn'>
                <AtButton size='small'  onClick={this.logout}>退出账号</AtButton>
            </View>
            : null
    }
    <View className='logout-model'>
        <AtModal
            isOpened={isOpened}
            title='确定退出？'
            cancelText='取消'
            confirmText='确认'
            onCancel={this.handleCancel}
            onConfirm={this.handleConfirm}
            content='退出登录后将无法查看会议，重新登录即可查看'
        />
    </View>
    
</View >

这里有判断逻辑，点击退出就清除缓存内容，点击登录跳转，然后登录成功再跳回来。

login = () => {
    Taro.navigateTo({url: '/pages/login/login'});
}
logout = () => {
    this.setState({isOpened:true})
}
handleCancel = () => {
    this.setState({isOpened:false})
}
handleConfirm = () => {
    this.props.setBasicInfo('') //将用户信息存入redux
    Taro.removeStorageSync('userinfo')
    this.setState({isOpened:false})
}
personInfo = () => {
    Taro.navigateTo({url: '/pages/info/info'});
}

这样就实现了简单的登录登出功能，希望给入门的朋友带来一点帮助，谢谢。