react+taro-JYwebApp模板集成方案專案搭建【1】

本章節：
講述基于react+taro-JYwebApp，專案的基礎搭建，本主題講述了react+taro-JYwebApp 、webapp模板-集成方案，從零到一的手寫搭建全程序，

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

  專案開始搭建時間：2020-06-11

環境準備

1、安裝 tarojs/cli

cnpm install -g @tarojs/cli

2、初始化專案

taro init myApp

3、專案運行

npm run dev:h5

npm run dev:weapp

 4、瀏覽器兼容性（IE 11測驗） IE11不支持

 5、使用redux

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

6、配置@

 store的結構

store/index.js

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

}

reducers/index.js

import { combineReducers } from 'redux'

import base from './base'

export default combineReducers(Object.assign({

  base

}, {


}))

reducers/base.js

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) {

    // 更新token

    case UPDATE_TOKEN:

      Taro.setStorageSync(LOCAL_TOKEN, action.payload)

      return {

        ...state,

        token: action.payload || ''

      }

    default:

      return state

  }

}

constants/base.js

export const UPDATE_TOKEN = 'upateToken'

actions/base.js

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>

    )

  }

}

本章節總結：講述基于tarojs/cli，

專案的基礎搭建，

1、tarojs/cli基礎配置

2、@符號配置

3、redux基礎配置（集成到props）

4、ie瀏覽器兼容測驗

下章節請關注個人微信公眾號【微信悅】，歡迎持續關注：http://mp.weixin.qq.com/mp/homepage?__biz=MzIyOTg4MzQyNw==&hid=14&sn=7d86ce3643d3da16c13052562e2f2484&scene=18#wechat_redirect
備注：（使用微信客戶端打開）

如需下載源代碼請聯系博主（微信號：lovehua_5360）

個人微信公眾號：【微信悅】

微信公眾號原文鏈接：https://mp.weixin.qq.com/s/mx5q737aWB-yHNsW3FyZxQ

標籤：JavaScript

上一篇：web前端 javascript 兼容低版本 IE 6 7 8復合寫法

下一篇：js 宣告變數規范和特殊變數情況