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

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

2
回复
436
查看
[复制链接]

3

主题

5

帖子

40

积分

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

实现首页

商城快应用新首页

商城快应用新首页
新首页截图

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

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

  • <div class="wrap translate">
  •   <stack>
  •       <refresh>...因为有下拉刷新,主页面内容置于refresh组件中</refresh>
  •       <div class="select">...头部筛选</div>
  •       <div class="fixedTop">...吸顶</div>
  •       <div class="footer">...吸底</div>
  •   </stack>
  • </div>


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

2 课程卡片
这里我们遇到了一个标题折行的问题,期望的展示方式是,主标题可以在最左则开始折行
193219aq2vgvw20bifzoz2.png
但实际上,快应用的文本必须置于 text 元素下,标题左侧的小标签无法设置宽度。因为text 标签下只能使用 span 和 a 两种子元素,这两种子元素无法设置宽高和背景色,那么就只能展示纯文字了。

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

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

  • <stack>
  •     <text class="title">
  •       <span class="item">拼团</span>
  •       <span class="item">英语</span>
  •       <span class="main">【2017-暑】英语直播中考高分班 初一英语直播提高班(人教版)</span>
  •     </text>
  •     <div class="label">
  •       <text class="item pintuan">拼团</text>
  •       <text class="item english">英语</text>
  •     </div>
  • </stack>


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

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

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

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

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

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

年级选项的布局,我们使用了 justify-content: space-between; 属性,每一行正常都会展示3个选项,但如果只有2个时(一般在最后一行),就会变成左右布局,中间空了一项。这实际上是一个flex布局的通病,我们的解决办法是在数据上做了抹平,以空元素进行占位,但不显示空元素。下图为占位元素,实际情况下需做透明处理。
192917bo99r97mkh907s46.png
5 tabs换切
首页最核心的功能,就是进行tabs的切换来加载不同的数据列表。这里使用官方的 refresh 和 tabs 组件,需要注意的是,refresh 组件需要套在 tabs 组件外层使用。如图:
192944ul20tgqi0xgwuqit.png
还有一点就是,tabs 组件切换时,需要调用接口刷新数据,这里需要做一个全局的数据缓存,如果是请求过的页面,就不再重新加载了,除非进行手动刷新才更新数据。

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

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

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

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

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

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

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

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

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

7.6 border-bottom-left-radius
该属性在预览开发模式无效,但在真机上调试时正常,因为预览模式和真机上运行的代码是不同的编译结果,所以肯定会有一些细节差异。但是为了快速开发的需要,我们必须保证项目在ide预览模式下大致可用,这样就不用每次都进行直机调试了。


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


回复

使用道具 举报

275

主题

488

帖子

4315

积分

2019-8-9 14:38:32 显示全部楼层
感谢楼主分享~~~
官方客服微信:kuaiyingyongguanKF
官方QQ群:807529091
回复

使用道具 举报

3

主题

25

帖子

140

积分

2019-10-17 16:53:54 显示全部楼层
赶紧更新啊 大佬  期待一个分享
回复

使用道具 举报

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