
H5开发
文章平均质量分 73
Vue,html,JavaScript,css
KWMax
Android/跨端/iOS
展开
-
Webview+AppbarLayout上下滑动冲突
当AppBarLayout和Webview共同使用时,会出现一个问题,AppBarLayout无法折叠了,Webview只能在较小的固定区域内上下滑动,可以理解为两者上下滑动冲突了。原创 2022-09-03 16:27:48 · 1488 阅读 · 1 评论 -
Webview+Viewpager左右滑动冲突
在开发场景中,经常需要Viewpager+Fragment嵌套滑动页面。然而若某个Fragment为webview,且webview中存在轮播图或者其他滑动控件,则会出现Webview内容无法左右滑动的问题。原创 2022-09-03 15:35:13 · 2413 阅读 · 2 评论 -
H5:MathJax解析数学公式
一、概述MathJax是一款开源的JavaScript显示引擎,适用所有现代浏览器,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。MathJax官网:MathJax官网Github地址:MathJax Github中文文档地址:MathJax中文文档英文文档地址:MathJax英文文档MathJax语法:MathJax语法二、安装1、引入MathJax使用网络字体(大部分浏览器都原创 2020-11-09 14:51:25 · 3711 阅读 · 0 评论 -
H5:border-radius移动端的兼容问题
问题场景通过以下方式实现一个圆形边框的选项值.option { width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; font-size: 36px; color: #888888; border: 2px solid #888888;}在chrome和其他浏览器上一直显示正常。在个别移动端机子上,出现圆圈不圆和原创 2020-08-01 11:26:26 · 1178 阅读 · 0 评论 -
H5:救命技能之Webstorm恢复被删文件
今天,整理代码的时候操作不慎,多删除了项目文件,因为文件大,连回收站也清空了,想起来有部分代码未提交欲哭无泪!重写是不想重写的,于是试了几个数据恢复软件,免费版专业版都用上了,发现还没恢复成功.......想起来,Webstorm还有本地记录,于是抱着试试的心态(大不了重写),幸好恢复了。这里衷心感谢Webstorm!!简直救命!恢复步骤1、工程项目,右键打开 local history2、左边选择最近的一条本地记录,点击,右边选择误删想恢复的目录或文件,点击Revert .原创 2020-06-15 20:35:22 · 1043 阅读 · 0 评论 -
H5:html2canvas使用笔记
场景描述:在H5页面需要生成截图,用于分享给其他用户。可以通过开源库html2canvas实现这一功能。官方文档github -> https://github.com/niklasvh/html2canvas使用文档 -> http://html2canvas.hertzen.com/documentation安装//这里最好指定安装版本,原因见下文npm i html2canvas@1.0.0-rc.4使用import html2can...原创 2020-06-05 16:12:47 · 7496 阅读 · 0 评论 -
手机屏幕尺寸大全
在进行前端页面开发时,有时候需要根据手机进行适配,为避免每次查找麻烦,贴一个手机屏幕尺寸大全,数据来源:优设网-屏幕尺寸大全iPhone 11 Pro iOS 5.8 458 19 : 9 375 x 812 1125 x 2436 3.0xxhdpi iPhone 11 Pro Max iOS 6.5 458 19 : 9 414 x 896 1242 x 2688 3.0xxhdpi iPhone 1..转载 2020-06-01 11:36:58 · 4367 阅读 · 0 评论 -
H5:微信分享接入及避坑记录
前言项目中经常有这样的需求,某个页面需要分享到微信好友或朋友圈。在app中,可以通过接入sdk,调用sdk的方法实现分享。在H5中实现微信分享也是需要借助sdk。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力。不过在接入微信js-sdk之前,类似app注册应用账号一样,需要做些前置的准备工作。此处贴一.原创 2020-05-23 17:34:07 · 2351 阅读 · 0 评论 -
H5:echarts环形图避坑记录
概述在开发过程,经常会有需要展示各种图表数据的场景和需求。说到数据可视化方面,就不得不提到Echarts了。Echarts是一个强大的商业级别数据图表工具。它是一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等)。可以为前端开发提供多种类、直观、生动、可交互、可高度定制化的数据可视化图表。官方文档官方示例:https://echarts.apache.org/examp..原创 2020-05-23 10:53:51 · 760 阅读 · 0 评论 -
H5:微信分享页面缓存严重的解决方案
问题场景通过微信分享一个H5页面给用户,分享时页面参数拼接在url中。页面参数不同,页面内容不同。由于微信自带浏览器会缓存页面,当页面打开次数多了,会发现分享的B参数的页面,打开后仍是之前的A参数页面。在微信开放社区上查找一番,发现有些人也碰到类似问题,故综合网上及实际开发,总结了以下几个方案。解决方案1、手动清缓存android清除缓存方式:打开http://deb...原创 2020-03-12 10:01:02 · 8847 阅读 · 0 评论 -
Nginx访问本地项目及配置
场景在H5开发中,有时候有些问题只在线上环境出现,线上环境又不能随便更改代码和配置,比如,我们需要对页面进行重定向,正则匹配转发,那么我们能不能在本地调试就能模拟线上环境页面访问情况呢?答案是肯定的!那么如何做呢?模拟线上环境页面访问1、nginx线上环境使用的是nginx服务器。Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服...原创 2020-03-05 17:38:06 · 11340 阅读 · 0 评论 -
H5 Hybrid性能优化方案
在混合开发中,我们经常需要H5开发一些活动页面或内嵌的H5页面。当页面比较重,或网络较差时,经常出现加载缓慢,对客户体验不好。那么如果改善这个问题呢?先看一下webview加载流程,webview加载通常可以分为以下几个过程:### Webview加载流程大致可以分为以下几个阶段:1、Webview初始化2、下载和解析Html/js/css3、和app交互(不一定有)4...原创 2020-03-02 19:23:14 · 1872 阅读 · 0 评论 -
Vue:滚动页面到指定位置实现(避坑)
在Vue中,有三种方式可以实现H5页面滑动至指定位置方法1://先获取目标位置距离mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('targetbox'); this.target= targ...原创 2020-02-25 19:24:09 · 40635 阅读 · 0 评论 -
H5:消除div里面img的缝隙
当我们将img标签放于div中,仔细查看会发现img底部和div底部有一道很小的缝隙。那么如何解决这个问题呢?三种方式:1、定义容器里的字体大小为02、图片img标签display:block3、定义图片img标签vertical-align:bottom或vertical-align:middle或vertical-align:top原因: ...原创 2020-02-21 17:44:47 · 574 阅读 · 1 评论 -
H5:vue-awesome-swiper官方说明文档
https://www.swiper.com.cn/api/start/new.html转载 2020-02-17 14:46:43 · 16623 阅读 · 1 评论 -
H5:解决Vue在IOS13上页面回退不会刷新的问题
场景描述vue搭建的多页面应用项目,使用go(-1)回退至前个页面。正常的话,回退后会刷新前个页面,各个生命周期钩子函数触发。然而,在Android和ios13以下是正常的,到了ios13就不行了。解决方案由于项目为多页面应用,无法通过Vuex状态状态解决该问题,因为多页面应用创建了多个vue实例。同理,尝试了storage监听、evenbus也无法解决。问题原因...原创 2020-02-14 14:09:31 · 2808 阅读 · 0 评论 -
H5性能测试方案
H5性能测试方案H5性能优化之前,需要经过一番性能测试,检测各个阶段的耗时时间,从而对症下药,针对耗时较长的阶段进行调试和优化。那么有什么检测的方法呢?App端long t1 = System.currentTimeMillis();webView.loadUrl("");webView.setWebChromeClient(new WebChromeClient(){...原创 2019-12-26 10:00:18 · 941 阅读 · 0 评论 -
H5:IOS刘海屏适配
场景app部分页面使用H5混合开发,框架使用的是Vue。页面基本在Android上展示正常,在ios(iPhone 7、iPhone X、iPhone 11)上会出现两个问题:(1) 顶部标题栏即便是fixed定位,top为0,依然会留有一点缝隙,滑动的时候刘海左右两边可见滑动内容。(2) H5页面底部太贴近手机底部小黑条。三种方案根据问题场景,我想到了以下三个解决方案,...原创 2019-12-22 23:05:34 · 4353 阅读 · 0 评论 -
Vue:图片预览vue-photo-preview的使用
vue-photo-preview应用场景点击图片,能够以类似朋友圈的方式展示图片,主要功能:预览,放大。选择经过网上一番查阅,有三款插件比较不错,分别是 viewerjs、vue-photo-preview 以及 vue-picture-preview。经过简单比较,viewerjs 功能比较强大,更适合web端。vue-picture-preview 只有预览和切换...原创 2019-12-20 20:40:59 · 11818 阅读 · 3 评论 -
跨平台混合开发之DSBridge
DSBridge简介DSBridge是一个三端易用的现代跨平台 Javascript bridge, 通过它,你可以在Javascript和原生之间同步或异步的调用彼此的函数。特性: Android、IOS、Javascript 三端易用,轻量且强大、安全且健壮。 同时支持同步调用和异步调用 支持以类的方式集中统一管理API 支持API命名空间 ...原创 2019-12-20 19:22:08 · 5536 阅读 · 0 评论 -
Vue:new Date(date)在ios下的兼容性问题
问题:今天碰到一个奇怪的问题,格式为“2019-12-14 10:00”的时间,通过new Date()获取时间戳,在Android和ios上表现不一致。一番研究,才发现 (new Date("xxxx-xx-xx xx:xx")).getTime() 在 android正常,在ios返回NaN!解决方案:格式不使用xxxx-xx-xx xx:xx , 使用xxxx/xx...原创 2019-12-14 15:12:35 · 1745 阅读 · 0 评论 -
Vue:调试神器VConsole
自从接触Vue后,作为H5面对和手机端的调试总是深感麻烦。受制于网络,除了Chrome的调试外,还有一个调试神器也不错,那就是VConsole!VConsole是腾讯开源的一个轻量、可拓展、针对手机网页的前端开发者调试面板。开源地址和文档见 ->VConsole这里说一下在Vue中该如何接入:安装npm install vconsole在index.j...原创 2019-11-29 23:36:56 · 3663 阅读 · 0 评论 -
Vue: 倒计时
HTML:<div>{{countDownList}}</div>script:export default { data() { return { countDownList: '00天00时00分00秒', actEndTime: '2018-11-19 18:50:00' }; }, created...转载 2019-11-29 23:22:20 · 179 阅读 · 0 评论 -
H5:安装nginx服务器及部署H5项目步骤
云服务器上执行命令准备:云服务器一台、已打包待部署H5项目、SecureCRT软件安装nginx服务器:yum -y install gcc-c++ yum -y install pcre-develyum -y install zlib-develyum -y install openssl openssl-devel# 解压缩tar -zxvf nginx-1...原创 2019-11-28 13:54:27 · 3937 阅读 · 2 评论