一、 项目简介
-
功能描述
硕粉俱乐部 app 客户端
- 登录ZenTalk
- 浏览ZenTalk咨询
- 搜索、浏览、发表、管理帖子
- 管理个人信息
- 好友发送信息
- 三方登录
- FAQ 接入
-
Members
- Abbi
- Scott
- Venjee
- Vivian
-
开发时间：2016.1.29 ~ 2017.11 （开发结束）
二、 平台支持
三、 开发方式和架构内容
- 混合开发，Android + H5
- 首页、推荐、版块、组文章、帖子正文是H5开发
- 搜索、我的、UI外层框架等是Android Native开发
- 使用Git作为版本管理
- 使用Android Studio，WebStorm开发客户端
- 使用原始Discuz服务器 和 Spring Hibernate框架（新功能）
- 使用CN Store和升级服务器作为升级方式
- 使用个推作为推送方案
- 使用Android官网，github，Stackoverflow和codekk作为主要的知识查找
- 使用Lint, FindBugs, Android atutotest, monkey test做app代码和quanlity检查
- 使用个推作为推送方案
- app端在个推服务器注册Project
- app启动时通过api把userid和clientid传送到ZenTalk服务器
- ZenTalk服务器会依据userid,clientid实现全局推送，分组推送，单点推送（ZenTalk服务器依据userid确认分组）
四、 数据缓存机制
项目采用缓存：webview缓存和json数据/图片缓存
webview缓存
webview缓存跟服务器配置有关，一般webview设定后就可以支援断网后显示缓存数据
private void addWebViewCacheEnable(WebView webView){
WebSettings webSettings = webView.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//LOAD_DEFAULT
webSettings.setDomStorageEnabled(true);
webSettings.setDatabaseEnabled(true);
webSettings.setAppCachePath(getContext().getCacheDir().getAbsolutePath());
webSettings.setAppCacheEnabled(true);
}
json数据缓存
非实时性的接口（对实时显示要求不高的模块）
- splash 3s页面 - 页面加载ready后，更新json并保存。每次加载本地json - 页面加载ready后，获取user info并保存json数据
- user info - 点击我的更新数据（先显示old data)
其他要求实时性的接口：（不需要数据缓存）
- app update点击后,实时获取更新信息
- 更多内容”
- “收藏”，“提醒”，“消息”，“我的帖子”点击后，事实更新各自数据。
图片缓存
app端使用volley 库的图片缓存功能
五、 安全
服务器API加密机制 详见项目档案 : F:\Manager\ZenTalk\200-2 加密
六、 遇到的问题
-
H5 banner和 Native ViewPager滑动冲突
解决方案：上面H5 banner的上面区域禁止ViewPager滑动
-
推荐页面H5 “click to top” button 点击事件触发背景点击
推荐页面的to top button点击后，事件会穿透到下面的listview. 导致点击to top后会进入帖子正文。
解决方案：在image div后面叠加一个div，并在hide的时候延迟一下。css的touch会在300ms后出发click，因此这里400ms后再把遮挡div hide掉。
.html---------------- <div id="hide" class="float_icon"> </div> <div id = "totop" class="float_icon"> <img src="images/btn_top.png" width="100%" height="100%"> </div> .js----------------- $(document).scroll(function(){ if($(document).scrollTop()>0){ hide.show(); floatIcon.show(); }else{ setTimeout("hide.hide()",400); floatIcon.hide(); } }); -
Webview缓存机制，设定为default后不work
详见：F:\Manager\ZenTalk\html缓存
-
账号整合问题
ZenTalk需要整合XXX账号，因XXX跟之前的公司账号不同步。我们期望能够用SSO方案来实现：用户只需要登录一次就可以访问所有相互信任的应用系统。
首先需要XXX提供统一接口，打通两个服务器间登录，注册，获取用户信息等环节。 app Client采用google规范的account manager接口来管理账号。
-
apk更新问题
- apk更新的方案是：从服务器端load config档案，compare 版号后确定是否更新。
- 考虑到后期有非技术人员来维护管理config，因此并未采用version code这个技术性的字段。
- 早期开发时，版号中的特殊符号分隔是’.’. 前期测试没有问题。但是后期公司系统build出的apk包含了’_’. 导致前期比较方法出错
做版本比较方案时应该考虑到后期正式版本的命名规则等因素。
-
session过期问题
ZenTalk遇到登录一段时间后无法发帖问题,经查证是session的问题。首先跟服务器端确认如下：
- formsession相当于页面session， 只保存在 client 端。每次登陆都会生成一个formhash 值,只要webview 不关闭这个值将一直有效。
- 如果apk 关闭，再重新打开，理论上会引起 formhash 值失效。需要调用zentalkApp_v1.2.8_SPEC.doc 文档中的init Api 重新获取 fromhash值。
- 如果在asusaccount 页面做logout 操作，则formhash 会失效。
解决方案： app每次启动后重新获取formsession
-
H5存储数据问题
android端只有捆绑的H5页面允许存储数据。例如ZenTalk的code中预载的offline页面。 webview加载的外部url没把发存储数据到本地。
解决方案： app提供存储接口给H5使用
七、 项目优化
- Splash页面3s时，后台开始加载“首页”，“推荐”等几个主要Fragment. user可以3s后看到已经加载ready的首页
- 首页不使用wex5框架编写的H5. 绕过wex5框架大量JS加载的时间。提示首页加载效率
- 首页，帖子正文下拉刷新采用部分刷新
- 首页仅刷新列表和推荐版块
- 帖子正文仅刷新回帖（目前帖子正文是动态生成页面）
- webview采用不自动加载图片，等页面finish后再发起图片加载方案。提升webview的UX
- ZenTalk模块化实践详见 F:\Manager\ZenTalk\600 ZenTalk 模块化实践.docx
- 内存优化
- 数据量不大，在千级以内用SparseArray和ArrayMap代替HashMap
- webview加载效率优化
-
webview加载优化之Cache
App端方案：加入webview cache方案。 实际测试效果：（通过抓包和图片文件分析）
1） 图片不会重新load
2） 网页相关的html, css, js等会重新下载
不过这些文件加起来基本< 10k，对加载效率影响已经非常小。 设定cache方案后，为何这些文件会重新下载还待进一步研究。初步猜测可能跟服务器端配置有关。
-
webview加载优化之wex5加载效率优化
对wex5部分加载做优化。 例如用native storage代替页面间切换获取数据；js加载优化等
-
webview加载优化之缩略图
建议服务器支援多档图片，例如
1) Thumbnail：小图，4848, 9292? 用于组文章，帖子正文等页面，加速帖子列表渲染和加载
2) preview大图：512512, 1024768? 用于user点击后查看大图，加速大图页面的渲染和加载
3) 原图：已经支援
-
八、 其他
项目档案
三方库
-
Http请求使用组件 Volley
volley适用于数据量不大，但是通讯频率较高的场景。
其他同类库
- android-async-http
- okhttp
-
json数据解析使用组件 fastjson
fastjson ： Java Objects into their JSON representation
其他同类库
-
ImagePicker
项目图片选择控件使用ImagePicker https://github.com/jeasonlzy0216/ImagePicker
其他仿微信图片选择器
- https://github.com/banchichen/TZImagePickerController
- https://github.com/lovetuzitong/MultiImageSelector
- https://github.com/donglua/PhotoPicker
- GalleryFinal
- 自定义相册，实现了拍照、图片选择（单选/多选）、 裁剪（单/多裁剪）、旋转
- ImageLoader无绑定任由开发者选 择、功能可配置、主题样式可配置。GalleryFinal为你定制相册
- https://github.com/pengjianbo/GalleryFinal
-
ViewPager 项目transition过渡控件ViewPagerIndicator https://github.com/JakeWharton/ViewPagerIndicator
推送选择
推送：选用个推
Reference
MSC
-
网络状态变动处理逻辑
网络重新连接后，首页和推荐webview刷新
-
小红点数据对比规则
提醒，消息如果数据有变动，提示小红点。
数据变动比对规则：last item time + length)
-
app中HTML，CSS，JS压缩节省空间
可以使用在线工具或者WebStorm插件
九、 总结
- 项目采用混合开发，测试过运行时内存在可接受范围
- 混合开发在页面加载的用户体验上交Native弱一些
- app的首页webview加载优化非常重要。因为用户第一眼看到的就是首页。
app中对于首页webview加载优化方案：在splash页面3s计数时开始后台加载webview. 以提升用户体验。