草庐IT

H5Tinsert

全部标签

移动端H5网页开发必备知识

简介工欲善其事必先利其器,今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的移动端H5网页开发常见问题汇总移动端开发必备知识-HybridApp像素像素即一个小方块,它具有特定的位置和颜色。图片、电子屏幕(手机、电脑)就是由指定数个具有特定颜色和特定位置的小方块拼接而成。比如我们的电脑屏幕1920*1080的电脑屏幕,横向有1920个像素纵向有1080个像素。像素单位有设备像素、逻辑像素、CSS像素3种。设备像素、独立像素、设备像素比、CSS像素设备像素设备像素也叫物理像素,是屏幕上最小的显示单元,即设

微信公众号 - H5 网页微信支付提示 “当前页面的URL未注册“,但是刷新页面后就能支付成功了,频发于苹果手机 IOS 系统上,并且提示的路径也不是当前真实的页面路径,好像被拦截了(详细解决方案)

问题描述网上大部分教程都是废话,基本都是检查后台配置,我本文也都检查了,都正常!所以没有任何该问题实质性的帮助。最近开发H5公众号网站时,前端接入微信支付时遇到了“前页面的URL未注册:xxx”的报错。重要的是,我只要重新刷新当前页面,这个错误就会离奇的消失(再走一遍流程,然后就能正常支付了)。如下图所示,手机真机测试支付时出现弹框提示错误,多数出现在苹果IOS手机上(安卓也有可能),本文从0-1逐步排查,100%保证你能彻底解决该问题!排查一为了确保万无一失&#x

APP测试、H5测试、小程序测试的区别

APP测试、小程序测试、H5测试、Web测试区别如下:APPH5Web微信小程序运行环境iOS、Android手机设备iOS、Android手机设备、PC的浏览器PC浏览器微信兼容性·iOS/Android各个手机型号·iOS/Android各个系统版本·iOS/Android各个屏幕尺寸    主要是手机端不同浏览器的兼容·浏览器的兼容·操作系统的兼容·iOS、Andorid设备、分辨率等·不同微信版本的兼容安装、卸载、升级·安装测试·卸载测试·版本升级更新测试(服务端需兼容不同版本APP)———发布·iOS:APPStore审核发布·Android:各应用市场审核——微信审核发布,审核周期

h5: 打开手机上的某个app

1、android端:直接通过URLScheme方式打开。2、ios端(2种):(1)使用URLScheme方式打开。(2)使用Universallink方式打开。3、Universallink方式使用注意事项:(1)需让原生app开发人员配置universallink给到前端;(2)只有ios9版本以上(包含ios9)的设备才支持universallink;(3)需让运维人员配置univerallink指定的h5页面路径(访问404时(微信或企微打开,手机没有安装app),定向到h5的落地页)。4、微信或企微微信中:都不支持URLScheme和Universallink打开APP,需使用微信

小程序、pc、h5端token的jwt解密解码(base64)

前言:很多时候我们需要对数据进行加密解密,比如解析token等 这个时候我们就需要对其进行数据操作,而不同平台的加密解密方法也是不一样的,这里我做一下记录。我们先来了解一下 jwt全称是JSONWEBTOKEN JWT是用于用户与服务器之间身份认证的密码。这个“密码”的作用简单来说就是一个:就是告诉服务器当前用户是谁。用户登录后,服务端根据一定的规则,生成TOKEN。后续用户在每次请求时,将TOKEN携带上一起发送给服务器。JWT一般由三部分构成分别是header、payload以及signatureheader:一般是一些固定的信息{'typ':'JWT',//声明类型'alg':'HS25

vue项目h5端判断所处环境(支付宝、微信、判断安卓和iOS环境)

一、判断是否为支付宝坏境isAlipayClient(){  if(navigator.userAgent.indexOf('AlipayClient')>-1){   returntrue  }  returnfalse },二、判断安卓还是ios phoneOs(){  varu=navigator.userAgent,   isAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1,   isiOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/)  if(isAndroid){   return'Andr

H5查看pdf文件(pdfh5)

我用的是pdfh5来查看的H5中的pdf文件--使用pdfh5插件来打开pdf文件--下面是两种使用方法,方法一、二都可以(但是我在使用方法二时有卡顿现象,可能是因为未开启懒加载)--方法二中的on可以打印出来错误信息 使用方法     1、引入pdfh5npminstallpdfh5    2、在vue文件中使用以下代码(这里创建了一个新的文件,然后再当前的新页面中打开pdf文件)htmljs importPdfh5from"pdfh5";//这两个一定要引入import"pdfh5/css/pdfh5.css";//这两个一定要引入,这个是在加载时,顶部会出来一个加载进度条和一些其他的样式

从H5跳转到小程序(获取小程序Scheme码)

        从H5跳转到小程序,可以获取小程序的Scheme码然后直接使用window.location.href跳转过去(跳转的小程序要在公众平台能查的到)。//this.url为获取到的小程序码window.location.href=this.url    要获取小程序码首先要拿到 接口调用凭证 。    接口调用凭证需要向对应的接口发起请求。请求为GEThttps://api.weixin.qq.com/cgi-bin/token    参数://固定值grant_type:'client_credential',//小程序idappid:'****************',//

【Appium】测试时遇到手机内嵌H5页面的切换问题

前言:H5页面简单理解就是在手机内嵌套了一些网页格式的信息,可以让手机的应用看起来更丰富一些。而当手机内嵌H5页面时,常规的app定位方法就没法使用了,我们需要先切换到H5页面才能进行下一步的定位,那该怎么操作呢,详细如下:目录一、确认app中哪个页面使用了H5技术二、配置H5页面对应的chrome驱动🍓2.1、确认H5页面内置的chrome版本🍓2.2、下载相匹配的chrome驱动版本🍓2.3、将chrome驱动放到appium对应目录下🍓2.4、注意事项三、编写脚本进行H5页面的切换🍓3.1、获取H5页面标签信息🍓3.2、切换到H5页面🍓3.3、H5页面元素定位🍓3.4、退出H5页面返回手

不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

人生路漫漫,坑,是活久了见。程序猿世界里各种奇葩的需求都有,随之而来的各种坑也是层出不穷。应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他,刷到的朋友们就赚到了,你懂的~~~~~~收藏吧!  事情前情概述,昨天IBM的同事前来咨询我怎样实现微信分享功能。经过一系列的细细道来。原来他们前端是用uniapp开发的一个app,现在要实现分享功能。他们前端的小伙伴没有这方面的经验,折腾了半天没有眉目。那么接下来我从以下三个方面来解剖如何实现分享。功能介绍:微信分享及收藏是指第三方 App通过接入该功能,让用户可以从App分享文字、图片、视频、网页、小程序、音乐视频至微信好友会话、朋友圈或添加到