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的结构
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,
// 认证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||''
}
}
组件调用
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 类型推导只能推出 Key 的基本类型
* 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 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>
)
}
}
本章节总结：讲述基于tarojs/cli，
项目的基础搭建。
1、tarojs/cli基础配置
2、@符号配置
3、redux基础配置（集成到props）
4、ie浏览器兼容测试
下章节请关注个人微信公众号【微信悦】，
欢迎持续关注：taro-JYwebApp应用集成模板
备注：（使用微信客户端打开）
如需下载源代码请联系博主
（微信号：lovehua_5360）
你也可以选择留言反馈
个人微信公众号：【微信悦】
微信公众号原文链接：react+taro-JYwebApp模板集成方案项目搭建【1】
分类: taro-JYwebApp
标签: taro-JYwebApp
