今天就要聊聊一些疑难杂症,有些忘记了,有些还没碰到,后续持续更新吧!
网络调试对于我们的日常开发是很重要的,有助于快速判断资源请求问题,但uni-app在这方面有很大的缺陷,在讨论这个问题时,先来看一下uni-app的真机调试方式。
当项目运行时,点击终端上的调试按钮,会弹出一个调试界面。
从调试面板中,可以看到仅有Console、Elements、Sources三个选项,期待许久的Network并没有出现,这种调试方式没办法实现网络请求调试。
点击工具栏的运行->运行到手机或模拟器->显示webview调试控制台会出现一个跟谷歌浏览器一样的调试界面,虽然这里有Network,但是很可惜,这个功能存在问题,没办法监听到网络请求。
在走投无路之下,只能另辟蹊径,借助工具,抓取真机的网络请求,接下来阐述一下怎么使用Fiddler抓取真机的网络请求,配置完需要重启才生效。
这是一个免费工具,自行在网络上下载即可。
点击工具栏的tools,选择options就会弹出一个配置界面
选择HTTPS选项,勾选选矿中的CaptureHTTPSCONNECTs、DecryptHTTPstrffic、Ignoreservercertificateerrors。
这边配置的端口号后面配置代理的时候需要使用到。
注意需要和电脑连接同一网络,点击进入手机WIFI详情界面,有个代理,选择手动模式,输入电脑的IP地址和Fiddler的监听端口,即可拦截到真机的所有网络请求,包含我们app对应的网络请求。
这边可以选择过滤对应的ip或域名,多个的话通过分号隔开即可。
谈论这个问题时,先描述一下uni-app实现的app怎么和h5通讯
对于app端的通讯,.vue和.nvue有两点区别,1.获取webView实例不一致,2.监听方法不一致。app向h5传递数据时,需要借助webview.evalJS执行h5的全局方法,而h5向app传递参数时,类似于h5发送postMessage,可以在webview的message/onPostMessage监听函数获取数据。
webView实例的获取,对于vue文件不是特别友好,需要借助于this.$scope.$getAppWebview(),如果是在组件中需要使用this.$parent.$scope.$getAppWebview(),添加延时的原因是,h5页面可能未加载完成,无法获取到对应的全局函数,会提示xxx函数undefined;
uni.postMessage({data:{xxx:xxx,xxx:xxx}});如果是页面加载完成时就需要发送数据,需要等待UniAppJSBridgeReady钩子结束后触发postMessage;
window.setAccountInfo=function(data){console.log(data)}踩坑点uniisnotdefined
app需要涉及到离线或者内网,索引uni.webview.js下载到本地进行引入,因为uni.webview.js已经被编译成了umd格式,在vue项目中在进行一次打包后,导致this指向不是window,所以没有把uni挂在到全局上,将this指向改为window即可。
未改造之前的代码
改造后
或者
app向h5传递参数时,无法传递对象,并且传递的参数需要字符串序列化
在传递参数时,对象传递过去没办法识别,同时传递的参数需要执行JSON.stringify(),多个参数时,可以多个参数传递,也可以把多个参数进行字符串拼接,然后再h5端进行拆分处理。