【笔记】快应用QuickApp(hap) -- 构建一个微博应用

时间:2023-11-28 19:35:26

一、背景

  在上次和小伙伴分享了快应用(后面简称hap)后,有很多待定的思路没有去尝试。这周有时间简单开发了一个热门微博的应用,主要涉及到的难点:富文本、长列表、画廊。这里将整个开发过程中遇到的问题以及解决思路和方法分享给大家,希望对想踩坑的各位有所帮助。

  代码:https://github.com/SmileSmith/quickapp-weibo

  PS:快应用目前好像还没有发布正式版,中间会包含一些吐槽(红字),欢迎指导和拍砖~

二、开发问题和难点记录

1、前期准备

  注意package.json中的toolkit和packager的版本号,表明hap工程toolkit的版本,建议执行 hap update --force更新到最新版本,支持更多特性。

"toolkit": "0.0.30",
"packager": "0.0.5"

  例如在写【原创】快应用QuickApp--HelloWorld体验中,这个版本还是0.0.26,babel还不支持stage2。目前0.0.30版本已经默认支持。

  执行 hap update --force会导致.babelrc和.eslintrc.json被刷新,请注意。

2、目录结构

  因之前项目的习惯,不喜欢直接将页面的文件夹放在src下面,改为统一放在src/pages下,在mainfest.json修改如下

  "router": {
    "entry": "pages/Home",
    "pages": {
      "pages/Home": { // 加上pages/
        "component": "index"
      },
      ...
  },
  "display": {
    "titleBarBackgroundColor": "#e6162d",
    "titleBarTextColor": "#eeeeee",
    "menu": true,
    "pages": {
      "pages/Home": { // 加上pages/
        "titleBarText": "主页",
        "menu": false
      },
      ...

3、内部接口封装

  内部接口中涉及异步操作的,大部分和微信小程序一样使用 success、fail 的回调实现。为方便后续开发,用Promise简单封装了内部接口,并保持接口名称与微信小程序一致。然后在app.ux中全局导入$app中。

  这样,在各个页面中就不需要反复写  import router from '@system.router';  或 var router = require(''@system.router''),直接使用this.$app.api()即可。

  详情见src/utils/mv.js、src/utils/app.ux

  【笔记】快应用QuickApp(hap) -- 构建一个微博应用【笔记】快应用QuickApp(hap) -- 构建一个微博应用【笔记】快应用QuickApp(hap) -- 构建一个微博应用

4、长列表使用内部组件List

  请先参考官方List教程说明,注意下面的性能优化建议,这里着重说明几点:

  1、List通过,对不同结构的列表元素设置不同type,对列表的元素设置唯一的tid,以实现DOM结构复用,提升滑动和渲染的性能表现

  2、官方说明中使用对象池概念的memList,在数据量大的情况下会导致渲染对象List丢失,这点和小程序很像。所以本项目没有使用memList的做法

  3、目前遇到两个问题

    (a) List中的子组件使用if和for进行判断渲染时,会刷新不及时。即修改了if中的条件,但是界面没有刷新

    (b)在List中嵌套for循环,for循环的子组件如果是可复用的DOM标签,会导致DOM节点被错误复用。表现为,下图中,a微博的图片出现在b微博中。

    

    <block for="(picIndex, pic) in backPics"> // image标签会因为复用,混乱地出现在不同的子元素中
      <image if="{{showIndex === picIndex}}" class="picture {{enterClass}}" src="{{pic}}" @swipe="changePic()"></image>
    </block>
  <text class="gallery"> // text中的span是行元素,不会复用,在List中嵌套这样的组件没问题。这里代码只做说明,格式有问题
    <block for="(picIndex, pic) in backPics">
      <span if="{{showIndex === picIndex}}" class="picture {{enterClass}}" src="{{pic}}" @swipe="changePic()"></span>
    </block>
  </text>>

【笔记】快应用QuickApp(hap) -- 构建一个微博应用

4、富文本

  官方的rich-text支持吃快应用格式的html字符串,所以微博接口返回的原生html字符串中含有icon等表情,不能使用。

  项目参考在小程序中的做法,先用正则过滤,并遍历形成内容数组,然后在template中for循环出来。详情见 src/components/richContent.ux

  目前有个问题:

  用text嵌入span和a,text中不支持image或其它形式的图片,无法展示表情icon。

  如果采用div嵌入text、a和image,又会遇到List中元素错乱问题。

5、画廊展示大图

  开始的做法,开发一个gallery组件,放在全局,然后通过消息控制,然而还是遇到List渲染问题。

  目前采用页面的做法,通过路由传参数。一是可以做到全屏,二是避开List优化的问题。详情见 src/pages/Gallery/index.ux

  利用stack覆盖的特性,将小图和加载动画放在下面,然后等待大图加载,大图加载完毕后会覆盖小图和加载动画。

  <stack class="gallery">
    <block for="(picIndex, pic) in backPics"> // 在列表中已经加载好的小图,保证用户能第一时间看到内容,虽然是模糊的
      <image if="{{showIndex === picIndex}}" class="picture {{enterClass}}" src="{{pic}}" @swipe="changePic()"></image>
    </block>
    <progress class="load-progress" type="circular"></progress> // 加载动画
    <block for="(picIndex, pic) in showPics"> // 大图,等待加载完毕后覆盖小图和动画
      <image if="{{showIndex === picIndex}}" class="picture {{enterClass}}" src="{{pic}}" @longpress="longpress" @swipe="changePic()"></image>
    </block>
    <div show="{{showIndex > 0}}" class="button left-button" @click="changePic({direction: 'right'})"><text>«</text></div>
    <div show="{{showIndex < showPics.length - 1}}"  class="button right-button" @click="changePic({direction: 'left'})"><text>»</text></div>
    <div class="button back-button" @click="closeGallery"><text>︽</text></div>
  </stack>

  目前有个问题:

  统一元素不支持同时监听click和swiper事件,所以无法实现点击返回列表

  大图渲染问题,实测大图在高宽比不超过屏幕时,显示正常;超过时(如长图片)会导致渲染模糊,越长越模糊:

【笔记】快应用QuickApp(hap) -- 构建一个微博应用

5、样式类问题

  • 没有样式继承,div中写的font-size只无效的,必须写在对应的text或span中
  • justify-content 不支持 space-around,可以用容器包裹,容器padding实现。
  • position只有fixed,要实现relative用padding调整位置
  • border不支持border-left写法,需要border: 0px solid #eeeeee; border-left: 1px;

5、Debugger

  在调试器中点击开始调试,在代码中打上debugger,就能调试了。

【笔记】快应用QuickApp(hap) -- 构建一个微博应用

三、总结

快应用整体还处于beat阶段,许多特性还有问题,希望官方尽快解决吧。整体写法偏向小程序,以后类似mpvue的东西应该也会出现;性能优于小程序,目前生态小,最大的问题还是推广。。。

之前想到的几个方向,目前还有两个在探索中,有结果再写吧。

1)组件 √

2)路由 √

3)原生接口 √

4)全局状态管理:考虑继承mobx或类似的flux组件

5)类型检测: 考虑用ts