很久没写博客啦,总结一下刚做完的项目吧~
一.项目主要应用的技术
公众号开发,其实就是类似于网页开发 前端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