Taro Development Diary-3 Home Login

Posted Jun 27, 20204 min read

Goals

The home page hopes to be made. If there is no information, it will be empty.
Can display the current user's nickname and avatar
image.png
image.png

Using mobx

  1. First create an unserInfo.ts file in the store folder, where counter.ts that are not needed in the store can be deleted.

    //Introduce observable;
    import {observable} from'mobx';

    const userInfoStore = observable({
    //Objects storing basic user information
    userInfo:{},
    //Method of writing information
    saveInfo(userInfo:userinfo) {

     if(this!.userInfo) {
       this.userInfo = Object.assign({}, this.userInfo, userInfo);
     }

    }
    });
    export default userInfoStore;

//src\app.tsx
//Introduce userInfoStore under src\app.tsx
import userInfoStore from'./store/userInfo';

const store = {
  userInfoStore
};


//src\pages\index\index.tsx
//Introduce mobx decorator
import {observer, inject} from'@tarojs/mobx';
import'./index.scss';


//Edit the props interface type under src\pages\index\index.tsx
type PageStateProps = {
  //Add userInfoStore
  userInfoStore:{
    userInfo:any;
    saveInfo:Function;
  };
};

interface Index {
  props:PageStateProps;
}

//Inject userInfoStore
@inject('userInfoStore')
@observer
class Index extends Component {}

Attachment 1:@inject decorator
image.png
You can see that the inject decorator will pass the specified store as the props of the page component to the page. So userInfoStore here is passed in indexPage in props

Modify the srcpagesindexindex.tsx file

import {ComponentType} from'react';
import Taro, {Component, Config} from'@tarojs/taro';
import {View, Button} from'@tarojs/components';
import {AtAvatar} from'taro-ui';

//Introduce mobx decorator
import {observer, inject} from'@tarojs/mobx';
import'./index.scss';

//Edit the props interface type under src\pages\index\index.tsx
type PageStateProps = {
  //Add userInfoStore
  userInfoStore:{
    userInfo:userinfo;
    saveInfo:Function;
  };
};

interface Index {
  props:PageStateProps;
}

//Inject userInfoStore
@inject('userInfoStore')
@observer
class Index extends Component {
  config:Config = {
    navigationBarTitleText:'Home'
  };

  /**
   * @description:Get user information
   * Basic user information returned by @param {Object} detail onGetUserInfo
   * @return null
   */
  getUserInfo({ detail }) {
    const {userInfoStore} = this.props;
    userInfoStore.saveInfo(detail.userInfo);
  }

  render() {
    const {userInfo} = this.props.userInfoStore;
    return(
      <View className='index'>
        {/* buttonUse getUserInfo to get basic user information in a small program */}
        <Button
          openType='getUserInfo'
          onGetUserInfo={this.getUserInfo.bind(this)}
          className='index-avatarUrl-btn nobtn-style'
        >
          <View className='avatar-box'>
            <AtAvatar
              image={userInfo.avatarUrl}
              size='large'
              circle
              text={userInfo.avatarUrl?'':'Empty'}
            ></AtAvatar>
          </View>

          <View className='nickName-box'>
            {userInfo.nickName ||'Click to login'}
          </View>
        </Button>
      </View>
   );
  }
}

export default Index as ComponentType;


//src\pages\index\index.scss
@mixin cubeBox($w) {
  width:$w;
  height:$w;
  line-height:$w;
}

.index {
  .index-avatarUrl-btn {
    text-align:center;
    margin:200px auto;
  }

  .avatar-box {
    display:inline-block;
    .at-avatar--large {
      @include cubeBox(240px);
    }
  }
  .nickName-box {
    font-size:28px; /*px*/
    color:#ddd;
  }
}

//Remove the button's native style
.nobtn-style {
  border:none;
  background-color:transparent;
  line-height:normal;
  padding:0;
  margin:0;
  text-align:left;
}
.nobtn-style::after {
  border:none;
}

Up to this page, you can obtain user information by clicking on the avatar and store it in mobx;

Storing data locally

Before, the landing page can get and display the user's avatar
However, we cannot require users to authorize avatars and nicknames each time they are used, so we need to find a place to store user information.

So modify userInfoStore first

//src\store\userInfo.ts
//Introduce observable;
import {observable} from'mobx';
import {setStorageSync, getStorageSync} from'@tarojs/taro';

const userInfoStore = observable({
  //Objects storing basic user information
  userInfo:{},
  //Method of writing information
  saveInfo(userInfo:userinfo) {
    if(this!.userInfo) {
      this.userInfo = Object.assign({}, this.userInfo, userInfo);
      //Store the data locally while maintaining user information
      //setStorageSync documentation https://taro-docs.jd.com/taro/docs/apis/storage/setStorageSync
      setStorageSync('userInfo', this.userInfo);
    }
  },
  //Read user information from local
  readInfo() {
    const userInfo = getStorageSync('userInfo');
    this.userInfo = Object.assign({}, this.userInfo, userInfo);
  }
});
export default userInfoStore;

Modify srcpagesindexindex.tsx

import {ComponentType} from'react';
import Taro, {Component, Config} from'@tarojs/taro';
import {View, Button} from'@tarojs/components';
import {AtAvatar} from'taro-ui';

//Introduce mobx decorator
import {observer, inject} from'@tarojs/mobx';
import'./index.scss';

//Edit the props interface type under src\pages\index\index.tsx
type PageStateProps = {
  //Add userInfoStore
  userInfoStore:{
    userInfo:userinfo;
    saveInfo:Function;
    readInfo:Function;
  };
};

interface Index {
  props:PageStateProps;
}

//Inject userInfoStore
@inject('userInfoStore')
@observer
class Index extends Component {
  config:Config = {
    navigationBarTitleText:'Home'
  };

  /**
   * @description:Get user information
   * Basic user information returned by @param {Object} detail onGetUserInfo
   * @return null
   */
  getUserInfo({ detail }) {
    const {userInfoStore} = this.props;
    userInfoStore.saveInfo(detail.userInfo);
  }

  //Add didshow hook to execute every time the page is displayed
  componentDidShow() {
    const {userInfoStore} = this.props;
    //Read user information when the page is displayed
    userInfoStore.readInfo();
  }
  render() {
    const {userInfo} = this.props.userInfoStore;
    return(
      <View className='index'>
        {/* buttonUse getUserInfo to get basic user information in a small program */}
        <Button
          openType='getUserInfo'
          onGetUserInfo={this.getUserInfo.bind(this)}
          className='index-avatarUrl-btn nobtn-style'
        >
          <View className='avatar-box'>
            <AtAvatar
              image={userInfo.avatarUrl}
              size='large'
              circle
              text={userInfo.avatarUrl?'':'Empty'}
            ></AtAvatar>
          </View>

          <View className='nickName-box'>
            {userInfo.nickName ||'Click to login'}
          </View>
        </Button>
      </View>
   );
  }
}

export default Index as ComponentType;

In this way, if there is user information stored in the local Storage, there is no need to obtain the user's basic information every time.

git address