uniapp 踩坑总结

scroll-view ios出现滚动条ios端真机 scroll-view组件无法隐藏滚动条‘’使用了这些解决方法也不行使用css修改滚动条样式:-webkit-scrollbar { display: none;width: 0 !important;height: 0 !important;-webkit-appearance: none;background: transparent;

昵称老重复

3048人浏览 · 2021-07-05 10:38:09

昵称老重复 · 2021-07-05 10:38:09 发布

日常问题总结，持续更新

不停踩坑，总结分享，有问题，还是无法解决，一起沟通交流，只希望能奉献绵薄之力，多个解决方案

scroll-view ios出现滚动条

ios端真机 scroll-view组件无法隐藏滚动条，安卓小程序无滚动条

使用css修改滚动条样式

:-webkit-scrollbar {

display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;

}
IOS端依然出现滚动条安卓小程序无
page.json中设置
“app-plus”: {
“scrollIndicator”:“none”
},
IOS端依然出现滚动条安卓小程序无

最终解决方案：ios滚动条问题感谢大佬的解决方案

真的可以解决问题
   /deep/.uni-scroll-view::-webkit-scrollbar {
        display: none
    }

uni-app 手机上背景图白屏

本地背景图片不能超过40kb解决方法

虽说图片大于40kb无法加载，其实是可以加载的

总结：图片高度控制4096以内，能弄个高度是4000的就可以解决；

1、测试压缩：开始我一直压缩图片大小，方案不行；
2、测试网络地址：使用了api说的网络地址就是在线地址，在线地址其他的图片可以，这个图片上传到服务器也无法打开，这就很神奇了，我开始怀疑图片的问题了，然后改下高试试，5000,4000，5000不可以，4000，经过调试找了最大高度4096。
3、经过多次调试发现，其实跟图片的高度有关系，我在网上下载了一个图片1.2mb，一样加载，因为高度没有超过，大的高度是750x4096，超过4096，就会出现白屏。
4、测试图片文件大小：图片超过40kb也可以正常打包，不会白屏。
5、测试是否跟高度有关：用图片生成器生成一张4100的图片，就不行就白屏，生成超过4096的图片超过了40kb，但是压缩至22kb依旧白屏，依旧证明图片文件大小不是核心的问题，核心问题是图片尺寸。

<scroll-view class="directory_list" scroll-y :show-scrollbar="false">
	<!-- <view style="min-height: calc(100% - 303upx); padding-top: 303upx; background-size: 100%; background-position-y: 0upx; background-image: url(https://via.placeholder.com/750x4096/09f.jpg/666);"> -->
	<view style="min-height: calc(100% - 303upx); padding-top: 303upx; background-size: 100%; background-position-y: 0upx; background-image: url(https://via.placeholder.com/750x4100/09f.jpg/666);">
	</view>
</scroll-view>

uniapp项目提示打包时未添加videoplayer模块，但是已经勾选了，还是

我这的解决方案是：把点击发布生成的安装包目录 unpackage 文件夹删除就可以了。

uniapp app端无法获取offsetHeight

mounted(){
    // this.imgH = this.$refs.dd.offsetHeight - this.$refs.con.offsetHeight;
    uni.createSelectorQuery() //是在mounted() 之后使用的吗？ 我在mounted中 加了定时器，延时1秒 拿到了
    setTimeout(() => {
        uni.createSelectorQuery().select('.directory_bg').fields({ // .directory_bg 你想获取元素的类名
            size: true,
            scrollOffset: true
        }, data => { 
            console.log("得到节点信息", JSON.stringify(data));
            console.log(data.height)
            this.imgH = data.height;
        }).exec();
    },300) 
}

从uniapp的webview http地址跳转回APP的方法，可实现页面功能完成后自动跳转回uniapp页面

这个我域名的地址，需求是跳转paypal的订购后要跳转回来，但是需要地址，但是这个得需要会app呀

<web-view src="https://test.cn//paypal.html" :webview-styles="webviewStyles"></web-view>

看了网上很多解决方案试了又试，调了又调。

核心解决

uniapp块代码

<template>
	<view class="content_box">
		<web-view src="https://ceshi.airclassroom.cn/app_webview/paypal.html"></web-view>
	</view>
</template>

web-wivew 跳转的 uniapp页面代码

需要引入uni.webview.1.5.2.js，核心是这个js文件必须是在线的，必须是https的协议，http的协议是不行的会报安全问题。

用途：点击购买使用 webview打开订购页面，订购完成跳转回，没法直接回到应用，我这是订购完成或者失败都跳转自己的一混合的html页面，然后再这个页面进行uni.navigateTo 跳回app，在跳回的页面上onLoad方法里接受参数即可

    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <script>
        window.onload = function() {
            setTimeout(() => {
            	//但是只针对tabBar 的地址，而且还不可以传参
                // uni.switchTab({
                //     url: '/pages/index/index'
                //     // url: '/pages/course/courseDetails?id=2222'
                // })
                //可以传参数，点返回有返回这个放web-view的页面了，这怎么可以
                // uni.navigateTo({
                //     url: '/pages/course/courseDetails?id=来自订购查询paypal的地址'
                // })
                //这个关闭当前页面跳转，就可以不用返回，可以传参数
                uni.redirectTo({
                    url: `/pages/course/courseDetails${search}`
                })
            }, 3000)
        }
    </script>

完整混合页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html{
            background-color: #666;
        }
    </style>
</head>
<body>
    <h5>测试页面</h5>
    <!-- 使用https可以解决 -->
    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <!-- 会执行代码，不报错，但没动静 -->
    <!-- <script src="./js/uni.webview.1.5.2.js"></script> -->
    <!-- 会报http不安全的错误 -->
    <!-- <script src="http://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
    <script>
        window.onload = function() {
            setTimeout(() => {
                console.log(111111)
                uni.switchTab({
                    url: '/pages/index/index'
                })
            }, 3000)
        }
        
    </script>
</body>
</html>

subnvue $on 和 $emit传值导致重复执行，让点击事件触发了几次执行

当时要弄的功能是点击视频列表让subnvue的播放器播放指定的

开始的时候以为点击视频列表设置不成功，放日志一看好家伙，三个过滤器也执行了，点一次执行了四次，就算可以播放也是很严重的性能问题，这是不允许的，这种情况肯定不允许的；你不能用防抖节流的，因为不能想着用防抖节流来处理你代码写出的坑。

直接造成了点击元素，触发了filter的执行，还查了一个小时的过滤器被点击触发，也试了阻止冒泡等方式依旧不行。

一直调试找的了这个原因，调用一个空方法没问题，一用这个this.videoId就出现问题，换this.videoData[data.index].videoId ，发现好了没有这个问题了。

解决：

//this.getLearningRecord(this.videoId); //用这个值传就会除非问题
this.getLearningRecord(this.videoData[data.index].videoId); //用页面传过来data就不会导致重复执行

subnvue.nvue代码

onLoad() {
    this.wWidth = uni.getSystemInfoSync().windowWidth;
    this.boxStyle.width = this.wWidth;

    uni.$on('playUpdate', (data) => {
        var ox = this.$refs.video;
        if(data.direction == "next"){ //播放下一课
            this.next()
            ox.start();
        } else if(data.direction == "setUrl"){
            this.videoIndex = data.index;
            this.videoId = this.videoData[data.index].videoId;
            ox.playIndex(data.index);
            setTimeout(() => {
                ox.start();
            }, 400)
            
            //这样也不行
            //let videoId = this.videoId;
		   //this.getLearningRecord(videoId);
            
            //this.getLearningRecord(this.videoId); //用这个值传就会除非问题
            this.getLearningRecord(this.videoData[data.index].videoId); //用data就不会触发
            // this.testFun(this.videoData[data.index].videoId)
            
            
        }

        console.log('来自播放页面的消息' + data);
        console.log(data);
    })
},

index.vue

vue代码

<view class="video_item list_item" v-for="(item, index) in VideoList" :key='item.videoId' @click="getVideoPlayback(item, index)">
    <view class="item_header_Status">
        <!-- <view class="default_circular success"> -->
        <!-- <view class="default_circular conduct"> -->
        <view class="default_circular" :class="item.param1 | statusStyle(index, VideoList)">
            <text class="icon"></text>
            <text class="line"></text>
            <text class="status_Name">{{ item.param1 | statusName(index, VideoList)}}</text>
        </view>
    </view>
    <view class="item_con" :class="item.param1 | statusStyle(index, VideoList)" >
        <view class="itemName">{{item.name}}</view>
        <text class="itemIcon"></text>
    </view>
</view>

js代码

data() {
    return {
        videoId:undefined, //当前播放器的id
    }
}
filters:{
    statusName(param1, index, list){ //对当前的学习状态进行过滤
        if(param1 == 2) return '已完成';
        try{
            if(param1 == 1) {
                uni.$emit('playUpdate', {msg:'过滤器更新播放地址，当前学习中状态', direction: 'setUrl', index, current:true});
                return "学习中";
            }else if(param1 == 0 && index == 0){
                uni.$emit('playUpdate', {msg:'过滤器更新播放地址，章节开始学状态', direction: 'setUrl', index, current:true})
                return "学习中";
            }else if(index > 0 && list[index - 1].param1 === "2" && param1 == 0 ) {
                uni.$emit('playUpdate', {msg:'过滤器更新播放地址，上个章节学完', direction: 'setUrl', index, current:true})
                return "学习中"
            }else {
                if(param1 == 0) return '未完成';
            }
        } catch(e) {
            console.log(e)
        }
    },
}

播放阻止快进功能

就是根据进度来的，当前时间跟当前播放时间相差太多就可以认为你快进了，后面继续完善

handleVideoTimeUpdate(e) {
    // if(parseInt(e.detail.currentTime) === 0) return;
    //实时播放进度 秒数
    var currentTime = parseInt(e.detail.currentTime);
    //当前视频进度
    var jump_time = parseInt(this.video_real_time)
    if(currentTime - jump_time > 2){
        console.log('不能快进')
        this.videoContext.seek(this.video_real_time)
        return;
    }
    this.videoInfo.duration = e.detail.duration;
    this.video_real_time = currentTime //实时播放进度
}

播放卡顿问题解决

使用uniapp只带的播放器，播放视频出现卡顿，但是使用安卓不会卡顿。

也找了部分插件：出现的问题是安卓可以播放ios不可以播放无法同时安卓ios都可以

解决方案，既然安卓播放卡顿，ios又不卡顿，虽说插件不支持ios，但是解决了安卓卡顿的问题呀，ios照成使用uniapp只带的播放就可以了。

播放器代码就放在subnvue里，传参就是上面subnvue的问题，我使用的是 $emit 和 $on 进行传参。

//做区分跳转就好了
if(this.device === 'android'){
    uni.navigateTo({
        url: `../android_play/index?directoryId=${id}&name=${name}`
    })
}else if(this.device === 'ios'){
    uni.navigateTo({
        url: `../course/coursePlay?directoryId=${id}&name=${name}`
    })
}

后台富文本标签提取img图片地址

数据：

"[{"language":2,"updateTime":"2021-07-22 11:05:00.0","sort":2,"title":"Course Introduction for HSK Level 1 A","type":1,"version":2,"createTime":"2021-07-22 10:31:34.0","client":1,"id":9,"text":"<p><img src=\"http://istudies.com/upload/2021_07/5f1673e68fab4260a24fbcf659b0a22c_1626921091957.png\" alt=\"文字说明\" data-href=\"http%3A%2F%2Fistudies.com%2Fupload%2F2021_07%2F5f1673e68fab4260a24fbcf659b0a22c_1626921091957.png\" style=\"max-width:100%;\" contenteditable=\"false\"/><\/p>","bid":1,"status":1},{"language":2,"updateTime":"2021-08-02 16:37:33.0","sort":3,"title":"Course Content for HSK Level 1","type":1,"version":5,"createTime":"2021-07-22 10:34:12.0","client":1,"id":11,"text":" <p><img src=\"http://istudies.com/upload/2021_08/97c074387ac84330b4d107df0c6b8807_1627893448795.png\" alt=\"文字说明\" data-href=\"http%3A%2F%2Fistudies.com%2Fupload%2F2021_08%2F97c074387ac84330b4d107df0c6b8807_1627893448795.png\" style=\"max-width:100%;\" contenteditable=\"false\"/><\/p>","bid":1,"status":1},{"language":2,"updateTime":"2021-07-22 11:04:48.0","sort":3,"title":"This course is suitable for","type":1,"version":1,"createTime":"2021-07-22 10:47:18.0","client":1,"id":13,"text":"<p><img src=\"http://istudies.com/upload/2021_07/9cf6e59b8eeb4bee81f6b3d1e7a97d50_1626922035672.png\" alt=\"文字说明\" data-href=\"http%3A%2F%2Fistudies.com%2Fupload%2F2021_07%2F9cf6e59b8eeb4bee81f6b3d1e7a97d50_1626922035672.png\" style=\"max-width:100%;\" contenteditable=\"false\"/><\/p>","bid":1,"status":1}]"

