首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >制作H5响应式页面注意事项、微信二次分享

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

作者头像
用户1148399
发布2018-01-09 16:02:16
1.3K0
发布2018-01-09 16:02:16
举报
文章被收录于专栏:web前端web前端

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、关于微信二次分享 https://cloud.tencent.com/developer/article/1432336

     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,则要提供数据链接,默认为空
        });
        }
    });
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-08-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档