移动端H5混合开发设置复盘与总结

此篇接上一篇：

移动端H5混合开发，Touch触控，拖拽，长按, 滑屏 实现方案
https://www.cnblogs.com/buoge/p/9346699.html

app 场布设置已经上线了，用户能够经过手机端嵌入的h5网页进行场布设置，原来只能在pc端浏览器，还得带上个笔记本电脑非常不方便，这个功能很好的解决了目前设置不畅的问题。上线后获得你们的承认，提高了业务效率，这一个多月的辛苦开发仍是值得的，接下来是对本身这一段时间开发过程的一个总结。

总体开发基于H5+Css3+Jquery,前端这个组合略显过期，不过我就这个用的熟悉，先作完再说

先后端开发混合开发

功能前端和后端是一块儿开发的，好处是本身灵活定制不须要沟通成本，可是缺点也有先后端切换须要切换大脑思惟的上下文，一会再写JS一会回去写Java不利于思惟发挥和深刻思考

后端开发过程当中还好有现成的方法能够调用，因此并无耗费太多时间，大部分时间在前端开发上，假如后端也要作那才真是入水两腿泥

总结：后续在有相似开发，不要大包大榄，专一一端去作，这样高效省心，专一前端和专一后台分工开发速度快了，效率高了，遇到难题有时间和情景去深刻思考，因此尽量把任务分开下

android iOS 与h5 互相调用的问题

H5调用相机图片方向有问题：拍照是竖屏，展现成横屏，上传上去展现也是横屏
这两个帖子讲的很清楚，我就不展开了，思路就是利用 exif.js 判断方向，而后用CanvasApi重新生成base64
格式的图片

• H5拍照应用开发经历的那些坑儿
  http://www.yuuuuc.me/problems-with-html5-file-api-while-uploading-images/

• 利用exif.js解决ios手机上传竖拍照片旋转90度问题
  https://blog.csdn.net/linlzk/article/details/48652635

源码放在了这里：
https://github.com/buoge/gist/blob/master/FrontEnd/FixH5Oritention.html

相册调用去摄像头，图片大小限制

• Android 有api去除摄像头相机拍照的选项

• iOS 无法直接去除，只能经过环境判断，动态触发自定义函数，直接跳转到相册，选择完成后返回base64数据
  客户端直接使用base64类型的数据判断文件大小，展现，最终上传到服务端也是base64方式的

// 前端    
        function selectDeviceImg(){
            console.log('selectDeviceImg');
            if (window.webkit) { // iOS
                window.webkit.messageHandlers.Photo.postMessage(null);
            } else { // Android and others
                $("#file_head").trigger("click");
            }
        }
        
        // 服务端是这样子的
        @ResponseBody
        @RequestMapping(value = "/upload", method = RequestMethod.POST)
        public Result uploadImage(@RequestParam(required = true) String imageBase64,
                                  @RequestParam(required = true) String projectId) {
                                  ...
                                }

h5与native交互方式

• Android 经过WebView对象自定义的AndroidObjec注入到页面，页面调用AndroidObjec
• iOS 实现机制相似，也是在UIWebView里面建立了一个对象，页面上直接给这个对象发送消息

// 假如在iOS中 
  if (window.webkit) {
       // iOS post message 的方式
       window.webkit.messageHandlers.Signature.postMessage(null);
    } else if (typeof AndroidJSObj != "undefined") { 
        // AndroidObjec 方式  
        AndroidJSObj.getSignature();
    }

• URL拦截的实现思路：Android和iOS的webview都在监听url的调转事件，拦截到后，不作跳转，
  直接执行本地的逻辑，在实现语音播放的时候用到这个技巧，这个技巧原本是作页面跳转时使用的，
  客户端拦截到url跳转到对应的 Controller或是Activity,若是是浏览器h5直接跳转到对应的html页面

• 另一种WebViewJavascriptBridge的库: https://github.com/marcuswestin/WebViewJavascriptBridge 1万多个start通过实战考研，后续项目中可使用这个提高效率

浏览器返回问题：history

页面中有一个功能就是上传图片，这个功能会覆盖现有页面的背景，上传页面是一个html,完过后直接location.href跳转到了另外一个，如今整个页面嵌入在app里面有返回按钮，但如今不想让页面返回到上传页面，
试了 location.replace 也无论用，这个方法在移动端很差用，并且还存在另外一个问题就是在iOS须要点击两次返回按钮才能退出webview。

这个功能上也调试了很久，最后也是让客户端处理了，监听页面返回在指定页面点击返回键直接推出

总结：嵌套h5的时候尽可能使用单页面的布局方式，方便管理，或是用react,vue这种都有对应的路由插件，这里也暴露了前端技能二把刀，遇到这种叼酸的bug就搞不定

屏幕像素与真实像素转换

