2019年6月工作总结

发表于 更新于 分类于 ，
本文字数： 2.5k 阅读时长 ≈ 4 分钟

6月让上线一款快应用，一边产品经理想让我开发另一款小程序，一边boss想快速上线快应用，预计的开发时间未三周，实际用了一个月多，其中有两周踩坑融云IM系统，初始一周老大想让我修改融云的SDK兼容快应用，奈何能力有限几千行的代码看着真心头疼，道行不够深。最后用了H5的方式兼容融云，但是结果差强人意，快应用框架对H5页面的渲染根据手机平台和手机引擎有关，其中小米支持最好，华为可以单独上架。

反思

因为拖了一周左右的时间，所以反思一下，下次避免再发生（虽然开发拖进度是非常平常的事情）。

  • 看prd不细心，主要是prd和UI图不全，找了好几次UI补全UI图，prd缺少很多流程的截图，导致于少写了很多逻辑判断。
  • 没有合理规划项目周期，对整个项目还不是很了解的情况下就开始做了，应当梳理好逻辑、流程，合理框架设计之后再开始。
  • 总是忽略很多细节，反而很多细节花的时间多，总是觉得能实现，但是总是没有往深处想，没有模拟出整个操作流程。
  • 总是想复杂，应当梳理清楚进入页面的入口。

快应用API填坑

调试问题

调试可以设置真机页面不从头开始，建议编写样式时进行真机调试。

适配问题

想使用骚操作当然版本越新越好，注意样式问题，快应用中可支持的样式很有限，有些在编译器中预览没有任何毛病，但是真机调试能报一堆错误，所以建议开发的时候还是连着真机来吧。

参考链接：快应用的机型覆盖、场景覆盖、框架版本

巨坑的版本问题

最开始开发是基于1020开发的，然后自定义了一个list版本的picker组件（滑动选择器），但是但是，巨坑的来了，在想适配1020的时候list的scrollend事件和scrolltouchup事件只有1040+版本支持， 然而把manifast.json中最低支持版本改为1040版本的，自定义的picker组件中的list无法滑动，手机调试最好和手机支持平台一致，这样不用高版本去适配低版本（后期修改的部分会比较少）。

web组件使用问题

web端的部分方式放在快应用里面会失效，比如：

  • web端定位到页面底部，场景：聊天界面一进入要定位到页面最底端，web端有效果，但是在快应用中就失效了，新发送一条消息后页面自动下滑也会在快应用中失效。

    （这里记录一下发送消息时页面一直处于最底部的神奇方法，感谢LeeSiuha）

    消息的容器设置display:flex; flex-direction: column-reverse; ，同时消息列表需要进行array.reverse()，新消息需要进行array.unshift()的方式插入

  • 华为手机（荣耀9， v1040）网页实时刷新容易出现模糊情况。

  • 发送图片后web端能实时显示出图片，但是快应用端需要重新刷新页面才行。

error事件，能够成功渲染页面的手机都会触发error事件，建议最后上线使用https。

list使用

注意list-item 内部需谨慎使用指令 if 或 for，相同 type 属性的 list-item， DOM 结构必须完全相同，如果不得不操控显隐，需要使用show替代，但是show的使用也会有很多坑，在list-item中还行。

如果需要用到滚动事件只能使用list进行操作，滚动到底部进行加载，注意滚动事件的版本适配问题。

refresh组件使用

下拉刷新一定要使用refresh组件，并且控制下拉刷新状态，有两种下拉刷新样式可选。

但是在refresh中使用list会有设置scrollpage="true"时的莫名问题，样式显示不全。

因此homepage页面中整个页面大部分都是使用的list组件

巨坑无比的picker（bug）

没有小程序的picker的自由度高，很多的picker都是有特定的样式无法自定义修改，而且只有自带的弹框形式。所以最后利用了list的appear事件和scrollTo事件写了一个picker，但是有很多莫名其妙的问题，道行太浅，不太懂为什么，年月日选择器如果月份选择了小月（如二月）日期滚动到最后一天，那么再换到大月（如一月31天）则不会出现选中最后一天出现跳动情况，如果先选择了大月再选择小月日期滚动到最后一天则会出现选中不了最后一天并出现跳动情况（巨坑无比，我认为跟初次渲染日期list和快应用的框架的问题，暂时没有什么好的解决办法）

tabs组件

因为快应用没有类似微信小程序的tabs页设置，只能使用tabs组件，一个tab-bar对应tab-content中的一个子组件，如果不使用懒加载（快应用官方推荐）方式，使用tabs的页面初始化时会同时加载tab-content中的子组件。

@appear事件

在页面初始化的时候就会响应，显示在页面中的@appear事件都会响应一遍，注意不要陷入死循环中。但是我在list中使用很好用，在div中使用就有点不怎么好用了。

七牛云整合

为了方便直接使用的是七牛云的微信解决方案，但是微信解决方案的js中使用的是微信的api方式，所以需要将js中的微信api改写为快应用的api，其中微信上传api有上传进度而快应用中没有。

注意事项
  1. 注意通用样式，可支持的通用样式很少，有些特殊用法不支持，部分常规用法也不支持。
  2. 动态样式设置三元表达式中对象属性的嵌套方式无法取到值。

融云IM web SDK填坑

新手指引

开发环境和生产（上线）环境对应不同的App Key / Secret

Token（用户令牌），App Key 是您的 App 的唯一标识，Token 则是您 App 上的每一个用户的身份授权象征。

相关链接：

融云开源项目索引： https://www.rongcloud.cn/docs/open_source.html

VUE整合
表情输入
发送消息（消息类型）
已读消息，更新消息状态
获取消息列表

代码优化方向

删减重复代码

最开始没有想到可以使用传入上下文的方式获取app.ux中的数据，后面优化了部分代码。

很多重复使用的常量需要进行单独定义在一个常量文件中，便于管理和后期修改。

提取重复style样式

部分重复

基本类型和引用类型赋值问题

参考链接 http://hellobug.github.io/blog/javascript-variable-assignment/