本章節(jié)： 講述基于react+taro-JYwebApp，項(xiàng)目的基礎(chǔ)搭建。本主題講述了react+taro-JYwebApp 、webapp模板-集成方案，從零到一的手寫搭建全過程。 該項(xiàng)目不僅是一個(gè)持續(xù)完善、高效簡潔的webapp模板，還是一套企業(yè)級(jí)webapp開發(fā)集成方案，致力于打造一個(gè)與時(shí)俱進(jìn)、高效易懂、高復(fù)用、易維護(hù)擴(kuò)展的應(yīng)用方案。 項(xiàng)目開始搭建時(shí)間：2020-06-11 環(huán)境準(zhǔn)備 cnpm install -g @tarojs/cli taro init myApp
3、項(xiàng)目運(yùn)行 npm run dev:h5
npm run dev:weapp
cnpm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger 6、配置@
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, // 認(rèn)證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
}
}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 || ''}
}組件調(diào)用 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 對(duì)于 object 類型推導(dǎo)只能推出 Key 的基本類型
* 對(duì)于像 navigationBarTextStyle: 'black' 這樣的推導(dǎo)出的類型是 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>)
}
} |
|
|
