react+taro-JYwebApp模板集成方案項(xiàng)目搭建【1】
本章節(jié)：
講述基于react+taro-JYwebApp，項(xiàng)目的基礎(chǔ)搭建。本主題講述了react+taro-JYwebApp 、webapp模板-集成方案祷舀，從零到一的手寫搭建全過程儡循。
該項(xiàng)目不僅是一個(gè)持續(xù)完善、高效簡潔的webapp模板赃份，還是一套企業(yè)級webapp開發(fā)集成方案，致力于打造一個(gè)與時(shí)俱進(jìn)、高效易懂抓韩、高復(fù)用纠永、易維護(hù)擴(kuò)展的應(yīng)用方案。
項(xiàng)目開始搭建時(shí)間：2020-06-11
環(huán)境準(zhǔn)備
1谒拴、安裝 tarojs/cli
cnpm install -g @tarojs/cli
2尝江、初始化項(xiàng)目
taro init myApp
3、項(xiàng)目運(yùn)行
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的結(jié)構(gòu)
import{createStore,applyMiddleware}from'redux'
importthunkMiddlewarefrom'redux-thunk'
import{createLogger}from'redux-logger'
importrootReducerfrom'./reducers/index'
constmiddlewares=?[
thunkMiddleware,
createLogger()
]
exportdefaultfunctionconfigStore()?{
conststore=createStore(rootReducer,applyMiddleware(...middlewares))
returnstore
}
reducers/index.js
import{combineReducers}from'redux'
importbasefrom'./base'
exportdefaultcombineReducers(Object.assign({
base
},?{
}))
reducers/base.js
importTarofrom'@tarojs/taro'
import{THEME_COLOR}from'@/utils/constant'
import{UPDATE_TOKEN}from'../constants/base'
constLOCAL_TOKEN='token'
constINITIAL_STATE=?{
//?主題色
themeColor:THEME_COLOR,
//?認(rèn)證Token
token:Taro.getStorageSync(LOCAL_TOKEN)?||'',
}
exportdefaultfunctionbase(state=INITIAL_STATE,action)?{
switch(action.type)?{
//?更新token
caseUPDATE_TOKEN:
Taro.setStorageSync(LOCAL_TOKEN,action.payload)
return{
...state,
token:action.payload||''
??????}
default:
returnstate
??}
}
constants/base.js
exportconstUPDATE_TOKEN='upateToken'
actions/base.js
import{
UPDATE_TOKEN
}from'../constants/base'
exportconstupdateToken=?(token)=>{
return{
type:UPDATE_TOKEN,
payload:token||''
????}
}
組件調(diào)用
importTaro,?{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))
??}
}))
exportdefaultclassIndexextendsComponent{
componentWillMount()?{?}
componentDidMount()?{
this.props.updateToken('zxb')
console.log(this.props)
??}
componentWillUnmount()?{?}
componentDidShow()?{?}
componentDidHide()?{?}
/**
???*?指定config的類型聲明為:?Taro.Config
???*
???*?由于?typescript?對于?object?類型推導(dǎo)只能推出?Key?的基本類型
???*?對于像?navigationBarTextStyle:?'black'?這樣的推導(dǎo)出的類型是?string
???*?提示和聲明?navigationBarTextStyle:?'black'?|?'white'?類型沖突,?需要顯示聲明類型
???*/
config:Config=?{
navigationBarTitleText:'首頁'
??}
render()?{
console.log(this.props)
return(
<ViewclassName='index'>
<Text>Hello?world223!</Text>
<Text>{this.props.token}</Text>
</View>
????)
??}
}
本章節(jié)總結(jié)：講述基于tarojs/cli善延，
項(xiàng)目的基礎(chǔ)搭建少态。
1、tarojs/cli基礎(chǔ)配置
2易遣、@符號配置
3彼妻、redux基礎(chǔ)配置（集成到props）
4、ie瀏覽器兼容測試
下章節(jié)請關(guān)注個(gè)人微信公眾號【微信悅】豆茫，
歡迎持續(xù)關(guān)注：taro-JYwebApp應(yīng)用集成模板
備注：（使用微信客戶端打開）
如需下載源代碼請聯(lián)系博主
（微信號：lovehua_5360）
你也可以選擇留言反饋
個(gè)人微信公眾號：【微信悅】
微信公眾號原文鏈接：react+taro-JYwebApp模板集成方案項(xiàng)目搭建【1】
分類:?taro-JYwebApp
標(biāo)簽:?taro-JYwebApp
