h5开发_h5开发短信登录 - CSDN
精华内容
参与话题
  • 移动端H5页面开发的几种方法

    万次阅读 2019-02-02 09:48:30
    单位: px 宽度百分比,高度px 在不同屏幕下的效果是不一样的,可用媒体查询(@media)对不同宽度的手机进行适配,麻烦,不推荐使用 单位:rem 1、flexible ...2、原生js重置rem单位 (function (doc, win, imgW) { ...

    单位: px
    宽度百分比,高度px
    在不同屏幕下的效果是不一样的,可用媒体查询(@media)对不同宽度的手机进行适配,麻烦,不推荐使用

    单位:rem
    1、flexible
    用法:https://blog.csdn.net/sinat_27358671/article/details/82772206
    2、原生js重置rem单位

    (function (doc, win, imgW) {
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        console.log(clientWidth);
                        if (!clientWidth) return;
                        if (clientWidth >= imgW) {
                            docEl.style.fontSize = '100px';
                        } else {
                            docEl.style.fontSize = 100 * (clientWidth / imgW) + 'px';
                        }
                    };
    
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window, 750);
    

    其中的750为设计稿尺寸,当宽度大于750,html设置字体大小为100px。
    如下图,不同宽度下的效果
    在这里插入图片描述
    在这里插入图片描述
    单位:vw,vh
    vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
    vh:视窗高度的百分比
    兼容性:
    (1)桌面 PC
    • Chrome:自 26 版起就完美支持(2013年2月)
    • Firefox:自 19 版起就完美支持(2013年1月)
    • Safari:自 6.1 版起就完美支持(2013年10月)
    • Opera:自 15 版起就完美支持(2013年7月)
    • IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)

    (2)移动设备
    • Android:自 4.4 版起就完美支持(2013年12月)
    • iOS:自 iOS8 版起就完美支持(2014年9月)

    展开全文
  • H5开发是什么?

    千次阅读 2019-07-12 23:28:24
    H5开发就是HTML5开发。 H5能自适应手机端,相当于一个链接,一个页面。 也许百度H5,会出现一系列像易企秀一样做页面宣传的东西。不过,想想也没错啊,不也和网页一样吗,只是对手机端友好。HTML5比传统的HTML,不...

    H5开发就是HTML5开发。

    H5能自适应手机端,相当于一个链接,一个页面。

    也许百度H5,会出现一系列像易企秀一样做页面宣传的东西。不过,想想也没错啊,不也和网页一样吗,只是对手机端友好。HTML5比传统的HTML,不就是由于它的强大的标签,以及强大的样式,应运而生了它的自适应吗?适应了手机。

    总之,技术上所说的H5开发就是HTML5,所以说,没有必要想的太高级。

    展开全文
  • h5页面开发

    千次阅读 2018-08-01 16:43:00
    笔者将h5开发过程中常见的一些问题和解决办法列举出来,有需要的朋友可以参考一下。 1. 安卓浏览器看背景图片,有些设备会模糊。  同等比例的图片在PC端页面和移动手机端页面的分辨率差很多,原因和devicePixel...

            相信大家在做h5页面开发的时候,也会遇到一些问题。笔者将h5开发过程中常见的一些问题和解决办法列举出来,有需要的朋友可以参考一下。

    1. 安卓浏览器看背景图片,有些设备会模糊。

            同等比例的图片在PC端页面和移动手机端页面的分辨率差很多,原因和devicePixelRatio有关。手机分辨率比PC端的分辨率小,按照分辨率来显示网页会让字体变得很小。所以苹果当初就把iPhone 4的960*640分辨率,在网页里只显示了480*320,devicePixelRatio=2。现在android比较乱,有1.5的,有2的也有3的。

            想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍)。例如一个div的宽高是100100,背景图必须得200200,然后background-size:contain;,这样显示出来的图片就比较清晰了。

            代码如下:

    background:url(../images/icon/all.png) no-repeat center center;

    -webkit-background-size:50px 50px;

    background-size: 50px 50px;display:inline-block; width:100%; height:50px;

    或者指定 background-size:contain;都可以

     

    2. 图片加载

            若遇到图片加载很慢的问题,对这种情况,手机开发一般用canvas方法加载。

            下面举例说明一个canvas的例子:

            <li><canvas></canvas></li>

            js动态加载图片和li 总共举例17张图片!

            var total=17;

            var zWin=$(window);

            var render=function(){

             var padding=2;

             var winWidth=zWin.width();

             var picWidth=Math.floor((winWidth-padding*3)/4);

             var tmpl ='';

             for (var i=1;i<=totla;i++){

             var p=padding;

             var imgSrc='img/'+i+'.jpg';

             if(i%4==1){

              p=0;

             }

      tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';

             var imageObj = new Image();

             imageObj.index = i;

             imageObj.onload = function(){

     

    3. 防止手机中网页放大和缩小

            手机网站开发者都应该都知道的基本常识,就是设置meta中的viewport。

            除此以外,当我们在一些手机网站看到如下声明时:

      <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

            设置了DTD的方式是XHTML的写法,假如我们页面运用的是html5,可以不用设置DTD,直接声明<!DOCTYPE html>。

            使用viewport使页面禁止缩放。通常把user-scalable设置为0来关闭用户对页面视图缩放的行为

            <meta name="viewport" content="user-scalable=0" />

            但是为了更好的兼容,也可以使用完整的viewport设置。

            <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

     

    4. apple-mobile-web-app-capable

            apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。

            语法:

            <meta name="apple-mobile-web-app-capable" content="yes">

            说明:如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

     

    5. html5调用安卓或者ios的拨号功能

            html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。

            如下:

            <a href="tel:10010">10010</a>

     

    6. 上下拉动滚动条时卡顿、慢

            body {

     

             -webkit-overflow-scrolling: touch;

     

             overflow-scrolling: touch;

     

            }

            以上就是笔者整理的一些常见的h5页面开发中会遇到的问题。当然,如果觉得自己动手开发麻烦,预算又充足的话,也可以找外部承包商来完成开发。笔者体验过这家服务商开发的h5页面,效果还可以哦。

     

    展开全文
  • h5开发的一些个人总结

    千次阅读 2019-03-01 21:48:01
    在之前开发一些h5活动页的过程中,踩过了一些坑,所以整理出一些个人所接触到的对于h5活动页开发的总结,主要分为:布局适配,交互体验,兼容,调试工具这四个方面。欢迎大家补充指正。 1. 布局适配 a. 让当前...

    在之前开发一些h5活动页的过程中,踩过了一些坑,所以整理出一些个人所接触到的对于h5活动页开发的总结,主要分为:布局适配,交互体验,兼容,调试工具这四个方面。欢迎大家补充指正。

    1. 布局适配

    a. 让当前viewport的宽度等于设备的宽度

    <meta name= "viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1">
    复制代码

    理解:

    • phys.width,device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width。 其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取。如iphone6的phys.width为750px,而css-width为375px。

    • 浏览器的一个默认行为: 假设,浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上,肯定会放不下,手机端横向会出现滚动条,怎么处理这个问题呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如:safari iphone:980px; opera:850px; Andriod webkit:800px;IE:974px;然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑端页面没有出现横向滚动条,而且字迹明显变小的原因。

    • meta name= "viewport" content= "width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1"的作用体现 (meta标签中,width有两个含义,第一、width为phys.width,第二,width也为虚拟窗口的width)

    • 此时的iPhone6的phys.width也变成了css-width即375px,可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。

    • 如果此时的设计图是375px的手机端页面,此时的虚拟窗口的宽度也为375px,再装进phys.width为375px的手机,当然如设计稿一样的效果,不会缩放,也不会出现横向滚动条。

    b. Rem 适配

    为了精确的还原视觉稿,移动端样式采用px作为默认单位,使用postcss-pxtorem作为转换rem工具插件
    安装

     yarn add postcss-pxtorem
     #OR
     npm i postcss-pxtorem -S
    复制代码

    package.json配置(以width375视觉稿为准)

    "postcss": {
        "plugins": {
          "autoprefixer": {},
          "postcss-pxtorem": {
            "rootValue": "37.5",
            "propList": ["*"]
          }
        }
      }
    复制代码

    在index.html中重置root节点的rem数值

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
      </head>
      <body>
        <div id="app"></div>
      </body>
      <script>
        // 事件监听
        document.addEventListener('DOMContentLoaded', resetRem)
        window.onresize = resetRem
        /**
         * [resetRem 重置Rem数值]
         */
        function resetRem () {
          let documentCtx = document.documentElement
          documentCtx.style.fontSize = documentCtx.clientWidth / 10 + 'px'
        }
      </script>
    </html>
    复制代码

    input的placeholder文本位置偏上的情况

    input的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决方案时是设置css line-height:normal;

    2. 交互体验

    a. 去掉 a,input 在移动端浏览器中的默认样式 (禁止 a 标签背景 在移动端使用 a标签做按钮的时候,点按会出现一个“暗色”的背景,去掉该背景)

    a,button,input,optgroup,select,textarea {
        -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
    }
    复制代码

    b .禁止长按 a,img 标签长按出现菜单栏(使用 a标签的时候,移动端长按会出现一个 菜单栏,这个时候禁止呼出菜单栏):

    a, img {
        -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
    }
    复制代码

    c. 流畅滚动

    body{
        -webkit-overflow-scrolling:touch;
    }
    复制代码

    d. 禁止用户长按选中

    -webkit-touch-callout:none;  //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口
    -webkit-user-select:none; //webkit浏览器  
    -khtml-user-select:none; //早期浏览器 
    -moz-user-select:none; //火狐 
    -ms-user-select:none; //IE10 
    user-select:none; 
    复制代码

    e. transition清除闪屏

    有时候需要使用到一些动效,但是会出现闪屏的情况

    -webkit-transform-style: preserve-3d; //设置内嵌的元素在 3D 空间如何呈现:保留3D
    -webkit-backface-visibility:hidden; //设置进行转换的元素的背面在面对用户时是否可见:隐藏
    复制代码

    3.兼容

    a. vue2.0打包出来的项目在ios9中打开会白屏

    这是个较为隐蔽的问题,当时线上出这个问题的话定位了很久,按照网上搜出来的结果都是说es6的结果没有转译,所以就尝试安装了一些转译插件。后面发现只需要在config/index.js里改一下声明关键词, 然后问题就解决了。

    const path = require('path')
    // 改为
    var path = require('path')
    复制代码

    b. 某些情况下非可点击元素如(label,span)监听click事件,ios下不会触发

    针对此种情况只需对不触发click事件的元素添加一行css代码即可

    cursor: pointer;
    复制代码

    c. ios对时间date()的支持不一样

    var date =new Date("2016-05-31 00:00:00 ");
    复制代码

    这种写法在安卓和pc上都正常的,唯独在ios手机上会显示NAN,调试发现,ios上只支持格式:

    var date =new Date("2016/05/31 ");
    复制代码

    调试发现2016/05/31等同2016-05-31 00:00:00,也就是说ios默认就是从0开始计算的,我们不需要设置后面的时分秒为00:00:00

    d. text-indent和box-sizing,部分安卓机中使用text-indent属性会使元素宽度超过100%

    // 加上即可正常
    box-sizing: border-box;
    复制代码

    4.调试工具 --- Xcode

    在这些样式交互完成之后,在移动端我们需要进行接口调试,这样的话我们就很希望能像pc端的开发一样,可以看到控制台, 网络请求情况这些信息,能够更好的帮助我们完成开发,定位问题。 之前想查看接口信息的话,是使用charles抓包工具的,但是个人觉得还是并不是那么方便,没有做到很好的集成。下面介绍一下我本人习惯使用的工具Xcode

    • 打开调试工具,选择Simulator
    • 在Hardware中选择我们要进行调试的机型以及系统

    • 打开浏览器,输入一个本地项目的地址,同时打开safari浏览器,在开发模式下可以看到本地项目的服务地址

    • 选中之后,就可以查看网络请求,控制台之类的信息了
    展开全文
  • h5 app开发 教程

    万次阅读 2018-03-12 13:57:59
    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP。 HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是...
  • H5开发

    千次阅读 2019-09-26 09:37:10
    HTML5在2012年及以前,还是一个模糊的概念,处于一种萌芽期的状态,直到2013年进入行业的增长期,到2014年,采用HTML5技术实现的“Flappy Bird”“围住神经猫”等小游戏带来了该行业爆发,并随着HTML5标准规范的制定...
  • Web h5开发 初学总结

    万次阅读 2020-01-15 10:51:51
    html5 = 标记+javascript api+css HTML标记(也称为结构) CSS样式(也称为表示) JavaScript(也称为行为) H4 &amp;amp;amp;amp;lt;!DOCTYPE html PUBLIC &amp;amp;amp;quot;-//W3C//DTD ...
  • 一步一步教你如何开发h5页面

    万次阅读 2018-02-05 16:05:07
    第一步:工具安装,我选择了能够辅助我们快速开发的light开发工具 1. light依赖node环境,所以首先要安装node,https://document.lightyy.com/tools/index.html这里有详细的安装说明及安装包下载地址
  • H5和flash的区别

    万次阅读 2017-01-05 18:03:30
    与Flash技术相比,H5技术不但不需要插件、而且还是开发免费,以及对搜索引擎友好等特点更适应移动端开发的特点深受广大开发者的喜爱。 缺点:对于不兼容H5技术的浏览器与屏幕的移动端,H5的表现也是非常糟糕
  • H5游戏开发教程1

    万次阅读 2018-08-21 11:24:56
    近期由于工作需要,开发了一系列H5小游戏,最早以前使用原生的canvas开发了,但是开发效率比较低,虽然好多西可以灵活定义,比如滤镜处理,渐变等。但是整体而言开发速度慢,很多时候满足不了实际开发需要。后来逐渐...
  • 10大H5前端框架

    千次阅读 2018-12-07 15:55:47
    http://www.cnblogs.com/kingboy2008/p/5261771.html
  • Unity开发H5游戏总结01

    万次阅读 2018-01-14 11:29:15
    1.在编辑器中中文显示正常,发不出来就不显示,坑了我好久,上网查阅有大神发现只要换成ttf格式的字体即可2.克隆一个游戏对象然后对它进行操作,对我们来说是unity中再正常不过的功能,但是在web端就不行,不知道为...
  • HBuilder快速搭建H5+应用

    万次阅读 2020-04-13 08:49:46
    一、环境搭建 1.安装HBuilder HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和...利用HBuilder可以快速的搭建与H5+应用和原生APP进行交互 从官网下载...
  • H5 游戏主流引擎和编程语言

    万次阅读 2018-12-01 16:04:46
    引言:最近微信新版本,主推小程序中的小游戏模块,一个 “跳一跳” 的 H5 游戏瞬间爆火,虽然很多传言说 H5 真正盈利的时机未到,因为它的突出作品大多是简单的小游戏,好玩但不吸引付费。然而,H5 游戏巨大流量和...
  • h5开发必备之切图工具cutterman

    万次阅读 2018-04-20 22:35:17
    h5开发必备之切图工具cutterman 设计师,给我们开发的psd图,很多时候需要我们切的,那么我们有什么快速切图的工具。 今天来介绍一块很是牛逼的ps插件,它非常小但是功能非常强大,可以节省很都传统切图的时间。 ...
  • 个人微信支付宝免签约解决方案整理:http://www.likeyunba.com/demo/PAYDEMO/index.html 作者:TANKING
  • H5+Android混合开发电视APP

    千次阅读 2018-07-05 21:51:30
    但是目前在我们公司电视端的应用几乎为零,所以就拟定题目为《基于H5技术的新型电视应用》,经过43小时的奋斗搞定小demo并最终获得了2等奖5999奖金,好了闲话不多说下面就针对H5+Android混合开发电视app进行总结归纳...
  • 了解使用HBuilder进行H5的web和app开发

    万次阅读 2014-11-19 17:08:42
    提供h5网站和app的开发框架和开发工具: 1、提供开发工具HBuilder 2、提供开发框架MUI 开发者可以只使用1(开发工具)或2(开发框架);代码使用js+css实现;使用Native.js实现app功能打包发布 详细说明见官方...
  • H5与native有啥区别?

    万次阅读 2017-05-03 14:19:36
    app测试,H5与native有啥区别? native是使用原生系统内核的,相当于直接在系统上操作。是我们传统意义上的软件,更加稳定。 但是H5的APP先得调用系统的浏览器内核,相当于是在网页中进行操作,较原生APP稳定性...
  • 会员免费看,...微信h5支付开发是子恒老师《子恒说微信开发》视频教程的第17部。详细讲解了微信H5支付开发,内容包含开通H5支付,实现微信h5支付,订单查询,关闭订单等等。欢迎反馈,微信号:QQ68183131
1 2 3 4 5 ... 20
收藏数 80,166
精华内容 32,066
关键字:

h5开发