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'});
}
这样就实现了简单的登录登出功能,希望给入门的朋友带来一点帮助,谢谢。