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) //将用户信息存入reduxTaro.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'><AtModalisOpened={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('') //将用户信息存入reduxTaro.removeStorageSync('userinfo')this.setState({isOpened:false})
}
personInfo = () => {Taro.navigateTo({url: '/pages/info/info'});
}

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

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

Taro开发微信小程序遇到的问题和解决方法
Taro开发微信小程序遇到的问题和解决方法参考文章: (1)Taro开发微信小程序遇到的问题和解决方法 (2)https://www.cnblogs.com/wuliujun521/p/114753 ...
taro开发微信小程序-播放轨迹(十一)
taro集成了地图后如何实现轨迹播放,暂停,停止呢?本身地图并不具备轨迹播放的能力,但是基于地图api可以实现轨迹播放的效果思路如下: 1.获取所有的轨迹坐标点-最好是数组格式的json 2.定义一 ...
Taro开发微信小程序（一）
Taro开发微信小程序(一) 技术栈框架:Taro v3.5.1 + React 数据流:redux CSS预处理: SASS 其他库:Taro-UI(目前用到的) 项目初始化 Taro框架搭建参 ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
用 Django 开发微信小程序后端实现用户登录
本文将介绍采用 Django 开发微信小程序后端,通过将用户模块进行重构,并采用JWT来进行用户认证,来解决以下问题: 微信小程序不支持 Cookie,因此不能采用 Django 默认的 Sessio ...
taro开发微信小程序
在京东凹凸实验室开发Taro跨平台早期之前,就已经进行Taro尝鲜了.开发这个实例猫眼电影已经过去几个月了.案例部分使用的是猫眼电影真实线上接口,关于订座的座位数据是自己模拟实现的,案例只供参考学习. ...
Taro 开发微信小程序入门与实战
目前比较流行的小程序开发框架主要有 WePY.Mpvue.Taro. WePY,Mpvue 是完全用 Vue 的开发方式来开发小程序,WePY 是比较早的小程序开发框架了,相对而言 Mpvue 的开发 ...
Taro开发微信小程序保持登录状态(本地存储)
Taro 一.Taro官网链接 Taro是由凹凸实验室倾力打造的一个开放式跨端跨框架解决方案,支持使用React.Vue.js.Nerv等框架来开发小程序.H5.react Native等应用. ...
taro开发微信小程序禁止下拉刷新(ios下拉出现空白问题)
一.问题描述最近用tarojs在做一个小程序项目时,首页需要禁止下拉刷新,于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全 ...

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

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

最新文章

热门文章