H5
ChinaLzw
#很少有人会主动接受自己的“输”,因为对大多数人来讲,“输”就等于失败。#
展开
-
Echart添加水印
参考案例 1graphic: [ { type: 'text', silent:true, z: 100, left: 'center', top: 'middle', style: { fill: '#ffffff20', text: [ '© 2020 版权信息' ].join('\n'), fontSize:14 } }],参考案例 2graphic: [{ ty原创 2021-09-23 15:00:39 · 1524 阅读 · 0 评论 -
html5 video 视频页面内缓存 - 全量加载方法
preload默认情况下我们实现一个简单的 H5 的播放器,只需要这么简单的代码就好:<video preload width="320" height="240" controls src="./static/videos/1.mp4"></video> 这个时候用户点击播放按钮就可以开始播放了。但是为了更好的用户体验,我们有的时候需要预加载视频,比如有的视频可能是在用户产生某些交互进行显示播放的。这个时候我们优先想到的是 preload 属性。此.转载 2021-09-08 14:28:04 · 7374 阅读 · 0 评论 -
jQuery全屏滚动插件fullPage.js
jQuery全屏滚动插件fullPage.js简介jQuery全屏滚动插件fullPage.js演示 >>>jQuery全屏滚动插件fullPage.js让你的页面分屏滚动参考搬砖https://www.csweigou.com/article/1358.htmljQuery全屏滚动插件fullPage.js让你的页面分屏滚动2015-12-23 21:47栏目:技术开发查看(34508)随着扁平化风格的日益流行,越来越多的网页越...原创 2021-09-02 14:45:47 · 714 阅读 · 0 评论 -
推荐CSS3动画插件
AOS.js页面滚动动画库立即传送>>>ANIMATE.CSS 开源CSS动画库立即传送 >>>WOW.js – 让页面滚动更有趣立即传送 >>> 演示传送 >>>原创 2021-09-01 11:14:45 · 600 阅读 · 0 评论 -
JavaScript判断终端机型
var browser = { iphone: (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)), android: (/(Android)/i.test(navigator.userAgent)), pc: !(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent))}if (browser.iphone) { alert('iOS');} else if (b原创 2021-08-17 09:39:08 · 210 阅读 · 0 评论 -
JavaScript实现手机浏览器中上滑隐藏地址栏
<script> window.οnlοad=function(){ if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) { bodyTag = document.getElementsByTagName('body')[0]; bodyTag.style.height = document.documentElement.clientWidth / scre原创 2021-08-16 15:03:56 · 1164 阅读 · 0 评论 -
【移动端】input type=“file” 在移动端H5页面实现调用本地相册、拍照、录音
<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />三个属性:accept - 规定可提交的文件类型。capture - 系统所捕获的默认设备。camera(照相机),camcorder(摄像机),microphone(录音)mutiple -支持多选。当支持多选时,multiple优先级高于capture。几种写法:<input type="file" accept..转载 2021-05-27 10:51:06 · 1822 阅读 · 0 评论 -
H5+API调用手机系统相机,实现拍照并上传到阿里云OSS
判断Runtime是否支持5+ API// 判断runtime是否支持5+ API if(navigator.userAgent.indexOf("Html5Plus")!=-1){ // 支持5+ API alert("支持5+ API"); }else{ // 不支持5+ API alert("不支持5+ API"); } H5+API调用手机系统相机,实现拍照<template> <div class="equipment" :.原创 2021-03-30 14:17:50 · 1062 阅读 · 0 评论 -
NativeJS理解和使用
概述: Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。 如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展到手机App的原生世界。 HTML/JS/Css全部语法只有7万多,而原生语法有几十万,Native.js大幅提升了HTML5的能力。 NJS突破了浏览器的功能限制,也不再需要像Hybrid那样由原生语言开发插件才能补足浏览器欠缺的功能。 NJS编写的代码,最终需要在HBuilder里转载 2021-03-02 09:54:45 · 2401 阅读 · 0 评论 -
Native.js示例汇总
Native.js虽然强大和开放,但很多web开发者因为不熟悉原生API而难以独立完成。这篇帖子的目的就是汇总各种写好的NJS代码,方便web开发者。众人拾柴火焰高,有能力的开发者多多提交NJS代码,大家都会给你点赞的,我们也会为每位共享NJS代码的朋友送上200积分。Android平台监听手机锁屏,解锁,开屏http://ask.dcloud.net.cn/article/35205直接拨打电话http://ask.dcloud.net.cn/question/4035将程序切转载 2021-03-02 09:50:04 · 527 阅读 · 0 评论 -
mui开发app之js将base64转图片文件
之前我已经做过一个利用cropper裁剪并且制作头像的功能。如何在mui app中实现相册或相机获取图片后裁剪做头像请看另一篇博客:mui开发app之cropper裁剪后上传头像的实现但是当时裁剪后图片是保存为base64格式的,这是h5 canvas建议使用的图片传输方式。很多时候很多api,比如mui中第三方插件map中有一个setIcon传入的必须是本地的图片文件地址,目前的第三方地图系统任然不支持base64的标注图,所以折腾了一晚之后终于在native.js中找到了将base64转化为图片转载 2021-03-02 09:46:05 · 411 阅读 · 0 评论 -
Uniapp H5导出Excel
客户端 兼容性H5 √iOSApp ×Android App ×微信小程序 ×安装vue-json-excel插件npm install vue-json-excel在main.js文件里加入import JsonExcel from 'vue-json-excel'Vue.component('downloadE...原创 2021-01-23 20:30:54 · 1910 阅读 · 1 评论 -
MUI 5+plus 获取APP根目录
/* 功能:获取App根目录 实例:app.getRoot() 当前访问路径:/page/index.html,结果:../ 当前访问路径:/page/child/index.html,结果:../../ 使用场景:app.getRoot()+"/page/child/index.html" */var app = app || {};app.getRoot = function() { if (window.plus) { return pl.原创 2020-07-05 17:22:57 · 1161 阅读 · 0 评论 -
【移动端】学习移动端的滑动手势事件
1.判断滑动的手势条件触发touchmove事件 移动的超过一定的距离,如10px, 像滑动了1px,2px这类的距离太小,不能视为滑动 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me转载 2020-05-26 01:44:35 · 440 阅读 · 0 评论 -
js判断移动端手指的上滑,下滑,左滑,右滑,事件监听
原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和startY; 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。document.getElementById("id").addEventListener("touchstart", function(e) { e.preventDefault(); startX = e.转载 2020-05-26 01:43:53 · 1976 阅读 · 0 评论 -
js监听手机端的touch滑动事件
实现原理:获取触摸首尾2点的坐标,Math.atan2获得2点连成的直线与x轴正方向的夹角,从而得到滑动的方向!原理图:<!doctype html><html><head><meta charset="utf-8"><title>javascript判断手指在移动端上滑动的方向</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.j转载 2020-05-26 01:42:44 · 796 阅读 · 0 评论 -
移动端H5如何调用相册和相机上传图片、音频、视频
在移动端上传图片方法很简单,使用HTML5中的input:file供文件上传。《一》常用属性值:1、accept:规定文件上传来提交的文件类型,此属性只能和type:file配合使用比如:<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> // 这里规定了只接受GIF和JPEG格式图像如果不限制图像的格式,可以写成如下:<input type="file" accept转载 2020-05-22 10:31:49 · 4542 阅读 · 1 评论 -
HBuilder webApp热更新(在线升级)的实现
#####一、制作移动APP资源升级包(wgt文件)制作wgt文件之前,清先在manifest.json文件中更新版本号,如果项目中的版本号和wgt文件中的版本号相同,则会更新失败,下图是制作wgt文件的方法:#####二、打开APP,先检查当前是否最新版本// 检查当前版本,与从后台获取的版本作比较,以此判断是否更新 plus.runtime.getProperty(pl...转载 2020-04-29 08:51:51 · 804 阅读 · 0 评论 -
web打包app(h5+app)版本自动更新的实现
文章目录背景说明 原生app自动更新实现 android自动更新实现 ios自动更新实现 h5+app的特点说明 h5+app自动更新实现背景说明web打包的app(也称为h5+app),是指将基于html5等移动端web技术,开发的web应用打包成的app。区别于原生app,5+app相当于给web应用加上了一层本地程序(ios、android等)的壳...转载 2020-04-29 08:49:08 · 1239 阅读 · 0 评论 -
H5 App实现热更新,不需要重新安装app
直接上代码吧,你竟然搜到了我的文章就应该知道了,为什么要热更新//app热更新下载//假定字符串的每节数都在5位以下function toNum(a) { //也可以这样写 var c=a.split(/\./); var c = a.split('.'); var num_place = ["", "0", "00", "000", "0000"], r = num_plac...转载 2020-04-29 08:44:33 · 847 阅读 · 0 评论 -
MUI 监听窗口显示事件
//监听窗口显示事件var ws =plus.webview.currentWebview();ws.addEventListener("show", function() { console.log(JSON.stringify(ws.Id))//获取参数});原创 2020-03-08 10:39:42 · 2128 阅读 · 2 评论 -
MUI 5+APP 进入后台,不关闭APP
前台切换到后台mui.plusReady(function() { if (plus.os.name.toUpperCase() == "ANDROID") { //方式一 var main=plus.android.runtimeMainActivity(); mui.back=function(){ main && main.moveTaskTo...原创 2020-03-07 10:54:55 · 1208 阅读 · 0 评论 -
H5+视频播放
<div id="video" style="width:100%; height: 200px; margin:auto;"></div>//创建视频播放对象。需要填入视频地址,视频初始化时间,parseInt(data.data.initial_time)这个值不能抽出来在外面声明,可能是这个插件的一个漏洞。 var video = new plus.vide...原创 2019-12-07 17:41:53 · 616 阅读 · 0 评论 -
MUI H5+ PhotoSwipe实现图片预览下载示例源码
QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 !MUI H5+ PhotoSwipe实现图片预览下载示例源码1、已实现图片预览2、已实现图片下载3、点击下载源码示例效果如下...原创 2019-09-21 13:51:16 · 462 阅读 · 0 评论 -
MUI H5+ previewimage实现图片预览下载示例源码
QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 !MUI H5+ previewimage实现图片预览下载示例源码1、已实现图片预览2、已实现图片下载3、点击下载源码示例效果如下...原创 2019-09-23 09:59:28 · 1016 阅读 · 0 评论 -
H5视频之video.js 视频直播前端
转自https://blog.csdn.net/liuyuqin1991/article/details/79310080原理视频直播的流程原理图如下: 大致过程(摘自知乎:https://www.zhihu.com/question/37887655/answer/104444735):流程如下:1.数据采集: 摄像机及拾音器收集视频及音频数据,此时得到的为原始数据 涉及...转载 2019-01-04 10:49:37 · 8669 阅读 · 1 评论 -
mui h5+webapi 实现微信浏览器的自定义分享(微信JSSDK)
QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 !公众号配置第一步:配置js安全域名(微信公众平台=>公众号设置=>功能设置=>js接口安全域名)第二步:配置白名单(微信公众平台=>基本配置=>ip白名单=>查看,配置多ip,可以换行输入),如果是本地测试,可以在百度中搜索...原创 2019-09-19 16:45:09 · 705 阅读 · 0 评论 -
mui——复制到剪贴板
下面是mui中封装的复制到剪贴板的方法,可以直接复制使用。// 复制方法function copy_fun(copy){//参数copy是要复制的文本内容 mui.plusReady(function(){ //判断是安卓还是ios if(mui.os.ios){ //ios var UIPasteboard = plus.ios.importClass("UIP...转载 2019-09-11 21:15:30 · 472 阅读 · 0 评论 -
H5之外部浏览器访问微信客户端网页
转自https://blog.csdn.net/qq_31142553/article/details/83025526 当我们打开微信浏览器的页面时,会提示这个下面教大家用Chrome浏览器打开微信页面,以方便调试。1、微信的UA(User agent:用户代理)。安卓微信UA: mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-...转载 2019-01-07 10:32:58 · 3387 阅读 · 0 评论 -
H5之外部浏览器唤醒微信
转自https://blog.csdn.net/shicent/article/details/78086996<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> &a转载 2019-01-07 10:28:59 · 32398 阅读 · 7 评论 -
H5视频之video.js播放m3u8
最近接触了这一块,简单说下吧。m3u8 是一种基于 HTTP Live Streaming 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成。目前 由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持,你可以直接通过video.src = 'xxx.m3u8'来实现。如果你希望兼容所有的浏览器的话, 你需要知道 Chr...转载 2019-01-04 11:18:55 · 16911 阅读 · 0 评论 -
H5视频之video.js播放rtmp直播源和hls直播源
转自https://blog.csdn.net/qq_40816360/article/details/84071977看了很多网上的坑,都是无法播放的,这次自己亲测能播放注意如果是自己制作的源的话,在推流之后要先等一小会才可以播放video.js播放rtmp源一定要注意你的Chrome浏览器允许播放flash,因为rtmp是基于flash的,设置可以从百度查询如何设置chrome浏...转载 2019-01-04 11:12:54 · 11663 阅读 · 2 评论 -
H5视频之直播流服务搭建(二)
转自http://www.mworkbox.com/wp/work/497.htmlwindows下一分钟配置ngnix实现HLS m3u8点播1. 下载nginx-1.5.10 for windows2. 新建子目录:nginx-1.5.10\html\hls,把生成的m3u8和切片好的ts文件或目录拷贝到hls目录下3. 修改配置文件nginx-1.5.10\conf\mime...转载 2019-01-04 11:08:02 · 1970 阅读 · 0 评论 -
H5视频之直播流服务搭建(一)
转自https://blog.csdn.net/qq_40816360/article/details/84037877继上次制作了RTMP直播源之后,因为互联网更常用的是HLS源和HTTP-FLV,所以这次又制作了HLS源所需条件:安装过程请看:https://blog.csdn.net/qq_40816360/article/details/83999836nginx-rtmp-...转载 2019-01-04 11:03:41 · 4343 阅读 · 0 评论 -
H5视频之RTMP、RTSP、HTTP协议流直播流测试地址
转自https://blog.csdn.net/u014162133/article/details/81188410一、RTMP、RTSP、HTTP协议这三个协议都属于互联网 TCP/IP 五层体系结构中应用层的协议。理论上这三种都可以用来做视频直播或点播。但通常来说,直播一般用 RTMP、RTSP。而点播用 HTTP。下面分别介绍下三者的特点。 1,RTMP协议(1)是流媒...转载 2019-01-04 10:41:40 · 14087 阅读 · 4 评论 -
使用h5+下载并打开文件,支持Android,IOS
QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 !<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1....原创 2018-12-18 15:01:26 · 21589 阅读 · 5 评论 -
HTML5 Plus 拍照或者相册选择图片上传
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_27626333/article/details/51896616 HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Came...转载 2018-09-27 11:01:10 · 1271 阅读 · 2 评论 -
Android H5拍照或选择上传图片+WebApi服务端保存文件
H5拍照+H5选照片<em id="clock_imgs"></em><a href="javascript:captureImage();">选择图片</a><button type="button" id="submit" >提交</button>// 拍照原创 2018-07-11 16:59:21 · 1643 阅读 · 0 评论 -
H5之外部浏览器唤起微信分享
转自https://blog.csdn.net/qq_18976087/article/details/79095735最近在做一个手机站,要求点击分享可以直接打开微信分享出去。而不是jiathis,share分享这种的点击出来二维码。在网上看了很多,都说APP能唤起微信,手机网页实现不了。也找了很多都不能直接唤起微信。总结出来一个可以直接唤起微信的。适应手机qq浏览器和uc浏览器。...转载 2019-01-07 10:36:23 · 18164 阅读 · 52 评论 -
H5之只允许微信浏览器打开,禁止从外部浏览器访问
转自https://blog.csdn.net/Louis_LN/article/details/53485068// 对浏览器的UserAgent进行正则匹配,不含有微信独有标识的则为其他浏览器var useragent = navigator.userAgent;if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') ...转载 2019-01-07 10:43:03 · 6496 阅读 · 0 评论