关于使用uni-app过程中遇到的问题和技巧合集

关于使⽤uni-app过程中遇到的问题和技巧合集1.⼩程序跳转⼩程序打开manifest.json⽂件-源码视图，在对应⼩程序平台源码中加⼊“navigateToMiniProgramAppIdList”：“⽬标⼩程序appid”（⼆者必须关联同⼀主体）2.百度⼩程序、头条⼩程序、⽀付宝⼩程序⽆法同时播放背景⾳乐和⾳频（⽐如按钮⾳乐）按钮⾳乐会打断背景⾳乐的播放（⼆者只能播放⼀个），解决⽅法：通过条件编译，声明两个⾳频对象，不使⽤背景⾳乐对象，例如百度//#ifdefMP-BAIDU这个api是百度特有，可以同时使⽤多个⾳频对象swan.setInnerAudioOption({mixWithOther:true,success:res=>{},fail:err=>{console.log('setInnerAudioOptionfail',err);}});varbgAudioMannager=swan.createInnerAudioContext();varinnerAudioContext=swan.createInnerAudioContext();//#endif//#ifdefMP-TOUTIAOvarbgAudioMannager=tt.createInnerAudioContext();varinnerAudioContext=tt.createInnerAudioContext();//#endif//#ifdefMP-ALIPAYvarbgAudioMannager=my.createInnerAudioContext();varinnerAudioContext=my.createInnerAudioContext();//#endif3.关于⽀付宝⼩程序按钮胶囊位置获取除了⽀付宝⼩程序外，其他平台⼩程序均可以使⽤以下代码获取按钮胶囊位置letres=uni.getSystemInfoSync();constmenuButtonInfo=uni.getMenuButtonBoundingClientRect()lettitleBarHeight=res.platform=='ios'?44:48;lettop=res.statusBarHeight+(titleBarHeight-32)/2;letbuttonTop=menuButtonInfo.top+menuButtonInfo.height;letbuttonRight=res.windowWidth-menuButtonInfo.right+menuButtonInfo.width/2+20;letbutton={buttonRight:buttonRight,buttonTop:buttonTop}ps：top为胶囊到⼿机顶部的距离；buttonTop为胶囊本⾝⾼度加上距离顶部的⾼度；buttonRight胶囊中“三个点”的按钮到⼿机最右侧的距离。（单位都是px）⽀付宝⼩程序需要通过条件编译来单独处理（并且要通过真机调试，⼯具太烂了，⽆法获取到模拟机型信息）：constres=my.getSystemInfoSync();constmenuButtonInfo=uni.getMenuButtonBoundingClientRect()lettitleBarHeight=res.platform=='iOS'?44:48;lettop=res.statusBarHeight+(titleBarHeight-32)/2;letbuttonTop=top+res.statusBarHeight;letbuttonRight=res.windowWidth-menuButtonInfo.right+menuButtonInfo.width/2+20;letbutton={buttonRight:buttonRight,buttonTop:buttonTop}ps：⽀付宝⼩程序获取⼿机信息卸载app.vue⽂件中不会⽣效，所以⽼⽼实实封装⼀个函数吧。⼀般全屏的⼩程序（导航栏透明）都需要这个操作，因为⽀付宝⼩程序⾃带导航栏，并且还会在左上⾓显⽰⼩程序名称，所以我们再加⼀步："globalStyle":{//#ifdefMP-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.关于各平台⼩程序字体问题开发时候在微信⼩程序上正常显⽰的字体，在其他⼩程序上都显⽰“宋体”，着说明了微信⼩程序⽀持的字体其他⼩程序并不⼀定⽀持（部分⼩程序开发⼯具上看不出来，要真机实测），实测“PingFangSC”全平台⽀持，所以若要开发多平台⼩程序，请先试下各平台是不是都⽀持该字体，不然回头改就要命了！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、heightuni-app为⾏内样式和canvas-id<canvasstyle="width:250px;height:200px;"canvas-id="shareCanvas"id="shareCanvas"width='250'height='200'></canvas>3.把canvas⽣成图⽚⽀付宝⼩程序⽤原⽣api//#ifdefMP-ALIPAYcontext=my.createCanvasContext('shareCanvas');//#endif```javascript//#ifdefMP-ALIPAYcontext.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其他平台⽣成图⽚：//#ifndefMP-ALIPAYuni.canvasToTempFilePath({x:0,y:0,width:250,height:200,destWidth:250,destHeight:200,canvasId:'shareCanvas',success:(res)=>{console.log(res)this.shareImg=res.te