提取所有url

//先获取所有完整的img标签
var imgStrs = str2.match(/<img.*?>/g)
//再获取每个img 标签的url
var urls = imgStrs.map(url=>{
  return url.match(/\ssrc=['"](.*?)['"]/)[1]
})

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

openEuler系统通过shell脚本安装openGauss 5.0.0企业版

华为云开发者联盟

一文了解npm install -g和npm install --save-dev的关系

华为云开发者联盟

【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（2）

华为云开发者联盟

所有评论(0)

查看更多评论

昵称老重复

@qq_25286361

已为社区贡献9条内容

uniapp 踩坑总结

昵称老重复

日常问题总结，持续更新

scroll-view ios出现滚动条

uni-app 手机上背景图白屏

uniapp项目提示打包时未添加videoplayer模块，但是已经勾选了，还是

uniapp app端 无法获取offsetHeight

从uniapp的webview http地址跳转回APP的方法，可实现页面功能完成后自动跳转回uniapp页面

核心解决

subnvue $on 和 $emit传值 导致重复执行，让点击事件触发了几次执行

播放阻止快进功能

播放卡顿问题解决

后台富文本标签提取img图片地址

所有评论(0)

昵称老重复

uniapp app端无法获取offsetHeight

subnvue $on 和 $emit传值导致重复执行，让点击事件触发了几次执行