背景
CSDN APP 中原有编辑器页面为纯H5适配,整体用户交互体验差,如何优化APP端编辑器用户体验是我们团队需要思考的问题。下面我们以iOS为例展开讨论。
一、方案调研
我们分析了几款国内内容发布的APP,如知乎、今日头条、简书,让我们来看看他们是如何实现APP编辑器功能的。
1、知乎APP编辑器实现方案
从图上可以看出:
a、知乎APP编辑器的输入标题内容为原生实现
b、知乎APP编辑器的正文部分为WebView
c、知乎APP编辑器的工具栏全部由原生实现
2、今日头条APP编辑器实现方案
从图上可以看出:
a、今日头条APP编辑器的输入标题内容与正文部分均为WebView实现
b、今日头条APP编辑器的工具栏全部由原生实现
3、简书APP编辑器实现方案
从图上可以看出:
a、简书APP富文本与MarkDown编辑器的内容区域(标题+正文)均为WebView实现,MarkDown预览功能也由WebView实现
b、简书APP编辑器的工具栏全部由原生实现
c、通过查看简书APP编辑器文件发现,编辑器是本地加载HTML JS等资源文件
综上所述,可以看出APP基本上都是是通过WebView + 原生交互方式来实现编辑器功能
方案选择
1、也是用Hybrid方案,由原生与H5混合开发。
2、将H5资源打包放到远端,APP首次打开应用,从远端下载编辑器资源包,本地加载资源文件。
3、如果资源版本发生变化,将从远程再次下载,覆盖原来本地资源。
4、通过JSBrigde 通信来实现工具栏与内容区域交互。
方案实现
1、资源下载
if (是否首次下载资源 || 是否需要更新资源) {//下载请求[CNNetManager getEditorResource:url {}];
}
2、功能结构
3、效果展示