微信公众号项目总结

最新推荐文章于 2024-01-15 10:34:40 发布

一个程序媛。

最新推荐文章于 2024-01-15 10:34:40 发布

阅读量3.3k

点赞数 1

本文链接：https://blog.csdn.net/Rqlinna/article/details/89363760

版权

很久没写博客啦，总结一下刚做完的项目吧~

一.项目主要应用的技术

公众号开发，其实就是类似于网页开发前端JS主要用的是Jquery ，UI框架是weui 。这里有个坑（r如果是用ES6写的，在pc端的微信打开公众号页面，JS会失效）。

//移动端调试代码
 <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
 <script> let vConsole = new VConsole(); </script>


//微信清除缓存
http://debugx5.qq.com

二.记录各种需求的实现

1）页面顶部内容和底部内容固定，中间内容自适应滑动

  <style>
      .header{
          position:fixed;
          top:0;
          height:10rem;
      }
      .content{
          /* padding-top的值是header的高，padding-bottom的值是footer的高 */
          padding:10rem 0rem;  

      }
      .footer{
          position:fixed;
          bottom: 0;
          height:10rem;
      }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>

2）tab选项卡

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .clearfix:after,
        .clearfix:before {
            content: " ";
            display: table
        }
        
        .clearfix:after {
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both
        }
        
        .nav {
            width: 100%;
            height: 100px;
        }
        
        .nav ul {
            height: 100%;
            display: flex;
        }
        
        .nav ul li {
            flex: 1;
            line-height: 100px;
            text-align: center;
            height: 100%;
            background-color: pink;
            box-sizing: border-box;
            border-right: 1px solid #000;
        }
        
        .cards ul {
            width: 100%;
            height: 200px;
            display: none;
        }
        
        .cards ul.active {
            display: block;
        }
        
        .cards ul li {
            width: 25%;
            line-height: 50px;
            text-align: center;
            height: 50%;
            float: left;
            background-color: skyblue;
            box-sizing: border-box;
            border: 1px solid #000;
        }
    </style>
<body>
    <div class="nav">
        <ul id="options">
            <li>找机构</li>
            <li>找套餐</li>
            <li>体检卡</li>
            <li>单位体检</li>
        </ul>
    </div>
    <div class="cards" id="cards">
        <ul id="mechanism" class="active">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
        <ul id="meal">
            <li>2</li>
            <li>2</li>
            <li>2</li>
            <li>2</li>
        </ul>
        <ul id="Checkup">
            <li>3</li>
            <li>3</li>
            <li>3</li>
            <li>3</li>
        </ul>
        <ul id="physical">
            <li>4</li>
            <li>4</li>
            <li>4</li>
            <li>4</li>
        </ul>
    </div>
 
    <script>
        let nav = document.getElementById('options');
        let bottom = document.getElementById('cards');
        for (let i = 0; i < nav.children.length; i++) {
            nav.children[i].index = i;
            nav.children[i].onclick = function() {
                for (let j = 0; j < bottom.children.length; j++) {
                    bottom.children[j].className = '';
                }
                bottom.children[this.index].className = 'active';
            
            }
        }
    </script>
</body>

</html>

3）自己写一个弹出框，弹出框的内容自定义。

  <style>
        /*占据整个屏幕*/
        .fullScreen{
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0.7;
            background-color: black;
            z-index: 9999;
            margin-top:12rem;
        }
        /*浮层区*/
        .floatLayer{
            position: fixed;
            top:14%;
            width: 100%;
            height: auto;
            background-color: white;
            z-index: 10000;
        }
        .floatLayer li{
            height: 3rem;
            line-height: 3rem;
            border-bottom:1px solid #f7f7f7;
            margin: 0.2rem 1rem
        }
</style>
<body>
     <p id="check1">筛选</p>
     <div id="bigcontent">
     </div>