以前一个帖子写过，背景是充满屏幕的，场布上是有点位的，长按能够添加点位，点位的定位算法就比较重要：

核心就是：计算点位在原始图片的left,top位置，在不一样分辨率上等比展现

设备分辨率： 300600
图片分辨率： 6001200

点在屏幕上的位置是（left,top）：（30,60）
对应到图片上原始像素就是（left,top）：(60,120)

在另一个设备分辨率是： 200*400的话
图片上原始像素：（60，120），存在数据库，前端展现会返回
在此设备上对应的位置就是：（20，40）

我这里为了方便演绎参数值通过调整，大概意思就是这样

网络异常的处理，loading...,成功失败

全部Ajax请求刚开始的时候没有使用一个统一的异常处理，请求开始加loading...,出错或网络异常，取消loading,提示业务异常或网络异常，这块应该提前规划，再有相似需求必定注意

网页认证受权的问题

ajax api 的认证方式是目前考虑到3种：

• 本身按照必定规则md5计算出来的，根据时间戳算一个不可逆的签名，客户端算好，调用h5传给页面，发送ajax时放在header里面（目前是这种）

• 我以前实现过一种思路是使用md5和base64一块儿算好以后放在cookie里面，页面发送的时候带上cookie,计算过程任然在客户端，客户端计算完成调用h5的js函数，而后在发起ajax请求，由服务器验证，验证经过返回json

• OAuth2 标准不解释了，这个服务暂时尚未本身搭建过却是用过别人的，后续也会单独学习这块把这个技能点补充上来

关于移动前端开发效率

Jquery 为主的开发方式还能够在优化
Jquery 效率比起 mvvm 的vue,react 代码效率要低，可是比较简单，目前代码已经接近2000行功能再要叠加确定是要混乱起来，改很差改，修很差修，除了我每人敢动

css3 与前端工程实践的积累不足
在浏览器返回，手机相册选取，样式兼容性展现显示出不少力不从心的感受，只能是你们一块儿协做解决，或是workaround 用曲线救国的方式实现，这块其实没办法，主力没有在前端，只能遇到问题多总结，多去实践才行

移动端触控库选择

• hammer.js 作手势交互和点击，长按的操做简直太棒，这个库1024！
• 其实回过头来说，js开发库不应用jquery应该用 zepto.js,它自己是为移动端而生，jquery 在移动端点击事件处理有不少问题，好些时候不能响应，只能用touchstart,touchend来触发，可是使用touch事件会发生不少误操做和无触碰，体验不是很好

UI 框架和样式库的选择

前面说过css不是很溜，不但愿本身花时间在前端样式上，因此寻找一个合适的UI库是尤其重要的，这里我选择的是mui https://github.com/dcloudio/mui/
Bootstrap4 一些基础样式
iconfont 免费的icon

** 模态弹层layui **
使用的 layer.js的移动版很是好用，解决了移动端模态弹层的问题，推荐你们使用：
https://layer.layui.com/mobile/

tmpl
前端模板老组件了，虽然比起mvvm逊色很多，好在够用

滚动穿透

• 这里有一些详细的解释，其实在模态弹窗那里也没有解决滑动穿透的问题
  https://uedsky.com/2016-06/mobile-modal-scroll/

** 点击300毫秒延迟问题 **
在iOS端尤其强烈，这里放两个连接解释下，原因，解决方案不少自行搜索

* 为啥会有300毫秒延迟？
 https://thx.github.io/mobile/300ms-click-delay
 https://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari

动态播放音频的问题

H5页面动态播放音频，在iOS一直没有弄好，多是页面动态添加音视频的缘故，动态播放一直有问题，从测试结果来看是咱们本身的音频文件服务器不稳定致使的，没法动态预览mp3语音文件，只能经过调用原生app的方法播放声音

• 但音频播放问题
  https://www.ibm.com/developerworks/cn/web/wa-ioshtml5/index.html

• 下面是几个播放音频比较好的库
  https://github.com/goldfire/howler.js#examples
  https://github.com/mediaelement/mediaelement
  https://github.com/CreateJS/SoundJS

上线时间点

原本说是8月15号上线，延期到8月底上线，可是因为我弄了两天发布脚本，研究了一天的部署环境，没有尽早提测，可是感受主要是没有沟通到位，我从其余处得知此次功能要在月底一次发版，我就没在乎，没有继续推动这个事，又在打磨一些细节，一个是调试音视频播放，一个是调试window.hostory接口尝试解决页面返回的问题，最后没解决和客户端协商解决，所以耽误了时间，下次在商谈好时间节点后要尽可能按照时间节点来进行活动安排，时间点关键点要多沟通，上仍是不能上，仍是延期上都要有个明确的结论。

是时候升级一下前端技术栈了：VUE