最近根据公司的需求开发了一版平板应用,因为是第一次开发平板所以遇到了非常多的问题
1 平板应用在基座模拟和浏览器运行与打包之间的区别
刚开始没有平板,所以我选择运行在chrome浏览器里面.非常天真,以为和正常web页面开发没太大的区别.开开心心开发完后现实给了我沉重的一击.
1 echarts无法在平板上使用
这是最烦的一个点,其实也不是完全无法使用,需要使用renderjs,这个我就不细说了,因为最后调试了一天因为性能问题我放弃了这个方案.
在uni的插件商城里面发现了echarts的替代品,也就是ucharts.使用的时候需要登录,登录完一块钱试用一天,后面就只能开月卡,我这个白嫖党真是难受的不行.而且完全无法满足我的需求.产品要一个水球图.这ta 娘的怎么搞啊,继续在插件商城里面找,里面也有水球图,但是要不就是不兼容要不就是边边上有毛边看上去一点都不圆润
现实上效果更差,然后又去翻之前研究的renderjs的echarts.我真是脑子转不过弯,在网上又鬼了半天还是被我弄出来了,echarts的水球图需要重新下个包.这个网上一搜索一大把.反正是磕磕绊绊的在浏览器和基座上能显示出来了.但是在基座上性能巨差,整个页面都卡的不行.并且打包后在平板上跑还显示不出来.恶心坏了
妈的真是想骂人,可能我是真的菜吧,研究了这么久最后决定自己写一个吧,去网上借鉴一下别人的代码自己用css做一个 这里必须推一下在掘金里面发现的隐藏美少女前端 "苏苏哇哈哈" 苏苏的gitee仓库里面有非常多有意思的css_demo.对css感兴趣的朋友可以去看一看,我用的里面的水球图,但是水球图使用了'CSS.paintWorklet.addModule'.以我对css只是略有耳闻的技术完全不能把它搬到我的项目里面去,我就是这么菜,抄作业都抄不好,不过还好大佬的仓库里面还有第二种水球图的代码,我最后成功完成了一个能自定义的水球图
<template>
<div class="circle">
<div class="box"></div>
<div class="wave">
<div class="lang"
:style="{ animation: 'loadingWave 5s ease-in-out forwards,loadingWaveTop 5s linear infinite', top: '-150%' }">
</div>
<div class="lang2"
:style="{ animation: 'loadingWave 5s ease-in-out forwards,loadingWaveTop 5s linear infinite', top: '-150%' }">
</div>
</div>
</div>
</template>
<script module="acceptance" lang="renderjs">
export default {
name: '',
data() {
return {
}
},
created() {
this.setPointer()
},
computed: {
},
methods: {
setPointer() {
let style = document.createElement('style');
console.log(style, 55);
style.setAttribute('type', 'text/css');
document.head.appendChild(style);
let sheet = style.sheet;
//根据每一个时钟的数据为页面添加不同的keyframes
sheet.insertRule(
`@keyframes pointermove {
from {
top: -100%;
}
to {
top: -120%;}
}`);
sheet.insertRule(
`@keyframes loadingWaveTop {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}`);
}
}
}
</script>
<style>
.circle {
position: relative;
width: 13vw;
height: 13vw;
border-radius: 50%;
background-color: #85f7fb;
overflow: hidden;
}
.circle::before {
content: '50%';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 26px;
letter-spacing: 2px;
color: #ffaa7f;
font-family: sans-serif;
z-index: 2;
}
.box {
content: '';
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
background-image: linear-gradient(to top, #ffaa7f, #ffff7f, #aaffff);
}
.lang {
content: '';
position: absolute;
left: -50%;
width: 200%;
height: 200%;
top: -150%;
z-index: 1;
background-color: #85f7fb;
border-radius: 52% 25% 62% 69%/25% 38%;
}
.lang2 {
content: '';
position: absolute;
left: -50%;
width: 200%;
top: -150%;
height: 200%;
z-index: 1;
background-color: #fff;
border-radius: 42% 38% 40% 62%/28% 35%;
}
/* 底部液体上升动画 */
@keyframes loadingRun {
0% {
height: 25%;
}
100% {
height: 50%;
}
}
/* wave动画 */
@keyframes loadingWave {
0% {
top: -100%;
}
100% {
top: -150%;
}
}
@keyframes loadingWaveTop {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
因为平板上面没有document,所以我在script标签上加了个module="acceptance" lang="renderjs".具体原理我也不清楚.setPointer()函数里面的代码相当于是添加了一个style标签吧,里面的样式自定义.于此水球图完成
2 列表无限滚动
我最开始使用的是vue-seamless-scroll,和echarts一样的问题,在浏览器运行可以,平板不支持.后来又使用插件市场里面的maoUi,但是这个会有bug,会越滚越快,找不到什么好用的.自己写也麻烦的不行,要考虑各种兼容问题,后面选择把数据处理后用轮播图去做,效果也还行
3 样式被覆盖
不知道为什么我的p标签样式在基座和浏览器正常,但是打包后就会被不知道哪里的样式覆盖掉,搞的我非常头疼.最后选择把p标签换成了其他的标签
4 长列表展示
后端返回的数据量大了后就想用虚拟列表.但是最开始使用的好像也是在平板上不兼容,后面使用了"scroll-list" 这个也给我创造了很多麻烦,比如说高度问题,在基座和浏览器上正常的高度打包后变的特别高,然后就会划不动.或者因为后端返回的数据有问题然后一直重复请求.非常烦
5 mqtt
mqtt这个问题是公司大佬帮助解决的,mqtt连接就是WebSocket的一种前后端通讯根据.这个真是巨坑无比.不是说它不好用,在web端确实是挺好用的.然后在平板上基座运行或者在浏览器上模拟都没有问题.连接公司后端的mqtt服务快的很,一下就能连接成功,但是连接公司服务器的时候就不行了,3个后端一人研究了一天想不出来什么办法.最后大佬接手周末加班解决了,好像是什么配置的问题和前端小菜鸡无瓜.
这种平板太多兼容性要考虑了,真是以后都不想再写这种屎山代码了
