此篇接上一篇:

移动端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

格式的图片

源码放在了这里:

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

图片分辨率: 600
1200

点在屏幕上的位置是(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逊色不少,好在够用

滚动穿透

** 点击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的方法播放声音

上线时间点

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

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

移动端H5混合开发设置复盘与总结的更多相关文章

  1. 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案

    概述 近期由于产品快速原型开发的需要,不想用原声的方式开发App两端一起搞时间来不及,目前产品处于大量上feature的阶段,采用混合开发是最合适的选择,所以花了3天的时间研究怎么去实现移动端,拖拽, ...

  2. Android H5混合开发(1):构建Cordova 项目

    Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...

  3. Android H5混合开发(2):自定义Cordova插件

    前言 Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能. 但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了. 这个"自定义"不是指由A ...

  4. H5混合开发问题总结

    1.This application is modifying the autolayout engine from a background thread, which can lead to en ...

  5. Android H5混合开发(3):原生Android项目里嵌入Cordova

    前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...

  6. Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

    近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...

  7. 移动端H5页面开发,碰到一个字体变大的BUG

    移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...

  8. 能挣钱的微信JSSDK+H5混合开发

    H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在 ...

  9. Android H5混合开发(4):构建Cordova Jar包

    前言 上一节,介绍了原生项目如何嵌入Cordova,我们对Cordova的依赖使用的是CordovaLib Module,这也是安卓项目常用的方式. 但是,也有项目希望以Jar包的方式依赖Cordov ...

随机推荐

  1. 如何直接在 PC 端获取其它端设备的 UserAgent 信息呢?

    如何直接在 PC 端获取其它端设备的 UserAgent 信息呢 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5909615.html 序 希望收 ...

  2. Head First 设计模式 --3 装饰者模式 开闭原则

    装饰者模式:动态的将责任附加到对象上,若要扩展功能,装饰者提供了比集成更有弹性的替代方案.设计原则:1:封装变化2:多用组合,少用继承3:针对接口编程,不针对实现编程4:为对象之间的松耦合设计而努力5 ...

  3. js根据生日计算出年龄

    /*根据出生日期算出年龄*/ function jsGetAge(strBirthday){ var returnAge; var strBirthdayArr=strBirthday.split(& ...

  4. jquery与checkbox的checked属性的问题

    1.页面加载成功后,点击选中或取消选中该checkbox,checkbox属性里的checked属性不会根据该checkbox是否选中而变化 2.checkbox里的onchange或onclick方 ...

  5. [music]<蔷薇>

    我在虾米音乐听到一首好听的歌曲<蔷薇>,一起来听吧!http://www.xiami.com/song/386109?ref=aother LOFTER:我们的故事   http://us ...

  6. [记录]关于vertical-align单/多选框与说明文字对齐效果

    效果图:    第一张使用label标签,第二张没有使用.. 使用label标签,middle对齐方式的单选框下降了1px 而没有使用label标签,sub对齐方式的 却 居 中 了 =_= 不太理解 ...

  7. java调用python程序以及向python程序传递参数

    在做项目的时候,经常会碰到这个问题,主要程序是用java写的,有些功能使用python写的,整个项目需要把java代码和python代码进行整合,在一个项目里面运行,这就涉及到java调用python ...

  8. 刚发现 CSS 还存在一个命名规范 B.E.M

    Block !误区:这个block并非inline-block里的block,而是将所有东西都划分为一个独立的模块,一个header是block,header里嵌套的搜索框是block,甚至一个ico ...

  9. java swing button和键盘监听冲突问题

    原因: 点击button会让jframe失去焦点,然后键盘监听不起作用 解决: 让jframe重新获取焦点就行了 jf.setFocusable(true); // JFrame jf = new J ...

  10. oracle中

    select tmp_tb.*, ROWNUM row_id from (SELECT MX.*                                          --这里不能直接用* ...