请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 快应用开发商城app的实践分享(二)

1
回复
147
查看
[复制链接]

2

主题

3

帖子

25

积分

 楼主| 2019-8-8 19:40:45 显示全部楼层 |阅读模式
本帖最后由 banyongji 于 2019-8-8 19:40 编辑

页面布局
1 元素层级
快应用元素的position属性仅支持 fixed 布局,且不支持 z-index 属性,所以需要借助 stack 元素来实现吸顶、吸底、遮罩、弹层等层叠布局,通过元素的先后顺序,来确认其优先级,越写在后边的元素优先级越高

由于吸顶和吸底功能需要使用 position:fixed 布局,如果在stack写一个页面弹层,它是无法覆盖吸顶和吸底的。所以需要将弹层元素也设置为position: fixed,这样它的优先级(因为在stack中,它位于吸顶和吸底元素之后)就超过了吸顶和吸底。代码如下:

  1. <div class="wrap translate">
  2.   <stack>
  3.       <refresh>
  4.         ...因为有下拉刷新,主页面内容置于refresh组件中
  5.       </refresh>
  6.       <div class="select">
  7.         ...头部筛选
  8.       </div>
  9.       <div class="fixedTop">
  10.         ...吸顶
  11.       </div>
  12.       <div class="footer">
  13.         ...吸底
  14.       </div>
  15.     </div>
  16.   </stack>
  17. </div>
复制代码

总结:随着组件越写越多,发现大部分都需要以一个 stack 元素作为最外层的container,这样写子元素时会有很多便利。但需要注意,一个组件尤其是子组件,最好在 stack 元素外层再多包一个 div元素作为最外层元素,不然会在组件给合的时候,遇到样式错乱的问题

2 课程卡片
这里我们遇到了一个标题折行的问题,期望的展示方式是,主标题可以在最左则开始折行

4.png

但实际上,快应用的文本必须置于 text 元素下,标题左侧的小标签无法设置宽度。因为text 标签下只能使用 span 和 a 两种子元素,这两种子元素无法设置宽高和背景色,那么就只能展示纯文字了

所以,我们想将标签放置于标题内部,当作h5的 inline-block元素来使用,就难以行得通,实际上快应用也不支持 inline-block 属性

想到的解决办法,还是利用 stack 的思想,将真实标签和标题分离成两层。需要注意的是,标题层里需要保留标签层里的文本,因为最终还是需要这些文本来实现占位(只占位不显示,显示的是外层的真实标签),代码如下:

  1. <stack>
  2.     <text class="title">
  3.       <span class="item">拼团</span>
  4.       <span class="item">英语</span>
  5.       <span class="main">【2017-暑】英语直播中考高分班 初一英语直播提高班(人教版)</span>
  6.     </text>
  7.     <div class="label">
  8.       <text class="item pintuan">拼团</text>
  9.       <text class="item english">英语</text>
  10.     </div>
  11. </stack>
复制代码


但问题是这些文本,无法设置宽度,我们就想到通过增大字号,来让标题内部的标签文本宽度大体上和外层真实的标签大致相同,从而解决标题自动换行的问题

快应用的元素和组件,很多时候不同于h5。比如,span是格式化的文本,只能作为text、a和span的子组件,等等,使用时需要认真阅读官方文档

3 搜索组件
1.png

搜索组件一共分三部分,左侧是年级筛选,右则为地区筛选,中间是自适应宽度的搜索框。

快应用元素默认都是flex布局,左右侧两个子元素都是固定宽度,所以需要让中间的子元素(搜索框)来自适应宽度,只需要加一个 flex-grow: 1 属性,这意味着搜索框可放大,如果值为0则存有剩余空间也不会放大

4 年级和地区弹层

快应用支持以animation的方式添加进场动效,只需要在弹层组件外层添加一个 translate 的类名即可。

写出场动效需要注意,添加完 translate 出场类名后,需要在动画执行(比如1s)后再销毁或隐藏弹层组件

年级选项的布局,我们使用了 justify-content: space-between; 属性,每一行正常都会展示3个选项,但如果只有2个时(一般在最后一行),就会变成左右布局,中间空了一项。这实际上是一个flex布局的通病,我们的解决办法是在数据上做了抹平,以空元素进行占位,但不显示空元素。下图为占位元素,实际情况下需做透明处理

2.png

5 tabs换切

首页最核心的功能,就是进行tabs的切换来加载不同的数据列表。这里使用官方的 refresh 和 tabs 组件,需要注意的是,refresh 组件需要套在 tabs 组件外层使用。如图:

3.png

还有一点就是,tabs 组件切换时,需要调用接口刷新数据,这里需要做一个全局的数组缓存,如果是请求过的页面,就不再重新加载了

6 show指令的用法

组件的最外层元素上不可使用show和if。另外,stack元素上不可使用show,但可以使用if

show 指令开始支持在自定义组件上进行声明1050+,当这样使用时,等同于在该自定义子组件的根节点上使用 show 指令

对于之前版本,自定义组件不支持 show 指令的需求,可以通过 props 传入参数,在自己内部使用 show 来控制是否可见

show指令的条件,如果是空字符串,则会被判为存在,要小心使用

7 其它布局问题
7.1 flex没有 border-box: box-sizing 属性

7.2关于图片点击区域
img标签的区域会包括 padding 的范围,所以要扩大点击区的域的话,最好把事件加在一个wrap元素上

7.3 list组件
list的子元素 list-item 和 div 不要并列使用,外层统一为 list-item

7.4block透明节点元素
可以使用<block>实现更为灵活的循环/条件渲染。要注意<block>目前只支持 for 和 if/elif/else 属性

7.5text设置行高
如果 text 下有 span 等子元素,那么必须将 line-height 属性设置在span上才能生效。如果 text下没有子元素,则可以直接设置

7.6 border-bottom-left-radius在预览开发模式无效
可在真机上调试。实际上,这种不同步的情形普通存在。但是为了快速开发的需要,我们有必须保证项目在ide预览模式下大致可用,这样就不用每次都进行直机调试了

未完待续
上一章:快应用开发商城app的实践分享(一)- 快速开发和调试
下一章:快应用开发商城app的实践分享(三)- 数据和通信


回复

使用道具 举报

250

主题

438

帖子

3985

积分

2019-8-9 14:38:32 显示全部楼层
感谢楼主分享~~~
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册