<script>
  //点击弹出类型浮层
        $("#check1").click(function() {

            //清除之前的样式
            $(".fullScreen,.floatLayer").remove();
            $("#bigcontent").append
            (  //占据整个屏幕Div
                '<div class="fullScreen"></div>'

                //浮层区
                +'<ul class="floatLayer">'
                +'<li>全部</li>'
                +'<li>充值</li>'
                +'<li>消费</li>'
                +'<li>返健康币</li>'
                +'</ul>')

            //隐藏浮层
            $(".floatLayer li").click(function () {
                $(".fullScreen,.floatLayer").remove();

            })

        });
</script>
</body>

4）滑动加载更多

<script>
滚动条到页面底部加载更多案例 
$(window).scroll(function(){	
 var scrollTop = $(this).scrollTop();       //滚动条距离顶部的高度
 var scrollHeight = $(document).height();   //当前页面的总高度  文档高度
 var clientHeight = $(this).height();       //当前可视的页面高度   机器高度
 // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
 if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 
     //滚动条到达底部
     alert(3)
 }else if(scrollTop<=0){
	//滚动条到达顶部
	 alert(4)
 //滚动条距离顶部的高度小于等于0 TODO
 
 }
});
</script>

5）城市选择，类似手机通讯录

 <body>
        <!--右边固定-->
        <div style="position:fixed; width:2rem;height:100%;right:1rem;">
            <ul id="ulid" style="position:fixed; width:2rem;height:100%;right:1rem;">
                <li class="cityindex" data-to="A"> <a>A</a>

                </li>
                <li class="cityindex" data-to="B"> <a>B</a>

                </li>
                <li class="cityindex" data-to="C"> <a>C</a>

                </li>
                <li class="cityindex" data-to="D"> <a>D</a>

                </li>
                <li class="cityindex" data-to="E"> <a>E</a>

                </li>
                <li class="cityindex" data-to="F"> <a>F</a>

                </li>
                <li class="cityindex" data-to="G"> <a>G</a>

                </li>
                <li class="cityindex" data-to="H"> <a>H</a>

                </li>
                <li class="cityindex" data-to="I"> <a>I</a>

                </li>
                <li class="cityindex" data-to="J"> <a>J</a>

                </li>
                <li class="cityindex" data-to="K"> <a>K</a>

                </li>
                <li class="cityindex" data-to="L"> <a>L</a>

                </li>
                <li class="cityindex" data-to="M"> <a>M</a>

                </li>
                <li class="cityindex" data-to="N"> <a>N</a>

                </li>
                <li class="cityindex" data-to="P"> <a>P</a>

                </li>
                <li class="cityindex" data-to="Q"> <a>Q</a>

                </li>
                <li class="cityindex" data-to="R"> <a>R</a>

                </li>
                <li class="cityindex" data-to="S"> <a>S</a>

                </li>
                <li class="cityindex" data-to="T"> <a>T</a>

                </li>
                <li class="cityindex" data-to="W"> <a>W</a>

                </li>
                <li class="cityindex" data-to="X"> <a>X</a>

                </li>
                <li class="cityindex" data-to="Y"> <a>Y</a>

                </li>
                <li class="cityindex" data-to="Z"> <a>Z</a>

                </li>
                  <li class="cityindex" data-to="T"> <a>T</a>

                </li>
                <li class="cityindex" data-to="W"> <a>W</a>

                </li>
                <li class="cityindex" data-to="X"> <a>X</a>

                </li>
                <li class="cityindex" data-to="Y"> <a>Y</a>

                </li>
                <li class="cityindex" data-to="Z"> <a>Z</a>

                </li>
            </ul>
        </div>
        <!--全部城市-->
        <div style="margin-left: 2rem;">
            <div id="A">A
                <p>澳门特别行政区</p>
                <p>阿拉善盟</p>
                <p>鞍山市</p>
            </div>
            <div id="B">B
                <p>包头市</p>
                <p>白城市</p>
                <p>巴彦淖尔市</p>
            </div>
            <div id="C">C
                <p>长春市</p>
                <p>承德市</p>
                <p>重庆市</p>
            </div>
            <div id="D">D
                <p>大同市</p>
                <p>大庆市</p>
                <p>丹东市</p>
            </div>
            <div id="E">E
                <p>鄂尔多斯市</p>
            </div>
            <div id="F">F
                <p>福州市</p>
                <p>抚顺市</p>
            </div>
      
            <div id="H">H
                <p>杭州市</p>
                <p>湖州市</p>
                <p>亳州市</p>
            </div>
            <div id="J">J
                <p>嘉兴市</p>
                <p>金华市</p>
                <p>吉林市</p>
            </div>
        </div>
        <script>
        $('#ulid').on('click', 'li', function () {
            var id = $(this).data("to");
            $('html,body').animate({
                scrollTop: $('#' + id).offset().top
            }, 400);

        });
        // offset(): 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性：top和 left。此方法只对可见元素有效。
        //  $("#sntetwt").offset()：获得位移对象（此时其实啥也没做）
        //  $("#sntetwt").offset().top：获得位移高度
        </script>
    </body>

