uniapp使用问题

3,511 阅读3分钟

1.多音频播放

//主要解决音效和背景音乐不能同时播放的问题

//uniapp API 中 uni.createInnerAudioContext() 无法多音频播放,

//uniapp媒体组件中audio无法获取dom,无法用js灵活控制播放,

//解决方法:

sound = plus.audio.createPlayer( url ); 
sound.setSessionCategory("ambient"); 
sound.play(); //播放 
sound.stop(); //停止

//可以是在线音频,本地音频需要在绝对路径前加上 <http://localhost>

//setSessionCategory取值:

//"ambient" - 不中止其他声音播放,不能后台播放,静音后无声音;

//"soloAmbient" - 中止其他声音播放,不能后台播放,静音后无声音;

//"playback" - 中止其他声音,可以后台播放,静音后有声音。 默认值为"playback"。

2.uni-app自定义导航栏返回路径

onBackPress(e){ 
console.log("监听返回按钮事件",e); //正常返回页面 
uni.navigateTo({ url:"../service/service" }) //返回主页面tabBar 
uni.switchTab({ url:"../service/service" }) 
// 此处一定姚要return为true,否则页面不会返回到指定路径 
return true; 
}

3.video标签控制

//uniapp video无法设置class控制video的宽高:
style="width:100vw;height:380rpx;object-fit: fill"

4.uniapp 权限问题

uniapp 权限[ <https://ext.dcloud.net.cn/plugin?id=594> ](url)
uniapp苹果需要设置提示具体权限用途,否则平台审核不过

5.关闭uniapp导航栏自带导航的按钮

const webView = this.$scope.$getAppWebview() 
webView.setTitleNViewButtonStyle(0,{text:' '})

证书

uniapp证书包生成:ask.dcloud.net.cn/article/357…

定位问题

定位信息获取不到,权限是否配置完全,是否对应地图的设置和uniapp的配置一致

可能存在的问题

  • uniapp 后端压缩带后缀(类似于七牛云的?后缀)ios图片无法显示
  • overhidden在uniapp中容易引起页面滑动卡顿
  • uview tabs在父级以上的transition 容易导致滑动失效
  • 页面滚动到指定位置
//目标节点 
uni.createSelectorQuery().select(".app").boundingClientRect(data=>{  
//最外层盒子节点
uni.createSelectorQuery().select(".al").boundingClientRect((res)=>{     
uni.pageScrollTo({       
  duration:0,//过渡时间必须为0,uniapp bug,否则运行到手机会报错       
  scrollTop:res.top - data.top,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离     
 })   
}).exec() 
}).exec();
  • waterfall懒加载在image使用懒加载的时候在苹果端会出现文字和图片遮罩现象,需要去掉懒加载即可
  • Uniapp无法使用Date格式转换,使用moment.Js插件
  • Nvue通过代码的先后顺序展示层级,所以将层级最低的写在代码的前面
  • 苹果手机Video属性initial-time如果设置过高会出现循环播放倒数几秒
  • 使用uview头部组件navar为固定高度,单位为px,不是rpx/upx
  • 安卓uniapp 访问文件夹和设备权限可能妨碍页面的正常请求,(距离定位无法请求bug)
  • 在uniapp中,内部uni的api或者其他地方使用that需要特别注意,报错也没有就可能导致程序异常中断(上传压缩视频bug)

兼容性

小程序端uniapp popup在弹窗时textarea placeholder输入后情况两次样式不一样

this.$refs.popup.open(); 
setTimeout(() => { this.modalShow = true; }, 50)

辅助手段

获取Android应用签名证书的SHA1、MD5、SHA256值

输入命令:keytool -list -v -keystore debug.keystore(debug.keystore)是签名文件的名称**

例如:你的签名文件名称为:qianming.keystore 你可以输入命令keytool -list -v -keystore qianming.keystore 然后回车

状态栏

uniapp状态栏提供的css高度:var(--status-bar-height)

组件

uniapp 使用name命名的组件可以不需要import,直接引入使用组件

安卓6.0及以下

vue-cli+vue3.0+vite 安卓6.0无法使用h5

ios浏览器滚动tabber延迟问题

/deep/ uni-tabbar{
        bottom:0rpx !important;
}

uniapp swiper内部无法使用点击事件

使用标签链接跳转navigator包裹即可

vscode开发uniapp+ts+vue3.0提示找不到uni名称

yarn add @types/uni-app -D 或者 npm i @types/uni-app -save-dev

禁止输入框输入空格

input或者textarea添加

onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"

H5视频播放 安卓无法自动全屏播放问题

利用组件插槽的方式单独写一个,组件中插入video,并自动播放,利用uni.createVideoContext设置

h5使用jweixin-module分享问题

路由跳转一定需要使用window.location.href,否则分享会报错:updateTimelineShareData this permission value is offline verifying