uni-app打包H5出现“网络不给力,点击屏幕重试” 和 H5端接口请求{“errMsg”:“request:fail”}解决方法
1.manifest.json中延长请求时间
"networkTimeout": {
"request": 120000, // 自定义配置request请求超时时间为120秒
"connectSocket": 60000, // 官方默认60秒
"uploadFile": 60000, // 官方默认60秒
"downloadFile": 60000 // 官方默认60秒
},
2.http请求换为https请求
1.解决文字和图片不在同一水平线问题
img {
width : 20px;
vertical-align: middle;
}
vertical-align: text-top; //顶部对齐
vertical-align: middle; //居中对齐
vertical-align: text-bottom; //底部对齐
2.去除鼠标点击事件
pointer-events: none; 去除鼠标事件
可以使一块div中的鼠标事件全部失效
3.uniapp开发实现点击按钮复制链接
<u-popup v-model="toShare" mode="bottom" border-radius="20" height="440" closeable="true">
<view class="share_con">
<view class="title">订单链接</view>
<view class="link_url">
<image src="https://s1.ax1x.com/2022/05/13/OslCXn.png"></image>
<view class="url">{{orderLink}}</view>
</view>
<view class="copy" @click="copyUrl(orderLink)">复制链接</view>
</view>
</u-popup>
//复制链接
copyUrl(url) {
uni.setClipboardData({
data: url,
success: function() {
uni.showToast({
title: '复制成功',
duration: 2000,
icon: 'none'
});
},
fail: function(err) {
uni.showToast({
title: '复制失败',
duration: 2000,
icon: 'none'
});
}
});
},
4.第一次使用图表
使用的是uniapp插件市场的秋云charts
5.一个比较好用的瀑布流插件
https://ext.dcloud.net.cn/plugin?id=5280
https://gitee.com/myDarling/uniapp-extend
6.跳转到 tabBar 页面只能使用 switchTab 跳转
uni.switchTab({
url: '/pages/index/index'
});
7.字符串转数字 转为浮点型
parseFloat() 转为浮点数
parseInt()是转为整数
999.如何让多个div横向排列而不换行 white-space: nowrap;的使用
8.字体渐变
background: linear-gradient(to right, #9D93FF, #FF8DD0);
-webkit-background-clip: text;
color: transparent;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.t-ctn {
width: 100%;
overflow-x: auto;
}
.t-ctn .s-ctn {
height: 150px;
white-space: nowrap;
font-size: 0;
}
.t-ctn .s-ctn div {
font-size: 14px;
box-sizing: border-box;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
display: inline-block;
width: 200px;
height: 100%;
border: 10px solid red;
}
</style>
<body>
<div class="t-ctn">
<div class="s-ctn">
<div>
<p>titletitletitletitletitletitletitletitletitletitletitletitletitle</p>
<p>body</p>
<img src="./logo.png" alt="">
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
<div>
<p>title</p>
<p>body</p>
</div>
</div>
</div>
</body>
</html>