uni-app 开发随笔(踩坑记录)

这里总结一些uni-app开发时我遇到的坑

uni-app获取元素高度及屏幕高度(uni-app不可使用document)

uni.getSystemInfo({
  success: function(res) { // res - 各种参数
     console.log(res.windowHeight); // 屏幕的宽度
      let info = uni.createSelectorQuery().select(".元素");
     info.boundingClientRect(function(data) { //data - 各种参数
that=data.height// 获取元素高度
      console.log()
      }).exec()
    }
});
只获取屏幕宽高也可:
const { windowHeight } = uni.getSystemInfoSync()

uni-app之touch事件方向判断

//template
<view
style="width: 100%;height: 500rpx;border: 1px solid red;box-sizing: border-box;"
@touchstart='touchstart'
@touchend='touchend'>
</view>

  

//data中初始化
touchDotX : 0,
touchDotY : 0,
time :0,
touchMoveX:'',
touchMoveY:'',
tmX:'',
tmY:''

 

//事件
touchstart(e){
// console.log(e)
this.touchDotX = e.touches[0].pageX
this.touchDotY = e.touches[0].pageY
},
touchend(e){
// console.log(e)
this.touchMoveX = e.changedTouches[0].pageX;
this.touchMoveY = e.changedTouches[0].pageY;
this.tmX = this.touchMoveX - this.touchDotX;
this.tmY = this.touchMoveY - this.touchDotY;
if (this.time < 20) {
  let absX = Math.abs(this.tmX);
  let absY = Math.abs(this.tmY);
  console.log(absX)
  if (absX > 2 * absY) {
if (this.tmX<0){
  console.log("左滑=====")
}else{
  console.log("右滑=====")
}
  }
}
}

js查找替换字符串之replace

