关于使用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 = swan.createInnerAudioContext();
var innerAudioContext = swan.createInnerAudioContext();
// #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 = uni.getSystemInfoSync();
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
let titleBarHeight = res.platform == 'ios' ? 44 : 48;
let top = res.statusBarHeight + (titleBarHeight - 32) / 2;
let buttonTop = menuButtonInfo.top + 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 = uni.getMenuButtonBoundingClientRect()
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 中的属性可以直接更改背景色
然而突出的支付宝同学则不行！解决办法：通过条件编译 写上行内样式就行了
style="background-color: #6A9E29;"
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 style="width: 250px; height: 200px;" 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
context.toTempFilePath({
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 = res.tempFilePath
}
}, this)
// #endif
10.支付宝小程序中的背景音乐
使用my.getBackgroundAudioManager()后小程序退出后台无法关闭音乐（即使在App.vue中 的onHide钩子函数中写关闭音乐的操作也不管用）
解决办法，使用my.createInnerAudioContext()代替my.getBackgroundAudioManager()