原生混合H5开发模式下碰到的某些bug记录

鉴于公司项目紧急程度，采用了混合式开发，在原生App当中内嵌H5页面，H5采用单页面模式，技术栈主要是vue-cli,在整个开发过程中，主要的经验记录如下：

1.接口请求，由于使用了window.fetch,Proxy,需要兼容安卓4.0及以下版本,最终采用了es6之entries来定义普通的请求对象数组实现低版本兼容

2.async await语法与new promise结合的初次尝试，效果还是不错的，后期要进行请求拦截相关逻辑的编写

3.H5跟原生数据互相传递的bridge的构建以及使用，主要的技术点在于deviceReady方法全局只执行一次初始化，初始化之后即可直接使用exec，另外，切记约定

4.针对原生title修改的小tip,除了透过bridge，也可以采用小魔法，监听路由变化时，加载服务器上某个小资源，达到类似多页面刷新document.title的效果

5.远程调试webview页面，过程如下：

 Fiddler 手机抓包

http://blog.****.net/gld824125233/article/details/52588275

1、安装证书

2、重启wifi

 

 

安卓篇：

需要道具

1、安卓手机

2、usb数据线或充电线

3、一个测试用的安卓安装包apk包。里面必须包含webview页面。不然你远程调试个屁！

4、豌豆荚 、 91手机助手等第三方安卓助手平台

5、fq用的v*n工具

6、chrome 浏览器

 

具体实施步骤：

1、安卓手机开始【开发者模式】和【USB调试】并且允许手机访问

2、【连接类型】默认是【充电】，改为【媒体设备（MTP）】

3、使用第三方安卓助手平台，安装具有webview页面的安卓测试包.apk

4、打开具有webview页面的安卓APP。

4、电脑fq（你懂得） ，为了确保正常fq，请访问www.google.com看看是否正常

5、打开chrome浏览器，输入url: 【chrome://inspect/#devices】，在【Remote Target】中查看是否有自己的手机型号，如果没有请立即中止，检查上面的步骤

6、点击inspect即可看到下面的效果图 

效果展示1：

 

效果展示2：

 

IOS篇

需要道具：

charles（跨域使用）： https://www.charlesproxy.com/download/

Iphone手机

I苹果：http://rj.baidu.com/search/index/?kw=i苹果

 

准备事项：

让IOS开发人员，将webview的地址指向你本地资源。如10.110.1.27:8080/index.html

由于我本地使用了webpack，所以能开启热更新的服务器。每次保存时，APP中的webview就会自动更新。非常方便调试。

但还存在跨域的问题，这时候就要charles登场了，原理通过修改代理为本地来实现跨域

 

 0、将项目中ajax的请求地址ip，改为本地Ip。其他不变，比如原本请求地址为：

　　 http://10.110.1.17:8081/bmapi/api/project/DoOld   

修改本地IP： 

　　http://10.110.1.26:8081/bmapi/api/project/DoOld

 1、首先电脑和手机要使用同一个局域网（无线网络）内

 2、修改手机的无线网络配置，以我的Iphone手机为例：

 

3、打开charles->Tools->remote Map->Add

这样一来就可以跨域了。

第五点内容转自http://www.cnblogs.com/CyLee/p/6726021.html，在整个调试过程，发现一个小问题，如果是原生直接访问本地的H5资源是可以调试的，透过ip访问资源无法调试（当然有可能是原生需要设置或者确实不支持，哈哈，待查证）

6.webview当中的H5页面当中有Input标签时，某些特殊情况下(比如原生设置了全屏)，在弹起软键盘时，是无法动态修改webview的高度的，导致有些内容会被挡住，经尝试，通过修改H5页面的高或者其他，均无效果，得跟原生好好沟通哈

7.如果有些表单在提交之后会有弹窗提示的，最好先把ios的软键盘先收起再延时提交，防止出现弹窗位置跳动的情况，影响用户体验

8.在oppo手机中，如果有些图片过大，它是不会显示的，隐形的bug

9.在使用mint-ui的时候，可以通过引入单个组件，以便修改，适应需求及适配，在使用picker插件的时候，修改单位为rem的时候，稍有不慎会导致间距在不同的手机当中的表现差异巨大

10.picker在初始化的时候，即开始触发change事件，因此，针对需要动态加载的项，建议先将其v-if=false隐藏，数据赋值成功之后再创建

11.vue bind:class 可以绑定func,返回对应的类即可

12.css标准化写法

未完待续，学会总结，才能进步更快。。。。