本章節(jié)：
講述基于react+taro-JYwebApp，項目的基礎搭建。本主題講述了react+taro-JYwebApp 、webapp模板-集成方案，從零到一的手寫搭建全過程。

該項目不僅是一個持續(xù)完善、高效簡潔的webapp模板，還是一套企業(yè)級webapp開發(fā)集成方案，致力于打造一個與時俱進、高效易懂、高復用、易維護擴展的應用方案。

  項目開始搭建時間：2020-06-11

cnpm install -g @tarojs/cli

taro init myApp

npm run dev:h5

npm run dev:weapp

cnpm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger

import { createStore, applyMiddleware } from 'redux'import thunkMiddleware from 'redux-thunk'import { createLogger } from 'redux-logger'import rootReducer from './reducers/index'const middlewares = [

    thunkMiddleware,

    createLogger()

]



export default function configStore() {const store = createStore(rootReducer, applyMiddleware(...middlewares))return store

}

import { combineReducers } from 'redux'import base from './base'export default combineReducers(Object.assign({  base}, {


}))

import Taro from '@tarojs/taro'import { THEME_COLOR } from '@/utils/constant'import { UPDATE_TOKEN } from '../constants/base'const LOCAL_TOKEN = 'token'const INITIAL_STATE = {  // 主題色
  themeColor: THEME_COLOR,  // 認證Token
  token: Taro.getStorageSync(LOCAL_TOKEN) || '',

}



export default function base(state = INITIAL_STATE, action) {  switch (action.type) {// 更新tokencase UPDATE_TOKEN:

      Taro.setStorageSync(LOCAL_TOKEN, action.payload)      return {

        ...state,

        token: action.payload || ''  }default:      return state

  }

}

export const UPDATE_TOKEN = 'upateToken'

import {

    UPDATE_TOKEN

} from '../constants/base'export const updateToken = (token) => {return {

        type: UPDATE_TOKEN,

        payload: token || ''}

}

import Taro, { Component, Config } from '@tarojs/taro'import { View, Text } from '@tarojs/components'import { connect } from '@tarojs/redux'import { updateToken } from '@/store/actions/base'import './index.scss'@connect(({ base }) => ({

  ...base}), (dispatch) => ({

  updateToken(token) {

    dispatch(updateToken(token))

  }

}))

export default class Index extends Component {



  componentWillMount() { }



  componentDidMount() {this.props.updateToken('zxb')

    console.log(this.props)

  }



  componentWillUnmount() { }



  componentDidShow() { }



  componentDidHide() { }  /**

   * 指定config的類型聲明為: Taro.Config

   *

   * 由于 typescript 對于 object 類型推導只能推出 Key 的基本類型

   * 對于像 navigationBarTextStyle: 'black' 這樣的推導出的類型是 string

   * 提示和聲明 navigationBarTextStyle: 'black' | 'white' 類型沖突, 需要顯示聲明類型   */

  config: Config = {

    navigationBarTitleText: '首頁'

  }



  render() {

    console.log(this.props)return (      <View className='index'>

        <Text>Hello world223!</Text>

        <Text>{this.props.token}</Text>

      </View>)

  }

}