6）单选按钮组和多选按钮组

  <style> 
        .around {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap:wrap
        }
        .uncheck{
            width: 25%;
            text-align: center;
            border-radius: 10px;
            background-color: #f8f8f8;
            margin-top:1.5rem;
            list-style: none;
        }
        .checked{
            width: 25%;
            text-align: center;
            border-radius: 10px;
            margin-top:1.5rem;
            background-color:#008cd6;
            color:white;
            list-style: none;
        }
        </style>
<body>
        <ul id="ulid" class="around">
            <li class="uncheck">A</li>
            <li class="uncheck">B</li>
            <li class="uncheck">C</li>
            <li class="uncheck">D</li>
            <li class="uncheck">E</li>
            <li class="uncheck">F</li>
            <li class="uncheck">G</li>
            <li class="uncheck">H</li>
            <li class="uncheck">I</li>
        </ul>
        <script>
       //多选
        $(".around").on('click', 'li', function () {
            $(this).toggleClass("checked")
        })

       //单选
       $(".around").on('click', 'li', function () {
            $(this).toggleClass("checked")
            $(this).siblings().removeClass("checked")

        })
        </script>
    </body>

7）判断一个页面有没有“上一页”，例如微信公众号菜单点进去的页面没上一页，这时候的返回按钮指定到具体某个页面，如首页等。

<a class="navLeft" onclick="fanhui(this)" href="">返回 </a>
<script>
 function fanhui(e){
        if (document.referrer === '') {
            // 没有来源页面信息的时候，改成首页URL地址
            $(e).attr("href","/yfdgroup/home/home")
        }else{
            window.history.go( -1 );
        }
</script>

8）js获取域名，当前完整URL等，例如微信分享功能，自定义分享的图片，链接时就要与公众号的安全域名一致。


<script>
window.location.protocol+"//"+window.location.host; //   返回https://mp.csdn.net

window.location.host; //返回url 的主机部分，例如：mp.csdn.net  
window.location.hostname; //返回mp.csdn.net
window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)
window.location.pathname; //返回/a/index.php或者/index.php  
window.location.protocol; //返回url 的协议部分，例如： http:，ftp:，maito:等等。  
window.location.port //url 的端口部分，如果采用默认的80端口，那么返回值并不是默认的80而是空字符  


//例子：分享给朋友
 wx.ready(function () {
                wx.onMenuShareAppMessage({
                    title:"",
                    desc:",
                    link:"",     
                    imgUrl: "",
                    type: 'link',
                    dataUrl:'',
                    trigger: function (res) {
                        //alert('用户点击发送给朋友');
                    },
                    success: function (res) {
                        SaveShareRecord();
                    },
                    cancel: function (res) {
                        //alert('已取消');
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });
</script>

9)后端接口返回的字段是富文本，前端如何显示。

<script>
// $('<div>')   创建一个div  生成一个节点   $(".upLoad").html($('<div/>').html(content).text())        //content是后端返回的内容
</script>

10)解决js 中0.1+0.2！=0.3的问题

function numbersequal(a, b) {
return Math.abs(a - b) < Number.EPSILON;
}
var a = 0.1 + 0.2,
b = 0.3;
console.log(numbersequal(a, b)); //true

一个程序媛。

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