关于使用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()

你可能感兴趣的:(关于使用uni-app过程中遇到的问题和技巧合集)