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

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) {
                                  ...
                                }