关于使用uni-app过程中遇到的问题和技巧合集
关于使⽤uni-app过程中遇到的问题和技巧合集
1.⼩程序跳转⼩程序
打开manifest.json⽂件-源码视图，在对应⼩程序平台源码中加⼊“navigateToMiniProgramAppIdList”：“⽬标⼩程序appid” （⼆者必须关联同⼀主体）
2.百度⼩程序、头条⼩程序、⽀付宝⼩程序⽆法同时播放背景⾳乐和⾳频（⽐如按钮⾳乐）
按钮⾳乐会打断背景⾳乐的播放（⼆者只能播放⼀个），解决⽅法：通过条件编译，声明两个⾳频对象，不使⽤背景⾳乐对象，例如百度
// #ifdef MP-BAIDU
幸福的小短句这个api是百度特有，可以同时使⽤多个⾳频对象
swan.setInnerAudioOption({
mixWithOther:true,
success: res =>{
},
fail: err =>{
console.log('setInnerAudioOption fail', err);
}
});
var bgAudioMannager = ateInnerAudioContext();
var innerAudioContext = ateInnerAudioContext();
// #endif
// #ifdef MP-TOUTIAO
var bgAudioMannager = tt.createInnerAudioContext();
var innerAudioContext = tt.createInnerAudioContext();
/
/ #endif
// #ifdef MP-ALIPAY
var bgAudioMannager = my.createInnerAudioContext();
朱茵谈爱情var innerAudioContext = my.createInnerAudioContext();
// #endif
3.关于⽀付宝⼩程序按钮胶囊位置获取
除了⽀付宝⼩程序外，其他平台⼩程序均可以使⽤以下代码获取按钮胶囊位置
let res = SystemInfoSync();
const menuButtonInfo = MenuButtonBoundingClientRect()
let titleBarHeight = res.platform =='ios'?44:48;
let top = res.statusBarHeight +(titleBarHeight -32)/2;
let buttonTop = p + menuButtonInfo.height;
let buttonRight = res.windowWidth - menuButtonInfo.right + menuButtonInfo.width /2+20;
let button ={
buttonRight: buttonRight,
buttonTop: buttonTop
}
ps：top为胶囊到⼿机顶部的距离；buttonTop为胶囊本⾝⾼度加上距离顶部的⾼度；
buttonRight 胶囊中“三个点”的按钮到⼿机最右侧的距离。（单位都是px）
⽀付宝⼩程序需要通过条件编译来单独处理（并且要通过真机调试，⼯具太烂了，⽆法获取到模拟机型信息）：
const res = my.getSystemInfoSync();
const menuButtonInfo = MenuButtonBoundingClientRect()
let titleBarHeight = res.platform =='iOS'?44:48;
let top = res.statusBarHeight +(titleBarHeight -32)/2;
let buttonTop = top + res.statusBarHeight;
let buttonRight = res.windowWidth - menuButtonInfo.right + menuButtonInfo.width /2+20;
let button ={立春是什么意思?
buttonRight: buttonRight,
buttonTop: buttonTop
}
ps：⽀付宝⼩程序获取⼿机信息卸载app.vue⽂件中不会⽣效，所以⽼⽼实实封装⼀个函数吧。
⼀般全屏的⼩程序（导航栏透明）都需要这个操作，因为⽀付宝⼩程序⾃带导航栏，并且还会在左上⾓显⽰⼩程序名称，所以我们再加⼀步：
"globalStyle":{
// #ifdef  MP-ALIPAY
"navigationBarTitleText":"",//设置标题为空，就不会显⽰⼩程序名称了
// #endif
"titlePenetrate":"YES",//⽀付宝⼩程序特有
"navigationStyle":"custom",//沉浸式导航栏
"transparentTitle":"always",//导航栏透明
"disableScroll":true//禁⽌页⾯上线滑动
}
4.⽀付宝⼩程序中的v-show
没错，还是⽀付宝⼩程序的问题，我们⼀般写选项卡的时候会⽤v-show来控制显⽰隐藏，因为v-if会重新创建组件，所以⽐较耗内存，⽽且体验不好（频繁使⽤v-if来显⽰隐藏组件会导致组件闪烁），但是⽀付宝⼩程序中的v-show并不能控制选项卡的显⽰/隐藏 ，因为它会始终显⽰，⽆论你怎么改data中
的值，即使满⾜条件也不会隐藏，所以我们还是通过条件编译再使⽤v-if来做选项卡吧！
5.关于各平台⼩程序字体问题
开发时候在⼩程序上正常显⽰的字体，在其他⼩程序上都显⽰“宋体”，着说明了⼩程序⽀持的字体其他⼩程序并不⼀定⽀持（部分⼩程序开发⼯具上看不出来，要真机实测），实测 “ PingFang SC”全平台⽀持，所以若要开发多平台⼩程序，请先试下各平台是不是都⽀持该字体，不然回头改就要命了！
6.关于原⽣组件的问题（后续继续更新）
1.switch组件的背景⾊问题
uni-app中的color 中的属性可以直接更改背景⾊
然⽽突出的⽀付宝同学则不⾏！解决办法：通过条件编译 写上⾏内样式就⾏了
7.审核问题（⽬前已知亲测的）
1.头条⼩程序不⽀持游戏类⼩程序，也就是说只能做⼩游戏。新郎婚礼答谢词
2.⼩程序不⽀持⽹赚，⽐如通过做任务获得积分抽奖、提现什么的汽车保险怎么算
3.QQ⼩程序会根据⼩程序的介绍来测试你的⼩程序中有没有对应的功能，如果没有，请改⼩程序介绍！（⼤声BB：QQ⼩程序审核最慢，起步两三天，和百度⼩程序最快，百度还有短信通知，很奈斯）
8.开发者⼯具问题
先⽤⼀句话总结：除了腾讯旗下的⼯具（、QQ），其他都是垃圾！
⽀付宝：很多api都不⽀持⼯具预览，操作习惯反⼈类
百度：调试⿇烦的⼀批，⽽且缓存有点问题，也看不到appData （菜单是有但是没有数据）
头条⼩程序：垃圾中的战⽃机！经常⽆法打开项⽬（已知转圈），最恶⼼的是连http请求都看不到，要啥啥没有我咋调试？
9.canvas的问题
1.drawImage()⽅法
⼩程序不⽀持⽹络图⽚绘制
⽀付宝⼩程序不⽀持本地图⽚绘制
2.canvas组件
自动挡车驾驶技巧⽀付宝最好⽤原⽣的canvas组件，写上id 和width 、height
uni-app为⾏内样式和canvas-id
<canvas canvas-id="shareCanvas" id="shareCanvas" width='250' height='200'></canvas>
3.把canvas⽣成图⽚
⽀付宝⼩程序⽤原⽣api
// #ifdef MP-ALIPAY
context = my.createCanvasContext('shareCanvas');
// #endif
```javascript
// #ifdef MP-ALIPAY
x:0,
y:0,
width:250,
height:200,
destWidth:250,
destHeight:200,
success:(res)=>{
console.log(res)
this.shareImg = res.apFilePath
},
fail:(err)=>{
console.log(err)
}
},this)
// #endif
其他平台⽣成图⽚：
// #ifndef MP-ALIPAY
uni.canvasToTempFilePath({
x:0,
y:0,
width:250,
height:200,
destWidth:250,
destHeight:200,
canvasId:'shareCanvas',
success:(res)=>{
console.log(res)
this.shareImg = pFilePath
}
},this)
// #endif
10.⽀付宝⼩程序中的背景⾳乐
使⽤my.getBackgroundAudioManager()后⼩程序退出后台⽆法关闭⾳乐（即使在App.vue中 的onHide钩⼦函数中写关闭⾳乐的操作也不管⽤）
解决办法，使⽤my.createInnerAudioContext()代替my.getBackgroundAudioManager()

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。