草庐IT

H5Tinsert

全部标签

h5页面在移动端实现禁止缩放、双击放大和双指放大

h5页面如何在移动端禁止缩放、双击放大和双指放大呢?  h5的页面在手机浏览器里面访问时,有时候不小心点了,页面就变大了,那需要如何做,才能禁止缩放、双击放大和双指放大呢?实现该效果的代码如下(需要在js里面添加方法)://禁用缩放functionaddMeta(){$('head').append('');}setTimeout(addMeta,3000);//禁用双指放大document.documentElement.addEventListener('touchstart',function(event){if(event.touches.length>1){event.prevent

【钉钉免登录】使用dingtalk-jsapi将H5/小程序集成到钉钉,实现单点登录,H5/小程序免登

【钉钉免登录】使用dingtalk-jsapi将H5/小程序集成到钉钉,实现单点登录,H5/小程序免登一、创建H5微应用/小程序1.1、创建微应用1.2查看配置信息1.3配置服务器出口IP和应用首页地址二、免登实现(小程序、H5均可用)2.1安装钉钉API2.3引入API2.4检查当前环境是否在钉钉内2.5获取微应用免登授权码三、小程序发布3.1配置小程序AppID3.2运行并发布上传代码一、创建H5微应用/小程序1.1、创建微应用登录钉钉开发者后台:钉钉开发者后台创建H5微应用:应用开发-企也内部-钉钉应用-创建应用填写应用名称和应用描述1.2查看配置信息1.3配置服务器出口IP和应用首页地

微信小程序内嵌H5页面实现微信支付

背景:在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了。说干就干,在小程序中设置好基本信息后,一预览居然成功了,一切看来是那么顺利,可到了系统的支付环节时,小程序是无法调用JSAPI微信支付的,难不成要重构所有页面转成小程序?这可是个大工程,作为业余前端的我来说肯定搞不定。于是在网上就搜索了一下,确实有解决方案,楼主就花点时间给大家整理一下。前提条件:了解微信支付相关的接口文档,有微信小程序的基本开发经验。思路:小程序打开H5页面后,在需要调用微信支付的页面用js做当前页面环境判断:varis_w

安卓WebView(H5)调用原生相机及相册

在开始叙述正文之前笔者先声明一下应用场景:例如在网页上的即时通讯需要能拍照或者从图库选择图片来进行上传,此场景下就可以用到这篇文章的内容正文首先,如果你已经把相机以及访问文件夹的权限都加上了并且WebView的基础操作都做完了,就差上传图片了的话那就参考以下代码主,要是重写了setWebChormeClient(){}里的onShowFileChooser(){}方法privateValueCallbackUri>mUploadMessage;privateValueCallbackUri[]>mUploadCallbackAboveL;privateUriimageUri;//图片地址mWv

微信公众号 - 禁用 H5 网页长按图片时弹出的菜单(转发给朋友 / 保存到手机 / 收藏 / 搜一搜),苹果安卓系统都可暴力 100% 完美禁用菜单,任何前端框架、任何浏览器都适用的解决方案

前言关于微信公众号H5网站禁用长按弹出菜单的教程,网上的解决方案几乎都不好使,要么不兼容要么代码臃肿。本文实现了公众号网站或普通网站开发,强力禁用“长按图片”时弹出的微信菜单,按照本文提供的代码,保证任何前端技术、任何苹果安卓系统都可行有效100%禁用,如下图真机运行测试,注意看“屏幕圆圈光标触摸位置”,无论怎么长按都不会出现菜单了。您可以选择只给"某个"图片禁用,也可以直接给整页全部禁用!解决方案可参考如下代码,应用到您的项目中。拿Vue项目举例࿰

开源版商城源码V2.0【小程序 + H5+ 公众号 + APP】

内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示三、学习资料下载一、详细介绍这是一款轻量级、高性能、前后端分离的电商系统,,支持微信小程序+H5+公众号+APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城。技术特点前后端完全分离(互不依赖开发效率高)采用PHP7.2(强类型严格模式)Thinkphp6.0.5(轻量级PHP开发框架)Uni-APP(开发跨平台应用的前端框架)AntDesignVue(企业级中后台产品UI组件库)RBAC(基于角色的权限控制管理)部署运行的项目体积仅30多MB(真正的轻量化)二、效果展示1.部分代码代码如下

微信小程序内嵌H5网页

微信小程序内嵌网页1.登录微信公众平台,选择对应的小程序进入(个人类型的小程序暂不支持使用)2.在小程序后台左侧菜单选择“开发”–“开发管理”–“开发设置”–“业务域名”–“添加”–扫码进入,点击“下载检验文件”下载到电脑本地,提供给小程序开发运营者进行配置,将文件放置在域名根目录下,例如wx.qq.com,并确保可以访问该文件。点击添加输入你的HTTPS域名,点击保存校验刚刚部署的校验文件即可,如下图3.调用web-view组件实现小程序内嵌网页,webview指向网页的链接。可直接打开关联的公众号的文章不需要配置业务域名,其它网页需登录小程序管理后台配置业务域名。web-viewsrc="

H5获取手机型号,获取具体手机型号

 需求:H5页面获取手机具体机型在提交照片时传给服务端,并在pc端展示分析实现:因为H5是运行在浏览器上的,只能获取window上给的信息也就是浏览器信息。如下图所示,这是安卓机(华为)的拿取到的信息。重这个信息中我们可以获取到手机的入网机型代码,这个也是唯一,是由工信部批准的,是唯一不会变的。 苹果的我们是拿不到这个信息的,不过苹果我们可以根据逻辑分辨率来时区分机型(此方法无法区分具体机型比如xr与11都是414,896,2)那就做折中方案苹果机型做或的处理iPhone11(XR)下面是代码实现第一步 安装mobile-detect  yarnadd mobile-detect-s 到pac

微信小程序如何跳转H5页面

1、登录微信公众后台,进入【开发->开发管理->业务域名】,点击修改。2、首先请下载校验文件,并将文件放置在域名根目录下。我是把文件放在nginx主机的data目录下,然后通过增加nginx.config配置,重启nginx后可以通过域名直接访问该校验文件; nginx.config配置如下: 如何修改nginx.config配置可以看我之前的文章。3、配置完成之后,可以通过访问域名+文件名(https://域名/文件名.txt)的方式访问文件。4、能够访问校验文件后,继续配置业务域名(跳转目标页面的域名),业务域名需经过ICP备案,新备案域名需24小时后才可配置。域名格式只支持英文大小写字母

uni-app如何实现在H5环境中与web-view中的网页交互通讯

前言uni-app中的web-view是一个web浏览器组件,可以用来承载网页的容器,uni-app开发的app与web-view实现交互的方式相关简单,应用通过属性@message绑定触发事件,然后在web-view的网页向应用postMessage触发并收到消息即可,详细请参考官网:web-view|uni-app官网 主要实现代码参考下图所示。应用端代码:网页端代码:但是,以上方法只适合于APP,在H5环境中是不支持的,官方说明如下:那么,在uni-app如何实现在H5环境中与web-view中的网页交互通讯呢,按照官方的说法,使用window.postMessage方式实现!一、win