制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)

     1.1     APP端页面用HTML5制作,头部需要加适配信息:

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit|ie-stand|ie-comp" />
    <meta name="description" content="7.13活动报名" />
    <meta name="keywords" content="7.13 活动 报名" />
    <title>7.13活动报名</title>

     1.2     页面制作时,注意布局,通常:

          1.2.1     重要的图片用img标签(例如头部banner等包含特定信息的内容图片),不重要的底板用背景形式显示,例如底部背景

          1.2.2     img图片,布局需要通常外层包含一个父级,例如div、header、p等等

          1.2.3     表单通常用form形式(无论是表单提交还是ajax提交),标签通常用span+input,用p包住,方便布局,例如:                   

<form id="applyForm" class="apply_form">
   <p class="apply_unit">
      <span class="apply_type">姓名:</span>
      <input type="text" id="name" name="name" maxlength="10" value="sunshine" />
   </p>         
</form>

          1.2.4     列表通常用ul形式,li里面有图片和文字,通常用div包图片,文字用p:

<ul class="more_list clearfix">
     <li class="more_item" id="activityDetailsBtn">
         <div class="icon_wrap">    
               <img src="img/activityDetails.png" class="icon" />
         </div>
         <p class="text">活动详情</p>    
     </li>
</ul>

          1.2.5     可以用header、section、footer等H5标签代替div标签

     1.3     切图要求时:

          1.3.1     除非整个背景是复杂的渐变等等,否则一般不切整块图做整个页面背景。通常是一部分一部分切,背景用background-color渲染,需要和设计协商。

          1.3.2     切图时,许多东西可以是图片,比如特殊字体、小部分特殊规则说明,用图片的形式避免特殊字体无法显示的窘境。

          1.3.3     (APP时,PC端无此规则)为防失真,设计给的图片通常都是750px(是Iphone6的屏幕尺寸两倍大《375px》),所以如果用两倍大的图片量尺寸且在iPhone6下做测试,在页面布局的时候要除以2,并且通常为了适应浏览器的缩放,布局用rem做单位。

     1.4     CSS布局时:

          1.4.1     px、em、rem以及百分比%的区别和使用。

               px:比较精确和稳定,1px=1像素,如果设置div宽度为100px,假设屏幕分辨率为1024*760,则表示1024分辨率(1024px)中有100px被div占据(分辨率以像素px作为基本单位),这和屏幕大小没有关系,也不随显示窗口大小的改变而改变,只和分辨率有关(所以窗口变小了,该div依旧200px,如果窗口不够大会出现滚动条;但是假设分辨率从1024*760改为800*600,此时div依旧200px,那么div会感觉变大了《因为同样大小的屏幕,分辨率从1024-->800》)

                em:1) 相对于body元素,1em=body元素的font-size大小      2) em会继承父级,如果父级设置了font-size,则 1em=父级元素的font-size大小,是相对大小,但是需要确定父级font-size

               rem:相对于根元素<html>的font-size大小(没有了继承父级尺寸概念,不会嵌套多了混乱),为了方便,通常设置<html>元素大小时10px,此时10px=1rem;     此满足了自适应不同屏幕大小的要求,用rem或者%做单位

               %:百分比是相对于父级元素,注意给最外层设置高度为百分比时,需要给html和body元素设置100%;

html, body{
     width: 100%;
     height: 100%;
}

          1.4.2     背景图片设置:

background: url(../img/success.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position:top center;

          1.4.3     屏幕自适应,设置HTML根元素的最小屏和最大屏时的font-size,影响rem

// 屏幕自适应
    var oHtml = document.documentElement;
    getSize();
    window.onresize = function() {
        getSize();
    };
 
    function getSize() {
        var screenWidth = oHtml.clientWidth;
        if (screenWidth <= 320) {
            oHtml.style.fontSize = 10 + 'px';
        } else if (screenWidth >= 640) {
            oHtml.style.fontSize = 20 + 'px';
        } else {
            oHtml.style.fontSize = screenWidth / 640 * 20 + 'px';
        }
    }

          1.4.4     vertical-align:只对行内元素有效,注意不是对文字进行设置,而是对占空间的图片等进行设置,text-top、text-bottom

          1.4.5     input type="tel"     app开发时,输入框会第一时间弹出数字输入框

2、关于微信二次分享 http://www.cnblogs.com/joshua317/p/4761948.html

     2.1     页面中引入js文件

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

     2.2     定义参数,包括需要分享的url、imgUrl、title、desc(description描述)以及四个需要从后台获取的参数(appId、timestamp、nonceStr、signature)和一个需要用到的微信jsapi列表参数(jsApiList)

// 分享页面
    var wurl = location.origin + '/h5/..../lottery.html';
    var wtit = '标题标题';
    var wimg = "图片地址";
    var wdesc = '内容描述';
    var this_url = encodeURIComponent(location.href.split('#')[0]);
    $.ajax({
        url: '/api..../get-signature?url=' + this_url,
        type: 'get',
        success: function(data) {
            wx.config({
              // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: data.response.appid, // 必填,公众号的唯一标识
                timestamp: data.response.timestamp, // 必填,生成签名的时间戳
                nonceStr: data.response.noncestr, // 必填,生成签名的随机串     
                signature: data.response.signature, // 必填,签名,见附录1
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });
            wx.ready(function() {
        wx.onMenuShareTimeline({
            title: wtit, // 分享标题
            link: wurl, // 分享链接
            imgUrl: wimg // 分享图标
        });
        wx.onMenuShareAppMessage({
            title: wtit, // 分享标题
            desc: wdesc, // 分享描述
            link: wurl, // 分享链接
            imgUrl: wimg, // 分享图标
            // type: '', // 分享类型,music、video或link,不填默认为link
            // dataUrl: '' // 如果type是music或video,则要提供数据链接,默认为空
        });
        }
    });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

打破常规的图表制作新思维!!!

上一篇给大家讲了一个专业、规范、完善的商务图表的元素应该如何布局! 可能很多小伙伴儿会有疑问,默认的输出图表样式跟最终我们想要达到的效果相差十万八千里。想要在...

3477
来自专栏编程

前端学习自学笔记:day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第六天的笔记:HTML AND CSS: te...

2055
来自专栏cnblogs

CSS3新特性应用之用户体验

一、光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:non...

2138
来自专栏Coco的专栏

【前端攻略】最全面的水平垂直居中方案与flexbox布局

1803
来自专栏项勇

笔记74 | 学习掌握ConstraintLayout的基本属性

2215
来自专栏闻道于事

正式学习第二天上午——常用标签及列表 0605

今天2017.0605上午,主要学习了常用标签和列表,以下面代码为例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

2826
来自专栏HTML5学堂

文本类样式 — 背景、文本、字体

上周我们通过之前讲解的知识点完成了对一个页面的布局操作,实现了页面的一级、二级布局,完成了页面主体框架的搭建。但是细心的你应该会发现,我们做出来的网页与网页PS...

7058
来自专栏web前端

HTML+CSS基础

第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

7409
来自专栏TechBox

一篇文章详解iOS之AutoResizing、AutoLayout、sizeClass来龙去脉前言三大适配技术

2946
来自专栏Android开发小工

利用Android嵌套滑动机制轻松实现顶部布局置顶

传统的Android事件分发是子控件消费了事件,那么父控件就不能再处理这个事件了。也就是说一旦内部的滑动控件消费了滑动操作,外部的滑动控件就不能获取到这个滑动动...

1503

扫码关注云+社区

领取腾讯云代金券