1.普通单个替换只执行一次
var str=“Visit Microsoft Microsoft Microsoft Microsoft”
console.log(str.replace(/Microsoft/, “W3School”)) 将Microsoft替换为W3School
2.全部替换
console.log(str.replace(/Microsoft/g, “W3School”))
3.查找变量,场景:将输入的字符串查找匹配文字高亮加粗
var content = input输入的字符串
console.log(str.replace(new RegExp(content,'g’), “ ”+content+" ")
3.1解析标签,此类名给个样式

资讯类型项目swiper嵌套scroll-view

1.图文混排用rich-text

<rich-text :nodes="nodes"></rich-text>
data() {
        return {
 nodes: '<div style="text-align:center;">
 <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/>
 </div>'
        }
    }

  

2.视频列表
2.1video层级过高,此时还是vue文件无法通过z-index修改,官网也有说明,此时要用nvue文件。
2.2 为什么nvue文件就可控,vue文件不可控?
编译不同,nvue文件基于wexx编译模式更接近app原生,但是要注意的是,style样式只能用felx布局。
此时你会发现nvue的样式好难用!!!
2.3如果你选择的是nvue文件,打包和真机调试安卓还算顺利,但是ios你会发现一个怀疑人生的问题,列表无法渲染但是能接收到后端的数据,各种调试最后发现是拦截器的事,我门项目拦截器是自己封装的Promise,直接用官网的api才可以uni.request({})
2.4测试发现可以同时播放多个视频,那么问题来了,如何点击当前来暂停上一个视频呢?
官网给出api uni.createVideoContext(videoId, this)
但是并没有解决,点击几个视频之后有奔溃显现总是报 未定义的对象id,最终是以ref解决

  

<video
:id="'videoa'+item.id"
:ref="'videoa'+item.id"
:src="item.content"
:poster='item.imgUrl'
@pause='video_pause'
@play='target_play'>
</video>
data:{
videoId:null,
}
target_play(e) {
// 播放时触发
if(this.videoId != null){
var oldvideoid = this.videoId;
this.$refs[oldvideoid][0].pause();
}
var videoId = e.target.id;
this.videoId = videoId;
},
video_pause(e) {
if(e.target.id == this.videoId){
this.videoId = null
}else{
console.log('暂停的上一个')
}
}
(0)

相关推荐

  • uni-app调用wifi接口

    微信小程序条件渲染 在小程序app.json中添加 需要先获取位置信息 "permission": { "scope.userLocation": { &quo ...

  • uni-app开发经验分享六:页面跳转及提示框

    在我们开发的uni-app的过程中,页面跳转及提示框往往是我们做数据交互及结果反馈所要使用的功能,这里分享下我收集的一些方法及看法. 一:页面跳转 事件跳转 :指通过tap等事件来实现页面的跳转,跳转 ...

  • js 声明变量规范和特殊变量情况

    声明变量特殊情况情况说明结果var age ; console.log (name);只声明 不赋值undefinedconsole.log(name)不声明 不赋值直接使用报错name= 20; c ...

  • 排坑&#183;IPhone&IOS中不兼容正则中的断言匹配

    阅文时长 | 1.14分钟 字数统计 | 1834.4字符 主要内容 | 1.问题切入 2.什么是断言匹配 3.断言匹配的替换方案 4.声明与参考资料 『排坑·IPhone&IOS中不兼容正则 ...

  • uni-app开发经验分享十: 封装request请求

    http.js //封装requset,uploadFile和downloadFile请求,新增get和post请求方法 let http = { 'setBaseUrl': (url) => ...

  • 使用uniapp开发项目来的几点心得体会

    先说一下提前须要会的技术 要想快速入手uniapp的话,你最好提前学会vue.微信小程序开发,因为它几乎就是这两个东西的结合体,不然,你就只有慢慢研究吧. 为什么要选择uniapp??? 开发多个平台 ...

  • 小程序背景音乐

    onLaunch: function () { console.log( this) this.AppMusic = wx.createInnerAudioContext(); this.AppMus ...

  • 文件upload 文件上传深入

    我记录这篇文章是因为开发过程中,发现上传业务有时候感觉不同平台自己有时一脸懵逼不知道咋样去优化这块业务,不同的后台实现咋样做不同的处理,以下介绍后台实现主要node和java为主,比如:手机端app图 ...

  • uni-app平台判断 | uni app判断h5 小程序 app 等不同平台

    使用 // @/utils/Config.ts import {EPlatform} from './EPlatform'; import {isH5, Platform} from '@/utils ...

  • springboot提交文件和参数类到后台(踩坑记录)

    原本以为类和文件不能一起提交,于是把文件当成类的属性写在类里,然后controller通过getValue得到文件达到该目的. 后来试了一下,requestParam写类的各个属性,文件放在body, ...

  • 语音APP开发如何避坑,做出自己满意的语音APP?

    在音视频行业越发成熟的今天,语音APP也以自己独特的优势扮演越来越重要的角色.随着直播市场需求的变化,纯语音APP源码也成为热门之一,语音APP开发搭建也掀起了一片片浪潮.随着声音的传递,也让市场看到 ...

  • CMOS器件输入管脚不能悬空?硬件调试踩坑记录

    前言 最近在调试一块板卡时,发现了一个奇怪的问题,一款反相器--CD4049出现异常发热现象.虽然板卡已经做过温箱老化试验了,即在60度恒温条件下最大功率运行24小时,运行还算正常.但是一次偶然的机会 ...

  • samtools安装踩坑记录

    问题描述: 我用conda安装的samtools软件 但是在使用samtools的时候,总是报错,没有载入samtools的库文件(动态库缺失) samtools: error while loadi ...

  • 学员分享-aspera踩坑记录

    总有一些难关,需要帮助才能跨过去,一起来看看学员的真实反馈吧! 下面是第五期生信入门学员的分享 介绍一下自己,一枚生信小白,研一在读,之前基本没有生信基础. 19年开学的时候是打算自学,偶然间发现生信 ...

  • 踩坑记录之csv数据导入MySQL

    可能采坑的操作 将excel表格转换成csv 逗号分隔,然后notepad检查文件是否是utf8编码,保存. 打开 phpMyAdmin , 选择要导入的表格,然后点击导入: 导入设置 点击执行之后, ...

  • wifi组网踩坑记录!买了8个路由器,4个是垃圾!华为小米TPlink腾达……结果傻眼!2019装修日记015

    解决个wifi死角,咋就这么费劲?   为了保持叙事的连贯性-- 请允许我模仿下美剧开场~~   前情提要(Previously on WiFi): 170平的大平层,没有做网线改造,只能靠wifi连 ...

  • 使用velocyto进行bam转loom吐血踩坑记录

    报错信息如下: Traceback (most recent call last):   File "miniconda3/envs/velocyto/bin/velocyto", ...

  • 微信小程序云开发的踩坑与填坑篇

    这篇文章主要是总结云开发中踩的坑,优化了往期项目中的一些做法. 顺便总结一下私信/邮件中比较高频的问题. 文章目录 一.做法优化总结 1.帖子的获取方式 2.点赞功能/收藏功能 3.navbar导航栏 ...