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'});
}

這樣就實現了簡單的登入登出功能，希望給入門的朋友帶來一點幫助，謝謝。