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