一、uni-app里的#ifdef MP是什么意思——条件编译
uni-app官方文档传送门:条件编译(点我)
在uni-app模版看到的#ifdef MP,这是什么鬼?对于学过C语言的童鞋并不陌生,因为这是条件编译语句。
为什么会出现在uni-app里呢?因为uni-app的特性:一份代码,多平台运行。没错,就是一套代码,可以在android、ios及各个小程序和h5上运行,因此为了代码简洁性引入的条件编译,
#ifdef #ifndef #endif,其实官网介绍的也很详细。我们看标准的语法
// #ifdef %PLATFORM%
%PLATFORM%为平台名称
这里的内容只会编译在该平台
// #endif
可以看到其实以#ifdef开头 #endif结尾,但是注意一下就会发现前面双斜杠,这里是注释标记,也就是说在各个代码块里的注释不一样,注释标记就要切换掉,比如:
js: // #ifdef
tag标签: <!-- #ifdef -->
css样式: /* #ifdef */
解释一下各语句是什么意思
#ifdef : if defined 仅在某个平台编译
#ifndef : if not defined 在除里该平台的其他编译
#endif : end if 结束条件编译
%PLATFORM% 需要编译的平台,上面的MP就是各个小程序的意思
示例:如果只需要在微信小程序上编译某段代码的话
// #ifdef MP-WEIXIN
我是在微信小程序上才编译的代码
// #endif
二、HBuilder基座和自定义基座差别
1、HBuilder基座介绍
(1)点击菜单栏“运行”->“运行到手机或模拟器”,会在手机/模拟器上安装“HBuilder”应用(或者叫HBuilder基座),在应用开发过程中HBuilder/HBuilderX会将应用资源实时同步到基座并刷新,从而实时查看到修改效果。
(2)这里的“HBuilder”应用(或者叫HBuilder基座)使用的是DCloud申请的第三方SDK配置,开发者设置的第三方SDK配置信息不会生效。如微信分享,分享后显示的来源一定是“HBuilder”。如果开发者希望自己申请的第三方SDK配置生效,则需(3) 在应用中调用uni-app原生插件也必须使用自定义基座。
2、自定义基座介绍
(1)自定义基座是使用开发者申请的第三方SDK配置生成的基座应用,用于HBuilder/HBuilderX开发应用时实时在手机/模拟器上查看运行效果
(2)在HBuilder/HBuilderX中点击菜单栏“运行->运行到手机或模拟器->制作自定义基座”生成自定义基座安装包
[HBuilder] 19:37:36.837 项目 SOURCE [__UNI__1E9A5AA]打自定义基座包成功:
路径为: G:/liy/projects/uniapp/SOURCE/unpackage/debug/android_debug.apk
选择菜单“运行->运行到手机或模拟器->运行基座选择->自定义基座”后再次运行项目,即可通过自定义基座查看日志
注:自定义基座不可用于正式发布,其脱离HBuilderX无法更新应用资源
(3)打包成功后需要点击菜单栏“运行->运行到手机或模拟器->运行基座选择->自定义基座”来开启自定义基座功能
(4)点击菜单栏“运行”->“运行到手机或模拟器”,可实时在手机上查看运行效果
3、查看基座版本号
onReady:function(){
// #ifdef APP-PLUS
console.log("运行环境版本号(客户端uni-app的基座版本号):" + plus.runtime.uniVersion);
console.log("应用基座版本号(客户端5+运行环境的版本号):" + plus.runtime.innerVersion);//格式为:[主版本号].[次版本号].[修订版本号].[编译代号]
// #endif
},
4、注意:使用自定义基座各种SDK配置才能生效, 但是使用自定义基座进行云端打包后,HX提示【自定义基座不可用于正式发布,其脱离HBuilderX无法更新应用资源】,手机安装打出来的包提示【当前应用运行在测试环境,发布正式版请打正式包】。
原因是因为自定义基座和HBuilder自带基座都是用于开发调试。使用自定义基座开发调试uni-app原生插件后,不可直接将自定义基座apk作为正式版发布。云打包时若勾选了“自定义基座”,打出来的是测试包;应该重新提交云端打包(不能勾选“自定义基座”
)生成正式版本,正式包的SDK配置会自动生效。
打正式包取消勾选“自定义基座”。
三、去除顶部导航栏
比如启动页隐藏顶部导航栏,这个可能用到的场景有登录及一些单页面,话不多说直接上代码。
在 pages.json 文件 style:{"app-plus":{"titleNView":false}} 即可实现单页面隐藏顶部导航的效果。
同样是在pages.json里配置"app-plus":{"titleNView":false}即可实现全局隐藏导航栏
{
"path": "pages/video/video",
"style": {
"app-plus": {
"titleNView": false
}
}
}
四、手机桌面应用消息角标实现
// 使用 h5+ 实现
// 设置数字
plus.runtime.setBadgeNumber(8);
// 清除数字
plus.runtime.setBadgeNumber(0);
五、app应用图标配置
在manifest.json里去配置
图中画红线的几点需要注意。
选择了1024*1024的图片之后,点击自动生成所有图标并替换,那么下面的内容就会自动生成替换了,挺方便的。
当然需要注意的是:云端打包应用图标配置注意事项
1、iOS平台
- 图标必须是直角,不要使用圆角图标,使用圆角appstore审核不会通过
- 打包提交appstore时,必须配置1024*1024分辨率的appstore图标,云端打包机默认使用纯白色图标
- 所有图标不要包含透明信息(alpha通道),否则提交appstore会报以下错误
ERROR ITMS-90717: "Invalid App Store Icon. The App Store Icon in the asset catalog in 'HBuilder.app'
can't be transparent nor contain an alpha channel."
解决方案就是:导出png图标时去掉alpha通道即可
更多应用图标相关信息,参考官方说明:https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
2、Android平台
Android系统没有对图标进行限制,按照建议的分辨率配置即可,可以有透明区域,也可以是圆角图标。
可能有些特殊ROM对图标有所要求,提交应用市场时注意看是否有要求说明。
3、资源介绍
AI智能logo设计:https://www.logosc.cn/