How to use @tarojs/taro - 10 common examples

componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      
    )
  }
}

Taro.render(, document.getElementById('app'))

try {
      sessionResponse = await Taro.request({
        method: 'POST',
        url: `${envConfig.WECHAT_HOST}/oauth/wechat/session`,
        data: loginResponse,
      });

      if (sessionResponse && sessionResponse.data) {
        Taro.setStorageSync('openId', sessionResponse.data.openid);
        Taro.setStorageSync('sessionKey', sessionResponse.data.session_key);
      }
    } catch (e) {
      console.log(e);
      setLoginLoading(false);
      await Taro.showToast({ title: '获取 Key 失败' });

      return;
    }

    console.log('sessionResponse', sessionResponse);

    //
    // ------------------------------------
    let userInfoResponse: {
      encryptedData: string;
      iv: string;
      rawData: string; // JSON string
      signature: string;
      userInfo: {
        avatarUrl: string;
        city: string;

componentWillMount () {
    console.log('doingWillMount')
    this.props.dispatch({
      type: 'doing/save',
      payload: {
        lastsign: Taro.getStorageSync('lastsign'),
        days: Taro.getStorageSync('days'),
        healthPercent: parseInt(Taro.getStorageSync('unitamount') / 20 * Taro.getStorageSync('days')),
        moneyPercent: parseInt(Taro.getStorageSync('unitprice') / Taro.getStorageSync('unitamount') * Taro.getStorageSync('amount') * Taro.getStorageSync('days') / 10),
        rewardPercent: Taro.getStorageSync('days') / 10
      },
    })
    // if(Date.parse(new Date()) - Taro.getStorageSync('lastsign')>= 864000000){
    //   this.props.dispatch({
    //     type: 'doing/allowSign'
    //   };
    // }
  }

console.log('userInfoResponse', userInfoResponse);

    //
    // ------------------------------------
    let decryptDataResponse;

    try {
      const sendData = {
        encryptedData: userInfoResponse.encryptedData,
        iv: userInfoResponse.iv,
        sessionKey: Taro.getStorageSync('sessionKey'),
        platform: 'wechatminiprogram',
      };

      decryptDataResponse = await Taro.request({
        method: 'POST',
        url: `${envConfig.WECHAT_HOST}/oauth/wechat/decrypt-data`,
        data: sendData,
      });

      Taro.setStorageSync('userInfo', decryptDataResponse.data);

      if (props.onLoginCallback) {
        props.onLoginCallback(new Date().getTime());
      }
    } catch (e) {
      setLoginLoading(false);
      await Taro.showToast({ title: '获取 Decrypt Data 失败' });
    }

    console.log('decryptDataResponse', decryptDataResponse);

loadWXACode() {
    const { repo, url } = this.state
    const path = '/pages/repo/repo?url=' + encodeURI(url) + '&share=true'
    let that = this
    Taro.showLoading({title: GLOBAL_CONFIG.LOADING_TEXT})
    wx.cloud.callFunction({
      // 要调用的云函数名称
      name: 'wxacode',
      // 传递给云函数的event参数
      data: {
        path: path,
        name: `${repo.owner.login}_${repo.name}`
      }
    }).then(res => {
      console.log('wxacode', res)
      if (res.result && res.result.length > 0) {
        that.generatePoster(res.result[0].tempFileURL)
      } else {
        Taro.hideLoading()
      }
    }).catch(err => {

handleOpenResult = async () => {     
    Taro.showLoading({
      title: '照片生成中...',
      mask: true,
    }) 
    const canvasImageUrl = await this.createCanvas()
    console.log('canvasImageUrl', canvasImageUrl)
    Taro.hideLoading()
    this.setState({
      result: {
        url: canvasImageUrl,
        show: true
      }
    })
  }
  // 再玩一次

let sessionResponse: {
      data: {
        openid: string;
        session_key: string;
      };
    };

    try {
      sessionResponse = await Taro.request({
        method: 'POST',
        url: `${envConfig.WECHAT_HOST}/oauth/wechat/session`,
        data: loginResponse,
      });

      if (sessionResponse && sessionResponse.data) {
        Taro.setStorageSync('openId', sessionResponse.data.openid);
        Taro.setStorageSync('sessionKey', sessionResponse.data.session_key);
      }
    } catch (e) {
      console.log(e);
      setLoginLoading(false);
      await Taro.showToast({ title: '获取 Key 失败' });

      return;
    }

    console.log('sessionResponse', sessionResponse);

    //
    // ------------------------------------
    let userInfoResponse: {
      encryptedData: string;

data: {
        openid: string;
        session_key: string;
      };
    };

    try {
      sessionResponse = await Taro.request({
        method: 'POST',
        url: `${envConfig.WECHAT_HOST}/oauth/wechat/session`,
        data: loginResponse,
      });

      if (sessionResponse && sessionResponse.data) {
        Taro.setStorageSync('openId', sessionResponse.data.openid);
        Taro.setStorageSync('sessionKey', sessionResponse.data.session_key);
      }
    } catch (e) {
      console.log(e);
      setLoginLoading(false);
      await Taro.showToast({ title: '获取 Key 失败' });

      return;
    }

    console.log('sessionResponse', sessionResponse);

    //
    // ------------------------------------
    let userInfoResponse: {
      encryptedData: string;
      iv: string;

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtCountdown } from 'taro-ui'
import DocsHeader from '../../components/doc-header'
import './index.scss'

export default class CountDownPage extends Taro.Component {
  config = {
    navigationBarTitleText: 'Taro UI'
  }

  onTimeUp () {
    Taro.showToast({
      title: '时间到',
      icon: 'success',
      duration: 2000
    })
  }

  render () {
    return (

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTimeline } from 'taro-ui'
import DocsHeader from '../../components/doc-header'
import './index.scss'

export default class TimelinePage extends Taro.Component {
  config = {
    navigationBarTitleText: 'Taro UI'
  }

  render () {
    return (