uni-app知識點:條件編譯#ifdef MP、HBuilder基座和自定義基座差別、去除頂部導航欄、手機桌面應用消息角標實現、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/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM