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()