h5页面

1.Vue打车项目集成高德地图js端的时候,遇到一个问题:首页地图页面跳转到另一个地图页面选择一个地址后,规划起始点到终点的路线,本来应该绘制在界面上,结果死个舅子都不得行,marker也绘制不上去了,排查好久,发现只有不跳页面就可以,跳了页面回来,首页就绘制不上了东西了,但是也没报错,奇怪得很,最后原因是因为首页地图我这边做了keepalive的,所以跳页面后没销毁,也就在返回该页面是没有重新加载,所以看到地图也在,还能拖动选址这些,赶脚一起正常,其实map对象已经变了,所以得在返回时重新获取地图对象(代码形如:this.mapObj = new AMap.Map('map-container', { zoom: 16, cityName: MapCityName });)就ok了,特此备份!! 来源： CSDN 作者： Stephenlovevicky 链接： https://blog.csdn.net/luoyong123456/article/details/103891618

1.app与h5页面方法监听与参数传递 2.Android webview 如何打开本地存储，提供给JS调用 html5 的lwindow.localStorage功能，还有其他的权限 3.Android与Js交互之JSBridge的使用的坑 4.app内打开h5页面先显示一篇空白页面后才进入h5页面 5.h5中的路由跳转会有一层阴影；去掉阴影 body { line-height: 1; user-select: none; } 6.ios 点击其他地方不能让input聚焦，ios能自动调起键盘，但安卓不行，但安卓点其他地方能够聚焦 7.h5页面 在ios 和 安卓中信息导航栏显示问题，ios h5页面不占据信息导航栏位置，安卓占据信息导航栏位置 这个问题要具体看情况，大概分两种情况， 一、网页的头部导航由APP来写，这样就不用考虑这个问题 二、网页的头部导航由h5来写，这就要区分ios跟安卓了，在app.vue中动态设置样式，根据手机系统，这样可以知道设置距离头部的位置，发现不同的地方就可以根据app.vue中动态设置样式去区别 来源： CSDN 作者： 想要飞翔的小猪 链接： https://blog.csdn.net/dwb123456123456/article/details/103260143

1、区分APP是H5还是native 　　（1）手机进入开发者模式，选择显示页面布局边界，native app中所有的控件都是独立的红框，而web H5是一个完整的大框，里面的可以操作的小控件不独立 　　（2）adb先连接模拟器，在电脑浏览器打开chrome://inspect使用inspect工具，如果能够在其中看到webview的显示，那么说明这个地方有个webview，是H5页面 。(如果需要inspect，需要翻墙下载一下devtools，否则会出现404) 如下面的两个webview就是H5页面 2、H5页面元素定位 　　（1）使用appium原生的安卓元素定位 　　如果H5页面在APP内，则Desired Capabilities的设置和启动APP一样，定位也同样使用appium元素的安卓元素定位，可以使用appium-desktop来查找网页元素 　　（2）使用selenium的网页元素定位 　　 如果H5页面是在浏览器中，则Desired Capabilities的设置和启动APP不同 ： 　　　　--1.如果使用Android原生的浏览器打开H5，则使用browserName="Browser" 代替appPackage和appActivity；在appium启动browser时，如果出现chromedriver不匹配的问题，先查看手机安卓的系统应 用中

在h5页面中a链接是经常用到的标签，但是在移动端，我们在页面滚动的时候，a链接就会给我们造成很大的困扰。比如我们本来只是想要页面进行滚动，结果当我们刚触碰到页面上时，页面就跳转了。。。 那么这里就是在移动端的touch事件所影响的，可以在touch事件的时候阻止a链接的点击事件，然后在释放。 < li ontouchstart = "cancleDefault(this)" ontouchend = "backDefault(this)" id = "OrdersMenu" class = "active" > < a href = "/customer/orders/1" id = "OrderQueryLink" > 订单详情 < / a > < / li > // 取消默认事件 function cancleDefault ( obj ) { // 阻止当前元素下的a元素的默认事件 obj . firstElementChild . onclick = function ( ) { return false } ; } // 还原默认事件 function backDefault ( obj ) { // 给当前元素下的a元素绑定点击事件 obj . firstElementChild . onclick = function ( ) { console . log ( 1

背景 随着现在移动端设备的硬件性能的提高，现在web页面的体验逐渐变得可以接受，现在很多的应用都采用的Hybrid开发模式，一方面有利用了原生设备的API的优势（性能好、用户体验好），另一方面利用了web开发的优势（跨平台，开发成本低）。比如微信、QQ、58同城、美团、爱奇艺等等应用都是采用的Hybrid开发模式。 Hybrid应用如何去做自动化呢？ Hybrid是native嵌套了web，对于native页面，我们可以采用原生的自动化框架UIAutomator/XCUITest，而对于web页面，我们可以采用ChromeDriver，两者相结合完成自动化测试。现在流行的说法是移动端内嵌的web可以称为H5，虽然严格意义上来说H5不等同web。为了实现H5页面的自动化，其中H5页面的调试开关我们是必须要打开，否则通过inspector元素探测工具是定位不到页面的元素信息。 有源码的应用 针对公司内部团队开发的App，我们可以要开发直接在源代码中加上如下的代码，然后重新编译打一个debug包 if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) { WebView.setWebContentsDebuggingEnabled(true); } 无源码的应用 对于无源码的应用，如第三方线上App

