| 今日份的学习

今日份的学习(5)

在flex布局中，踩过的坑

最开始的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
render(){
  const commentContent = this.state.data.length > 0 ? this.renderComment() : null;
  return (<div className='clubDerailWrap'>
    <InputArea/>  
    {commentContent}
    {
        this.state.data.length > 1 && (this.state.showCount !== this.state.data.length)?
        <ReadMore
            wrapStyle={{
                width: '48rem',
                height: '3rem',
                marginTop: '1.4rem',
                marginBottom: '2rem'
            }}
            imgWrap={{
                width: '100%',
                height: '100%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
            }}
            handleReadMore={() => {
                this.handleReadMore();
            }}/>
        :
        null
    }
  </div>);
}
1
2
3
4
5
6
7
8
9
.clubDerailWrap{
  flex: 13;
  background: rgba(116, 116, 116, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  overflow-y: auto;
}

期望的样子:

但实现出来，是这个样子:

注意，内容被压缩了

于是找了一个办法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
render(){
  const commentContent = this.state.data.length > 0 ? this.renderComment() : null;
  return (<div className='clubDerailWrap'>
      <div className='clubContentWrap'>
        <InputArea/>  
        {commentContent}
        {
            this.state.data.length > 1 && (this.state.showCount !== this.state.data.length)?
            <ReadMore
                wrapStyle={{
                    width: '48rem',
                    height: '3rem',
                    marginTop: '1.4rem',
                    marginBottom: '2rem'
                }}
                imgWrap={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}
                handleReadMore={() => {
                    this.handleReadMore();
                }}/>
            :
            null
        }
      </div>
  </div>);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.clubDerailWrap{
  flex: 13;
  background: rgba(116, 116, 116, 0.5);
  overflow-y: auto;
}

.clubDerailWrap .clubContentWrap{
  width: 100%;
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
}

关键在于，我新加了一个包裹的div给这个新加的包裹的div设置display:flex，而外层的父级只设置滚动这些。
并且要为新加的这个div设置一个min-height这样在缩放的过程中才能没有问题。

hybrid

客户端和前端混合开发

  • hybrid是什么,为何使用hybrid？

    • hybrid文字解释
      • 即混合，即前端和客户端的混合开发
      • 需要前端人员和客户端人员配合完成
      • 某些环节也可能涉及到server端
    • 存在价值
      • 可以快速迭代更新【关键】，无需APP审核
      • 体验流程(和NA的体验基本类似)
      • 减少开发和沟通成本，双端共用一套代码
    • webview
      • 是app中的一个组件
      • 用于加载h5页面，即一个小型的浏览器内核
    • file://协议
      • 一开始接触HTML开发，就已经使用了file协议
      • file协议(本地,快) http或https(网络加载,慢)

    • hybrid实现流程

      • 前端做好静态页面(html、css、js)将文件交给客户端
      • 客户端拿到前端的静态页面，以文件的形式存储在app中
      • 客户端在一个webview中
      • 使用file协议加载静态页面

  • 介绍一下hybrid更新和上线的流程

    • 分版本，有版本号，如201503051015
    • 将静态文件压缩成zip包，上传到服务端
    • 客户端每次启动，都去服务器端检查版本号
    • 如果服务端版本号大于客户端版本号，去下载最新的zip包
    • 下载完成之后解压，然后覆盖现有文件
    • 三个要点
      • 服务端的版本和zip包的维护
      • 更新zip包之前先对比版本号
      • zip包下载解压覆盖

  • hybrid和h5的区别

    • 优点
      • 体验更好，跟NA基本一致
      • 可快速迭代，无需审核
    • 缺点
      • 开发成本高。联调、测试、查bug都比较麻烦
      • 运维成本高
    • 适用场景
      • hybrid：产品的稳定功能，体验要求高，迭代频繁
      • h5：单次的运营活动(如红包)或不常用功能

  • 前端JS如何和客户端通信

    • 遗留问题
      • 新闻详情页适用hybrid，前端如何获取新闻内容？
      • 不能使用ajax。第一跨域，第二速度慢。
      • 客户端获取新闻内容，然后JS拿到内容，再渲染
    • js和客户端通信的基本形式
      • js访问客户端能力，传递参数和回调函数
      • 客户端通过回调函数返回内容
    • schema协议简介和使用
      • 之前介绍了http(s)和file协议
      • schema协议—前端和客户端通讯的约定
    • schema使用的封装
      • 通信的基本形式：调用能力、传递参数、监听回调
      • 对schema协议的理解和使用
      • 调用schema代码的封装
    • 内置上线
      • 好处：更快、更安全
ESC