Slog94_使用React框架进行前端开发6-白红宇

ArthurSlog

SLog-94

Year·1

Guangzhou·China

October 10th 2018

微信扫描二维码，关注我的公众号

夫轻诺必寡信多易必多难是以圣人犹难之故终无难矣

开发环境MacOS(Mojave 10.14 (18A391))

信息源

开始编码

本次更新的内容：

1. 在文件结构上，将四个主界面独立分开2. 四个主界面关联底部的TabBar3. 在工程的根目录下，提供一个config.json配置文件，提供后端地址 baseUrl4. 暂时为每一个界面配置一个less文件5. 四个主界面的每个界面的文件结构暂时分为三部分‘header’、‘bodyContainer’和‘bottom’复制代码

其中，再React框架中，父组件通过向子组件传递回调函数，使得子组件可以修改父组件中的值

在父组件件中，为四个主界面设定了paageId，分别是0、1、2、3，一起放入一个index对象中

同时把父组件的state中的pageId作为index对象的索引

然后在四个bottomTabBar上绑定点击事件

点击的同时，调用父组件里的函数，并把绑定在TabBar上的pageId传递过去

父组件调用setState（）方法，把pageId赋值给父组件state中的pageId

因此，父组件中 index对象的索引发生改变

页面重新渲染

这样就实现了四个主界面跳转的逻辑

以下是相关的代码：

./App.js

////// 构造虚拟dom对象///import React, { Component } from 'react'// 引入四个主界面import StoreIndex from './pages/storeIndex/index'import ShoppingCart from './pages/shoppingCart/index'import PromotionCenter from './pages/promotionCenter/index'import PersonalCenter from './pages/personalCenter/index'// 引入配置文件import Config from './config.json'class App extends Component {  constructor() {    super()    this.state = { padeId: [] }  }  render() {    // 把四个主界面放在 index 对象里，根据 pageId 的值，选择渲染的界面    // 例如：    // padeId = 0，意思就是渲染 StoreIndex 界面    // padeId = 1，意思就是渲染 ShoppingCart 界面    // padeId = 2，意思就是渲染 PromotionCenter 界面    // padeId = 3，意思就是渲染 PersonalCenter 界面    const index = [
    
      this.changePage(pageId)} />, 
     
       this.changePage(pageId)}/>, 
      
        this.changePage(pageId)}/>, 
       
         this.changePage(pageId)}/>]    return 
        
               {index[this.state.pageId]}    
        
  }  // componentDidMount  // 参考链接： https://reactjs.org/docs/react-component.html#componentdidmount  //  // componentDidMount()在页面加载之前执行  componentDidMount() {    this.loadData()    console.log('componentDidMount OK')    // 载入StoreIndex页面    this.setState({      pageId: 0    })  }  changePage(pageIds){    this.setState({      pageId: pageIds    })  }}// 导出虚拟dom对象，供主函数进行数据插入和最终webapp渲染export default App;复制代码

./pages/storeIndex/bottom/Bottom.jsx

import React, { Component } from 'react'const bottomStyle = { backgroundColor: '#FFFFFF', position: "fixed", bottom: 0, height: 128, width: '100%', fontSize: 28, textAlign: 'center' }const bottomTabBarStyle = { display: 'flex', alignItems: 'stretch', backgroundColor: '#FFFFFF', height: 128 }const bottomTabBarItemStyle = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '33.3%', marginLeft: '1px', marginRight: '1px' }const bottomTabBarItemStyleLeft = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '33.3%', marginLeft: '0.5px', marginRight: '1px' }const bottomTabBarItemStyleRight = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '33.3%', marginLeft: '1px', marginRight: '0.5px' }const bottomTabBarItemImg = { height: '88px', width: '88px', textAlign: 'center', lineHeight: '88px', backgroundColor: '#FFFFFF' }const bottomTabBarItemText = { height: '40px' }class Bottom extends Component {    render() {        return 
                
                     
                          
       
        图片
       
                    
       
        商城首页
       
                
      
                
                          
       
        图片
       
                    
       
        购物车
       
                
      
                
                          
       
        图片
       
                    
       
        推广中心
       
                
      
                
                          
       
        图片
       
                    
       
        个人中心
       
                
      
            
     
        
    
    }    touchBottomTabBar(e) {        this.props.changePage(e)    }}export default Bottom复制代码

在开发的过程中常会碰到一些不太理想的情况

所以需要以结果为导向先把基础功能实现出来

工程文件已经上传至

距离一个基础的商城还缺点东西下次接着补充

至此，完成了四个主界面的文件结构的调整以及底部TabBar的关联和跳转逻辑。

欢迎关注我的微信公众号 ArthurSlog

微信扫描二维码，关注我的公众号

如果你喜欢我的文章欢迎点赞留言

谢谢