H5分享页总结

作者: 艾石溪 | 来源:发表于2017-05-02 20:26 被阅读128次

[技术文档][技术中心][iOS部][114啦]搜索结果分享
H5分享页总结
微信H5开发中分享链接不正常问题
关于微信分享-php
APP通过微信分享的H5跳转到APP内指定页面
什么才是微信H5引爆朋友圈的关键
微信端二次分享开发有感（2018-07-28）
[AP_11] APP中内嵌H5页面-元素定位环境搭建
APP内嵌H5定位
H5页面测试总结

想稍微写一点关于h5页面的总结，因为时间比较仓促，并没有适配所有的机型，但是对于页面的布局以及如何写页面还是感觉更了解了一点。
1: 如何是整个页面使用背景图铺满？

<doctype html>
    <head>
          <style>
            .main{
                 width: 100%;
                 height: 100%;
                 margin:0 auto; 
                 background:url(../images/bg.png) no-repeat;
                 background-size:cover;
            }
          </style>
    </head>
    <body>
           <div class="main">
           </div>
    </body>
</html>

2: 对于页面中所有的宽高，使用百分比，不要直接写死。同时，没有使用rem，使用的是百分比。

3: 其中让我感觉比较困难的一个点，单选按钮的样式的改变：

结果选中样式.png

代码如下：

<doctype html>
    <head>
        <style>
         .pay_list_c1 {
            margin-left: 10%;
            cursor: pointer;
            text-align: center;
            background-image: url(../images/单选框2.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: 0 0;
          }
        .radioclass {
           opacity: 0;
           cursor: pointer;
           -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
           filter: alpha(opacity=0);
           width: 2rem;
        }
        .on {
          background-image: url(../images/答题页对勾1.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: 0 0;
        }
        </style>
    </head>
    <body>
        <div class="center-problem-choice">
            <div class="problemA">
                <!-- <label>满意</label><input class="radioclass" type="radio" name="answer" value="answer" onclick="location='p2.html'"> -->
                <div class="div-span"></div>
                <label>满意</label>
                <span id = "radio1" class="pay_list_c1">
                    <input type="radio" name="paylist" value="1" class="radioclass" onclick="toggleClassTest1('p2.html')">
                </span>
            </div>
            
            <div class="problemB">
                <div class="div-span"></div>
                <label>不满意</label>
                <span id = "radio2" class="pay_list_c1">
                    <input type="radio" name="paylist" value="2" class="radioclass" onclick="toggleClassTest2('p3.html')">
                </span>
                <!-- <label>不满意</label><input type="radio" name="answer" value="answer" onclick="toggleClassTest2('p3.html')" class="radioclass"> -->
            </div>
        </div>
        <script type="text/javascript">
          function hasClass(obj, cls) {  
            return obj.className.match(new RegExp('(\\s|^)' + cls +   '(\\s|$)'));  
          }  
      
          function addClass(obj, cls) {  
            if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
          }  
      
          function removeClass(obj, cls) {  
            if (hasClass(obj, cls)) {  
              var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
              obj.className = obj.className.replace(reg, ' ');  
            }  
          }  
      
          function toggleClass(obj,cls, url){  
            if(hasClass(obj,cls)){  
               removeClass(obj, cls);  
            }else{  
                addClass(obj, cls);
                window.location.href = url;  
            }  
          }  
      
          function toggleClassTest1(url){  
            var obj = document. getElementById('radio1');  
            // var that = this;
            toggleClass(obj,"on",url);  
          }  
          function toggleClassTest2(url){  
            var obj = document. getElementById('radio2');  
            // var that = this;
            toggleClass(obj,"on",url);  
          }  
      </script> 
    </body>
</html>