做项目时，会遇到一些零碎的技术点。记录下来以防忘记 需求：做可视化界面，但是需要兼容ie8，需要用纯css、js 的H5页面对接echarts，下面为效果图（带定时器循环显示tooltip）。...实现方式（此处为一个中央云南地图的实现方法）： 1、定义容器 // 页面逻辑 2、声明参数 var myChart4 =
概述： 在做H5混合开发的时候总是会遇到浏览器差异、不兼容导致同样的代码，IOS和Andoird其中之一出现不可预见的问题。 ...我的问题也是如此，我的需求是从父页面跳转子页面，子页面提交后返回父页面，并且父页面刷新。 ...如何解决： 解决这个问题找到方法就很简单。总体思路是在子页面返回时，告知父页面刷新。并且只在IOS上执行这个操作，否则Android会刷新两遍。 ...由于笔者对JS并不算精通，最初是想参考Android原生的回调操作，利用js实现页面回调，最后没能实现。然后考虑利用浏览器的生命周期，在H5中应该叫做事件，来处理。 ...最后发现是承载Html的IOS原生壳用了新的wkWebview导致，换回以前的WebView成功解决。
动态化框架 谈到了动态化框架，技术演进到最后为什么不是H5或者Native呢？Native开发的诸多亮点中，流畅体验和系统调用是最多被提及的，然而，实际上是痛并快乐着。...• 流畅体验体现在页面滚动/动画的流畅性，背后是更好的内存管理和更接近原生的性能。...Weex利用Native的优势解决了H5的痛点，具体如下： • H5对内存的控制不足，尤其是长列表内存，这会导致过长的H5页面占用过多的内存，容易导致App崩溃。...• H5长列表流畅性不够。一个是滚动时的流畅性，技术指标上表现为帧率；另一个是所谓的“黏手感”差，也就是屏幕响应手指操作的变化速度较慢。...Weex利用H5的优势解决了Native的痛点： • 解决了iOS、Android等平台需要开发多套功能重复代码的问题。
公司采用了H5和Android混合开发，以原生代码为壳，H5代码编写逻辑的方式做产品。笔者之前写过一篇文章简单聊到了这种方式，有兴趣的朋友可以了解一下，顺便点个赞。...Android原生与H5通信 而在这种方式的使用过程中笔者碰到了一个问题，偶然性的会出现广告，各种各样的广告。并且不是必然触发。 通过查询各种资料（其实就是百度）。...而广告页只会在H5的页面出现，所以基本可以排除第三方包带广告的问题，所以问题基本可以确定是Http被劫持了。 网上几乎所有文章的解决方案都是使用Https替换Http。...通过查看Android原生WebView的拦截日志，发现了广告页面的地址是会被拦截到的，而我们自己的H5页面放在自己的服务器上，IP和端口号是固定的当前使用服务器的ip和端口，广告页的ip和端口肯定和我们是不一致的...笔者拦截了url，将广告url拦截并且不允许它继续执行打开，至此，从用户的角度算是完全解决了广告的问题。
前言 项目的快速迭代过程中，APP中嵌入H5页面已是很常见的做法。 一定会有APP和JS的交互场景，例如JS唤起APP并携带参数......这样，虽然规避了 url 长度的隐患，但是 WKWebView 并不支持这样的方式。 为什么选择 iframe.src 不选择 locaiton.href ？...连续多次修改window.location.href的值，在Native层只能接收到最后一次请求，前面的请求都会被忽略掉。 只解决了js调用原生的问题。...使用 WebViewJavascriptBridge 和 webkit MessageHandler APP端 ios封装 android封装 H5端 原理： H5页面 Native App执行被调用...Native代码返回调用结果（H5页面执行被调用JavaScript代码并返回调用结果） 封装 bridge.js。
今天改了一个老旧的项目，还是用 table 布局的，遇到了一个有趣的问题。 table 设置了宽度 100% ，但是页面缩小到一定程度后，table 就不再变窄，导致显示不全。...table{ width: 100%; } 我以为是 display: block; 的问题，因为之前遇到过一个问题：table表格的td设置百分比宽度不管用的原因及解决方法 改成 table 布局... 解决办法： 就是去掉这种属性，用 css 重新给他们设置宽度： CSS： input,textarea{ width: 60%; } 这样就能解决... table 设置宽度不起效的问题了。
Servlet向页面输出js弹窗无效的解决方案 1、获取输出流类 PrintWriter out= response.getWriter(); 2、简写版 //警告弹窗...; 5、重点 ---- 必须在结尾处必须调用 out.flush(); 代码，窗口才能实现，不然提示弹窗无效 //必须调用 out.flush(); 使用servlet向jsp输出js提示框对于前端小白来说非常方便
基于这个背景，可以说开发者们从未放弃探索及寻找热更新的最优技术解决方案。市面上App热更新技术方案可归纳为两大类：纯原生（Native）的，以及Hybird（混合开发）模式下的技术方案。...4、用户体验更佳： H5网页是在浏览器内使用，如果网速不佳或者网页加载东西过多就会出现卡顿。 小程序只需在首次使用时是加载，也不会太精准，初次加载后页面再加载就会很流畅了。...上述说的只是说了小程序自身比H5具备更优的技术解决方案，那么放到混合App开发模式下比较，「Native+小程序」的App混合开发模式的优势可以总结为：远超过 H5 的体验（支持本地缓存，Webview...当含有页面链接的App版本过审以后，这些H5 页面可以随时远程热更新，用户在不更新App版本的基础上，就能使用最新版的业务应用。那么「Native+小程序」的App，其热更新方案好在哪里呢？...因为JS在Service层执行，所以JS里面操作的DOM将不会对View层产生影响，所以小程序是不能操作DOM结构的，这也就使得小程序的性能比传统的H5更好。
基于这个背景，可以说开发者们从未放弃探索及寻找热更新的最优技术解决方案。市面上App热更新技术方案可归纳为两大类：纯原生（Native）的，以及Hybird（混合开发）模式下的技术方案。...4、用户体验更佳： H5网页是在浏览器内使用，如果网速不佳或者网页加载东西过多就会出现卡顿。 小程序只需在首次使用时是加载，也不会太精准，初次加载后页面再加载就会很流畅了。...上述说的只是说了小程序自身比H5具备更优的技术解决方案，那么放到混合App开发模式下比较，「Native+小程序」的App混合开发模式的优势可以总结为： 远超过 H5 的体验（支持本地缓存，Webview...当含有页面链接的App版本过审以后，这些H5 页面可以随时远程热更新，用户在不更新App版本的基础上，就能使用最新版的业务应用。 那么「Native+小程序」的App，其热更新方案好在哪里呢？...3、因为JS在Service层执行，所以JS里面操作的DOM将不会对View层产生影响，所以小程序是不能操作DOM结构的，这也就使得小程序的性能比传统的H5更好。
其中「Native+小程序」的热更新解决方案脱颖而出，成为了近年来App热更新领域，最热门的技术解决方案，没有之一：一码多端运行（跨平台），体验优于H5（松散耦合），避免 DOM 泄露（安全容器）等，都是该方案的核心优势...2、加载速度更快：小程序是基于App端实现的应用，自身对于App有一定的亲和度，使用时不像H5的网页加载方式，用户主观感觉会更流畅。...4、用户体验更佳： H5网页是在浏览器内使用，如果网速不佳或者网页加载东西过多就会出现卡顿。 小程序只需在首次使用时是加载，也不会太精准，初次加载后页面再加载就会很流畅了。...当含有页面链接的App版本过审以后，这些H5 页面可以随时远程热更新，用户在不更新App版本的基础上，就能使用最新版的业务应用。那么「Native+小程序」的App，其热更新方案好在哪里呢？...因为JS在Service层执行，所以JS里面操作的DOM将不会对View层产生影响，所以小程序是不能操作DOM结构的，这也就使得小程序的性能比传统的H5更好。
简述 微信中通过页面直接打开app分为安卓版和IOS版，两个的实现方式是完全不同的。...安卓版实现：使用腾讯的应用宝，只要配置了“微下载”之后，打开链接腾讯会帮你判断本地是否已经安装了app，如果本地安装就直接打开，没有安装的话就是腾讯微下载的页面进行app下载，当然微下载的页面腾讯提供了几个模板...3.配置你的App的Universal Links（通用链接） 如果你是普通的ios项目的的话，配置如下：项目 targets->Capabilities->Associated Domains，如图填写你的链接域名...id=10，系统默认是打开页面，而不是触发通用链接打开app； 3....[重要]配置玩证书之后需要更新证书，才能内部打包和提测上传成功； 4.通用链接可被屏蔽，点击右上角配置的链接之后，通用链接就失效了，解决方案详见：《iOS通用链接（Universal Links）突然点击无效的解决方案
补充知识：WebView.loadUrl使用误区 当使用loadUrl加载网页的时候，有时候会出现调用系统浏览器加载网页的现象，网上大部分的解决方案是 ： webView.setWebViewClient...，但是却做了多余的工作，以及不合理的返回值。...实际上，如果你只需要避免启动系统浏览器来加载页面的情况，只需要这么写就可以了 webView.setWebViewClient(new WebViewClient()); 完全不需要另外写个类继承...当应用场景更复杂的时候，你就能发现网上提供的方法的弊端了： url存在重定向，无法回退 shouldOverrideUrlLoading(WebView view, String url) 的返回值决定了...以上这篇解决webview 第二次调用loadUrl页面不刷新的问题就是小编分享给大家的全部内容了，希望能给大家一个参考。
Native 端体验优化 一直在思考从技术层面上，Native 端什么样才称得上是体验佳的产品，有什么评判标准，从过往经验来看，个人觉得应该具备以下基本特质: 启动速度要快 交互流畅不卡顿 有离线缓存...H5 页面加速优化 移动互联网时代，H5 页面无处不在，几乎 80%以上的 APP 都有 H5 页面的影子，一份代码多端运行且能快速部署的优势，让 Hybrid 开发成为很多 APP 的标配。...要实现较好的体验，需要花费心思对 H5 页面进行优化，我觉得有三个方向可以进行优化： 页面启动白屏时间 H5 页面的交互体验，如响应流畅度 页面渲染性能 本文只从影响体验最重要的指标——白屏时间来聊聊如何进行优化...，响应流畅度和页面渲染性能因为缺乏实践经验，这里就不班门弄斧。...从页面请求可以看到，其中 1.js 的下载是比较耗时的，是应用比较核心的 js 文件，必须等待此文件下载完成，才有可能继续后面的页面渲染。
前阵子解决了博客在低版本 IE 下会假死的问题，发现居然是因为我自定义 CSS 的闭合误用了中文大括号导致的！ 解决这个问题之后，又发现了另外一个坑：发现博客在 IE8 及以下版本的响应式不生效。...[endif]--> 其中 css3-mediaqueries 就是用来解决IE8 及以下版本浏览器不支持 CSS3 media queries 的问题的。...大概工作原理想想知道，应该就是用 js 的方式，先取得写好的 css3 属性，然后动态改变元素样式，从而解决兼容性问题。...经过测试发现，鸟哥的博客在 IE8 下的响应式除了略卡一点，并没有出现响应式失效的情况，为啥我博客就不行呢？苦逼重复的替换了几次 js 文件、刷新各种缓存，硬是没有解决！...比如，Begin 主题大部分响应式属性的代码都写在了 style.css，那么要解决这个 IE 兼容性问题，只需要将 style.css 使用和网站相同的域名即可，而不能使用二级域名的 CDN 了！
app.js if (that.userInfoReadyCallback) { that.userInfoReadyCallback(res) } 在调用页面里 if () {} else {...app.userInfoReadyCallback = res => { console.log(res); } } //打印里只打印出了"111"， 回调里面的 res的内容并没有打印...原因是页面里多处同时调用userInfoReadyCallback回调，导致被覆盖，只需要将多个调用的Callback命名为不同名称来调用
2、加载速度更快：小程序是基于App端实现的应用，自身对于App有一定的亲和度，使用时不像H5的网页加载方式，用户主观感觉会更流畅。...4、用户体验更佳： H5网页是在浏览器内使用，如果网速不佳或者网页加载东西过多就会出现卡顿。 小程序只需在首次使用时是加载，也不会太精准，初次加载后页面再加载就会很流畅了。...上述说的只是说了小程序自身比H5具备更优的技术解决方案，那么放到混合App开发模式下比较，「Native+小程序」的App混合开发模式的优势可以总结为：远超过 H5 的体验（支持本地缓存，Webview...当含有页面链接的App版本过审以后，这些H5 页面可以随时远程热更新，用户在不更新App版本的基础上，就能使用最新版的业务应用。那么「Native+小程序」的App，其热更新方案好在哪里呢？...因为JS在Service层执行，所以JS里面操作的DOM将不会对View层产生影响，所以小程序是不能操作DOM结构的，这也就使得小程序的性能比传统的H5更好。
H5拥有跨平台的优势，却存在性能上的问题正好可以用搭建原生壳承载H5代码的方式去解决。 如何理解这种方式，就好像说Android原生代码封装外壳，内部包含H5代码作为核心内容。...更细节一点，我们把引导页、登录页、首页等等与业务关联打不并且与用户交互较多的页面用原生去写，而业务页面，逻辑代码由H5处理，将他们结合就形成了混合开发的由原生壳承载的H5APP。 ...同时我们需要在钉钉、微信小程序等等平台搭建，可以直接复用我们已有的H5代码。 而这样的搭建方式比纯H5搭建的APP的优势在于因为有原生壳的存在，可以自由的使用原生API。保证了交互上的流畅性。...关于通讯我们需要解决两个问题： 原生向H5通讯 H5向原生通讯 第一个问题很好解决，以Android为例，WebView提供特有的方法，当你打开一个Html，你可以去调用这个Html中包含的JS。...code=toast&data=+Json.stringify(config) 上述是一段JS的页面跳转方法。我们规定规则PRE=protocol://android?
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。...简书中描述很好的文章，细节可以点击进去看，如果直接想看代码实现，请看下面 <!
2、加载速度更快：小程序是基于App端实现的应用，自身对于App有一定的亲和度，使用时不像H5的网页加载方式，用户主观感觉会更流畅。...4、用户体验更佳： H5网页是在浏览器内使用，如果网速不佳或者网页加载东西过多就会出现卡顿。 小程序只需在首次使用时是加载，也不会太精准，初次加载后页面再加载就会很流畅了。...当含有页面链接的App版本过审以后，这些H5 页面可以随时远程热更新，用户在不更新App版本的基础上，就能使用最新版的业务应用。 那么「Native+小程序」的App，其热更新方案好在哪里呢？...3、因为JS在Service层执行，所以JS里面操作的DOM将不会对View层产生影响，所以小程序是不能操作DOM结构的，这也就使得小程序的性能比传统的H5更好。...其中「App+小程序容器技术」的热更新解决方案脱颖而出，成为了近年来App热更新领域，最热门的技术解决方案，没有之一：一码多端运行（跨平台），体验优于H5（松散耦合），避免 DOM 泄露（安全容器）等，
（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来...、收起未回落问题 iPhone X 底部栏适配问题 保存页面为图片和二维码问题和解决方案 微信公众号 H5 分享问题 H5 调用 SDK 相关问题及解决方案 H5 调试相关方案与策略 移动端 H5 相关基础技术概览...由于篇幅原因，某些非核心解决方案的实现细节暂未谈论，需要自行研究。 iOS 滑动不流畅 表现 上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。...开发中，页面内部点击分享按钮调用 SDK，方法不生效。...现在来谈谈 Hybrid 技术要点，原生与 H5 的通信。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
