uni-app知识点：条件编译#ifdef MP、HBuilder基座和自定义基座差别、去除顶部导航栏、手机桌面应用消息角标实现、APP应用图标配置及云端打包时的注意事项、如何使app文字内容长按可以选择复制

一、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/

六、如何使app文字内容长按可以选择复制

　　解决方法：

.content {
    // 该属性存在兼容性问题，详情参考下方文档
    user-select: text;
}

　　详细属性值见官方文档：user-select：https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select

　　user-select控制用户能否选中文本

none：元素及其子元素的文本不可选中。

text：用户可以选择文本。

all：在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中

contain：允许在元素内选择；但是，选区将被限制在该元素的边界之内。

posted @ 2020-12-10 21:23 古兰精阅读(3209) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

古兰精