背景 随着现在移动端设备的硬件性能的提高，现在web页面的体验逐渐变得可以接受，现在很多的应用都采用的Hybrid开发模式，一方面有利用了原生设备的API的优势（性能好、用户体验好），另一方面利用了web开发的优势（跨平台，开发成本低）。比如微信、QQ、58同城、美团、爱奇艺等等应用都是采用的Hybrid开发模式。 Hybrid应用如何去做自动化呢？ Hybrid是native嵌套了web，对于native页面，我们可以采用原生的自动化框架UIAutomator/XCUITest，而对于web页面，我们可以采用ChromeDriver，两者相结合完成自动化测试。现在流行的说法是移动端内嵌的web可以称为H5，虽然严格意义上来说H5不等同web。为了实现H5页面的自动化，其中H5页面的调试开关我们是必须要打开，否则通过inspector元素探测工具是定位不到页面的元素信息。 有源码的应用 针对公司内部团队开发的App，我们可以要开发直接在源代码中加上如下的代码，然后重新编译打一个debug包 if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) { WebView.setWebContentsDebuggingEnabled(true); } 无源码的应用 对于无源码的应用，如第三方线上App

说到H5测试，对于做WEB测试的同学来说再熟悉不过了，它包括页H5功能测试，前端性能测试，浏览器兼容性能测试，以及服务端性能测试。那本文谈到的则是H5前端性能测试，并希望通过阅读本文后，能够知道：H5前端性能测试什么？如何发现问题以及相应的优化规则。 一、浏览器渲染引擎 浏览器是Html解析和页面最终展示的工具，所以测试H5前理解浏览器的工作原理是必不可少的，具体可参考《浏览器工作原理》。 浏览器的主要功能 浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。在浏览器组成部分中，渲染引擎是用户直接相关，呈现用户所需页面的部分。所以从渲染引擎入手，了解HTML解析与页面展示。 渲染引擎工作流 dom树构建 ：从html标签的解析开始，将各种标签解析为dom树中的各个节点，标签和dom树的中的节点是一一对应关系。 渲染树构建： 将CSS和style标签中的样式信息解析为渲染树，渲染树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。 渲染树布局和绘制： 渲染树确定各个dom节点在屏幕中单确切位置，根据渲染树中的颜色等信息绘制出网页。 值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上

第一步：拉取授权页面进行授权登录 let pages = 'https://open.weixin.qq.com/connect/oauth2/authorize? appid='+自己的appid+'&redirect_uri='+授权登录后返回的页面+'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect' //我是用的非静默授权，snsapi_userinfo 需要用户手动同意 window.location.href = pages; 第二步：获取页面返回的code //这个是解析url参数的方法 var getRequest = function() { var url = window.location.search; var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); //获取url中"?"符后的字串 var strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1])

借鉴优化文章 概述 PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒种渲染完成首屏指标 基于第二点，首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s），所以首屏资源不应超过1014KB Mobile侧因手机配置原因，除加载外渲染速度也是优化重点 基于第五点，要合理处理代码减少渲染损耗 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置 加载完成后用户交互使用时也需注意性能 加载优化 加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点 减少HTTP请求 因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个。 a）合并CSS、JavaScript b）合并小图片，使用雪碧图 缓存 使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳） a） 缓存一切可缓存的资源 b） 使用长Cache（使用时间戳更新Cache） c） 使用外联式引用CSS、JavaScript 压缩HTML、CSS、JavaScript 减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩

PP视频X苏宁超市：新的一年想要诗和远方？快来测测你的基因到底适不适合去浪 PP视频联合苏宁超市，结合PP视频热播的自制综艺《不如冒险》，团队紧锣密鼓的做了一个爆款H5“测测你的冒险基因”。 为什么要策划这个选题？你有多久没冒险了 你的生活是不是还在日复一日的单调重复？ 为了生计，你不得不过着996的生活。 你是不是每天都在渴望着走出办公楼，来一场说走就走的旅行。 可是你不敢，也不能。 因为这些现实的顾虑，让你不能再像年轻时候那么勇往无前。 到底是什么让你越来越不敢 旅游向来为国人所青睐，古人“仁者乐山，智者乐水”的名言已流传至今，古代的超级“驴友”更是数不胜数。 张骞：两次出使西域，沟通了亚洲内陆交通要道，与西亚诸国正式开始了友好往来，促进了东西经济文化的广泛交流，开拓了从中国甘肃、新疆到今天的阿富汗、伊朗等地的陆路交通，即著名的“丝绸之路”。 玄奘：不是历史上第一个当“驴友”的出家人，但是影响最大的一个。这不仅是因为他佛学造诣深厚，还因为他受到了吴承恩的青睐，一本《西游记》让他名垂千古。但也有遗憾，被本来辅佐他去西天取经的大徒弟孙悟空抢走了不少风头，“孙行者”一路上降妖除怪，使他这位师傅成了最笨的“驴友”。 郑和：不仅完成了七次远航的壮举，而且每到一地，都以瓷器、丝绸、铜铁器和金银等物换取当地特产，与亚非各国加强了联系。南洋各地至今还保留着不少有关郑和的遗迹。随行人员马欢著