分类：h5

2021
06-13

WKWebview非全屏自动播放h5视频的实现方法（Swift、OC）

前言WKWebview加载一个视频播放的h5页面时，默认是需要用户点击一下才能播放视频，且视频播放时会全屏播放。如果想要h5页面视频非全屏自动播放该怎么做呢？Swift实现这个时候就需要设置WKWebview的configuration参数，我们先来看一下Swift的实现，代码如下：letconfiguration=WKWebViewConfiguration()configuration.allowsInlineMediaPlayback=trueif#available(iOS10.0,*){configuration.mediaTypesRequiringUserAc... 继续阅读 >

2021
06-05

Javascript之JSBridge初探

JSBridge的起源近些年，移动端普及化越来越高，开发过程中选用Native还是H5一直是热门话题。Native和H5都有着各自的优缺点，为了满足业务的需要，公司实际项目的开发过程中往往会融合两者进行Hybrid开发。Native和H5分处两地，看起来无法联系，那么如何才能让双方协同实现功能呢？这时我们想到了Codova，Codova提供了一组与设备相关的API，是早期js调用原生代码来实现原生功能的常用方案。不过JSBridge真正在... 继续阅读 >

2021
01-14

uniapp H5 https跨域请求实现

什么是跨域跨域是浏览器的专用概念，指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码，请求了B站点的数据，就是跨域。A和B要想被认为是同域，则必须有相同的协议（比如http和https就不行）、相同域名、和相同端口号（port）。如果你是做App、小程序等非H5平台，是不涉及跨域问题的。由于uni-app是标准的前后端分离模式，开发h5应用时如果前端代码和后端接口没有部署在同域服务器，就会被浏览器报跨域。本文主要介绍u... 继续阅读 >

2020
11-11

解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

1.页面在手机端不能上下滑动，在PC端浏览器正常滑动说明：在设置了overflow:auto;属性的前提下，H5页面在PC端浏览器里展示可以上下滑动，在ios上可正常滑动，在安卓手机上不能上下滑动；这现象并不是ios和安卓兼容性问题！原因：设置了touch-action:none;这属性为局部或者全局属性，将这条属性注释即可正常滑动。2.使用PullRefresh和List列表实现下拉刷新和上拉加载时出现的问题问题1.下拉刷新时在手机上，不论滑到任何位置，... 继续阅读 >

2020
11-10

详解nginx配置vue h5 history去除#号

vue的默认配置是使用hash模式，这样我们访问的时候都带有了一个#号，再支付回调的地址或者其他原因不支持#号或者不喜欢#号这种模式，优势就出现了需要去除#号，于是vue端就需要配置该模式，并且使用懒加载，vue端的配置如下：首先先声明一下，这是使用vue+nginx实现前后端分离的项目，并且使用vueaxios实现代理功能(允许跨域并且服务端已经开启跨域)，然后就是打包的配置：!!!注意，这里配置的assetsPublicPath一定要配置成 ... 继续阅读 >

2020
10-08

vue和H5 draggable实现拖拽并替换效果

前言公司项目需要做拖拽替换效果，本人用的vue框架。在网上找了很多资料都是用的Vue.Draggable(git地址)。但这个组件实现的拖拽后插入效果，我倒腾了很久也没有替换效果(如果Vue.Draggable能实现拖拽替换效果的话请大神给我留言)。JQ有实现拖拽的插件，我下载过一个插件并看过源码，大致原理是给目标元素设置定位属性，通过监听鼠标mousedown，mouseup事件，再计算鼠标位置变化，然后给元素样式设置偏移值来实现拖拽效果的。H5提... 继续阅读 >

2020
09-29

keras .h5转移动端的.tflite文件实现方式

以前tensorflow有bug在winodws下无法转，但现在好像没有问题了,代码如下将keras下的mobilenet_v2转成了tflitefromkeras.backendimportclear_sessionimportnumpyasnpimporttensorflowastfclear_session()np.set_printoptions(suppress=True)input_graph_name="../models/weights.best_mobilenet224.h5"output_graph_name=input_graph_name[:-3]+'.tflite'converter=tf.lite.TFLiteConverter.from_keras_model_fi... 继续阅读 >

2020
09-29

将keras的h5模型转换为tensorflow的pb模型操作

背景：目前keras框架使用简单，很容易上手，深得广大算法工程师的喜爱，但是当部署到客户端时，可能会出现各种各样的bug，甚至不支持使用keras，本文来解决的是将keras的h5模型转换为客户端常用的tensorflow的pb模型并使用tensorflow加载pb模型。h5_to_pb.pyfromkeras.modelsimportload_modelimporttensorflowastfimportosimportos.pathasospfromkerasimportbackendasK#路径参数input_path='inputpath'weight_... 继续阅读 >

2020
09-27

React.js组件实现拖拽排序组件功能过程解析

因为使用了react.js技术栈，所以封装优先考虑输入和输出。基于数据驱动去渲染页面、控制拖拽元素的顺序。由于我不考虑兼容IE8等旧版本浏览器，拖拽的效果采用了HTML5的拖放（Drag和drop）。当然，如果要求兼容性丰富，使用鼠标点击的相关事件也很简单。实现的效果如下：第一步是先了解H5拖放的相关属性，MDN上有详细的说明，链接有一点需要注意的是，react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法。例如原生的cl... 继续阅读 >

2020
09-27

Flutter使用JsBridge方式处理Webview与H5通信的方法

目前，移动跨平台开发作为移动开发的重要组成部分，是移动开发者必须掌握的技能，也是自我提升的重要手段。作为Google推出的跨平台技术方案，Flutter具有诸多的优势，已经或正在被广大开发者应用在移动应用开发中。在过去的2019年，我看到越来越多的公司和个人开始使用Flutter来开发跨平台应用，对于移动应用开发来说，Flutter能够满足几乎所有的业务开发需求，所以，学习Flutter正当时。众所周知，使用Flutter进行项目开发时，就... 继续阅读 >

2016
04-11

你真的了解H5吗？

H5广告，包括H5广告的设计流程，究竟有什么讲究，和阶段。为了能帮助更多的人了解H5广告，我专门做了一个讲义。同时，也让我意外的收到了非常好反馈和认！这是对我的极大鼓励！我的讲义内容仍然还有不少不完善和有待系统的内容。但是，我相信你在现在的互联网上应该很难再找到像是我这种体量的带有系统性的H5广告讲解内容了～希望能对这个行业作出微薄的贡献！目前互联网上最为全面的H5普及知识分享干货内容讲义！ 对H5的最初... 继续阅读 >