整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
PP最終頁面展示效果（分享、卸載、跳轉、關閉功能）
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
源碼私vx：codingbb
回復：app頁面制作1小時速成
后臺展示
適應手機類型
跳轉按鈕可跳轉第三方鏈接
舉例點擊微信登錄跳轉其他平臺
溫馨提示：本項目需在正常網絡鏈接下使用
家好，我是黑馬騰云。
這是一個原創系列連載文章，基于企業真實項目案例分享經驗，帶你快速入門uni-app開發！歡迎點擊頭像關注，避免迷路！
前幾天，不少讀者私信咨詢前文中項目案例的種種實現細節，本文先揭曉使用的開發工具。
特別說明：系列文章定位是幫助初學者從入門到實戰，適合零基礎或基礎較差uni-apper。為了節約時間，高手勿進，可關注后續的實戰部分。
前文提到的項目是真實上線的商業項目，如果還沒體驗的可以找前一篇文章的入口進入體驗。
貼心的小編也為你錄好了屏，方便各位看官兒查看。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
??
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
以上項目都包含APP（IOS、Android）、小程序和H5。
看到這個演示，相信大家腦海里一定有不同的實現方式。那么，你想到了哪些實現方式呢？
我們考慮的實現方案有很多，對比分析后，最終選擇uni-app多端開發（至于原因前文有提到）。
采取不同的開放方案，對應的開發環境和工具也有所不同。既然選擇了 uni-app 開發，工具自然是采用官方的HBuilderX。
下面來看看它和其它前端開發工具的一些對比
微軟發布的免費跨平臺編輯器，使用的人也是非常多。
VSCode 全稱 Visual Studio Code，現代化輕量級的代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、Git 等特性，支持插件擴展，并針對網頁開發和云端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux，運行流暢。
HBuilderX（簡稱：HX）是輕量編輯器和強大IDE的完美結合體，是HBuilder的升級版。敏捷的性能，清爽的界面，強大的功能。
國產編輯器，且擁有世界級語法分析引擎，與uni-app出自同一家公司，有很多本地化的天然支持優勢。
HBuilder最大的優勢就是速度比較快，強大的代碼提示和代碼輸入，大大增加了開發者的開發效率。
對js支持非常好，用的人也非常多（雖然收費，但相信聰明的你一定有辦法，懂得）。
一款代碼編輯器，擁有漂亮的用戶頁面和實用功能，以及多功能插件。功能很多，包括多選擇和多窗口和python api等功能。
免費、開源且跨平臺的 HTML/CSS/JavaScript 前端WEB集成開發環境IDE。由 Adobe 創建和維護，根據 MIT 許可證發布，支持 Windows、Linux 以及 OS X 平臺。
當然除了這些，還有一些其它的工具（DreamWeaver等等）也非常優秀。工具本質都是為開發服務的，因此選擇適合的即可。
接下來演示如何利用HBuilderX來創建一個uni-app項目：
直接去官網下載安裝即可，截至寫文時最新版本為：3.0.7，本系列開發也是采用此版本。
注意：官方版本更新比較快，如果你的版本不一致，可能軟件界面和功能有些區別。
此系列文章我的開發環境為windows，如果你用的mac環境，快捷鍵和界面也有一定區別。
安裝過程就不再贅述，按提示一路點擊下一步即可。
如果網速較慢或不方便下載，也可以私信我發你。
HBuilderX可以創建多種類型的項目，此處以創建基于HTML的Web項目為例，演示項目創建過程。
通過菜單欄：文件-新建-項目，或者直接主界面點擊“新建項目”都會彈出如下：“新建項目”界面
如上選擇“普通項目”，輸入項目名稱，選擇存儲位置，點擊“創建”，就會成功創建項目。
在創建的“test”項目上右鍵-新建-html文件，就可以為項目添加文件
輸入文件名稱：getstart.html
文件創建成功后，預覽文件
在文件中輸入內容并保存，點擊右上角的“預覽”按鈕，就可以實時預覽修改的內容。
創建項目和添加文件的過程，和其它編輯器或IDE并沒有太大的區別。
主界面如上圖，界面比較簡潔，右下角還可以選擇文件的編碼。
菜單：文件-打開目錄，彈出框中選擇對應項目所在的文件夾即可。
在項目上右鍵-移除項目或關閉項目。
移除項目會從本地電腦刪除。
關閉項目僅僅是不會展示在項目區，會展示在“已關閉項目”區，右擊已關閉的項目，可以再次打開。
基于以上的Web項目，我們來演示一下HBuilderX的騷操作。
以下操作，強烈建議對照著打開HBuilderX親自操作一遍，才能達到事半功倍的效果。
使用代碼塊，可以減少重復代碼工作量。
打開剛才的getstart.html文件，刪除里邊的內容，在英文狀態輸入h字符
根據提示，alt+前邊的數字可以快速插入對應的代碼塊。
alt+9，快速輸入html代碼塊。
怎么樣？只需要一個鍵就能把html的基礎結構寫好，你還在一個個字符挨著敲嗎？
熟練使用快捷鍵，碼字就像飛一般的感覺。不信你看！！！
一定要跟著敲噢！步驟如下：
全程不用鼠標，感覺就像在linux上敲命令。
當然，初次使用肯定記不住這么多，多敲幾遍就形成條件反射了，實在記不住，可以查看對應的菜單。菜單上都有快捷鍵的提示。
js提示html的id
js提示html的tagname
js提示css類名
只需要“alt+左鍵點擊”引用的方法名、ID、CSS類、文件(鏈接、圖片),均可跳轉到引用的地方,跨文件的引用也可以。
演示完畢，接下來再看看具體的一些技巧
HX默認30秒保存一次文件。
不管是關閉hx，還是斷電、崩潰，臨時文件始終會自動保存，不用擔心丟失。
默認的自動保存不會觸發編譯，只有手動保存（ctrl+s）時才會。
前端預編譯型語言越來越多，每次保存都觸發編譯比較消耗資源，有了hx，可以專注寫代碼而不需要隔一會按一下ctrl+s，需要編譯時再保存。
世界級語法分析引擎一直是HBuilder系列產品最大特點。
前端框架眾多，框架的語法提示需要加載單獨的語法提示庫，框架語法提示庫是在頁面的右下角選擇。
框架語法庫是掛在項目下的，一個項目加載了一個框架語法庫后，這個項目下所有js文件或HTML文件都會在代碼助手提示這個框架的語法。
但如果一個文件是單獨從硬盤打開，沒有整項目拖入hx，那么此時無法加載框架語法庫。
hx的代碼助手，可以按alt+數字選擇直接選擇某個項目，類似中文輸入法數字選詞
標放到某api處，按下F1，就可跳轉到這個api的官方手冊。目前支持vue、uni-app、5+等api
hx支持多光標，按 ctrl+鼠標左鍵 就可增加一個光標，ctrl+鼠標右鍵 可取消一個光標或選區。
還可以選擇相同詞，ctrl+e 可選中相同的詞做批處理。
hx的列選擇，是alt+鼠標拖選
當打開一個不認識的文檔時，即hx的無法高亮著色，可以在右下角選擇使用其他編輯器打開。
當打開一個文件編碼錯亂，產生亂碼時，也可以在右下角選擇編碼重新打開。
快捷鍵是Alt+d，鼠標操作是alt+左鍵單擊
HBuilderX還有一個特色是轉到定義到分欄，ctrl+alt+左鍵，可以把一個定義處的代碼打開在另一側，方便共同查看
支持切換【Ctrl+鼠標左鍵】或【Alt+鼠標左鍵】進行轉到定義 （菜單【選擇】，最后一個菜單）
當然，快捷鍵可以進行個性化設置，可以修改，因此自己根據個人習慣設置即可，不一定和我的一樣。
在HBuilderX中，Alt+Left或點擊工具欄上的<, 即可回到上一個光標位置。
在頂部工具欄直接搜索工程下的文件名并打開，或者使用快捷鍵ctrl+p。
比較常用的文件，可以在工具欄里添加到收藏夾。
項目管理器點右鍵，選：查找字符串(當前目錄)，可在該目錄下所有文件中搜索字符串
以上快捷功能熟悉后，日常開發就可以大大提高效率。
還有一些功能：
比如語法校驗插件、svn/git項目管理插件、預編譯器（less/sass）等，篇幅所限就不展開了，以后有時間再繼續寫。
另外如果有興趣，以后高級篇講講HbuilderX插件的開發，隨心所欲定制擴展你的編輯器功能。
下一篇文章，我們討論下uni-app的MVVM框架思想。
討論時間：
你認為哪個開發工具最牛X？
600萬開發者的選擇，HBuilderX憑啥？
咱們留言區見！
作者介紹：
黑馬騰云，碼農、創業者、終身學習者！
樂于分享技術、創業、人生思考。關注我，一起為人生喝彩！
進行鴻蒙App功能開發之前，你應該對HarmonyOS App的邏輯結構，有所了解。鴻蒙App要發布的程序，需要打包成HAP(HarmonyOS Ability Package)格式。一個App由代碼、資源、第三方庫及應用清單文件組成，項目結構如下圖2.1所示。
圖 2.1 項目結構
gradle：Gradle配置文件，由開發工具自動生成，一般情況下不需要進行修改；
entry：默認啟動模塊(主模塊)，程序員用于編寫源碼文件以及開發資源文件的目錄：
entry>libs：用于存放entry模塊的依賴文件，如Java庫文件(.jar)；
entry>src>main>Java：用于存放Java源碼，這是程序員開發功能的地方；
entry>src>main>resources：用于存放應用所用到的資源文件，如圖形、多媒體、字符串、布局文件等，這是程序員配置資源的地方，它包括兩大類目錄，一類為base目錄與限定詞目錄，另一類為rawfile目錄。
base 目錄中的資源文件會被編譯成二進制文件，并賦予資源文件ID，如存放字符串的文件string.json；rawfile目錄中的資源文件會被直接打包進應用，不經過編譯，也不會被賦予資源文件ID，如js文件。
base下資源組目錄element、media、animation、layout、graphic和profile的作用，如圖2.2所示：
圖2.2 資源文件解析
entry>src>main>config.json：HAP清單文件;
entry>src>test：編寫代碼單元測試代碼的目錄，運行在本地Java虛擬機上;
entry>.gitignore：標識git版本管理需要忽略的文件;
entry>build.gradle：entry模塊的編譯配置文件。
項目文件內容的解析就這么多，你不用背記下來，大概知道每個目錄和文件的作用是什么就好了。這些文件會在開發的過程中，慢慢熟悉的，不用著急。
其實，鴻蒙App的整體內容，并沒有那么復雜，開發應用代碼主要圍繞Ability組件展開。你在項目中，看到MainAbility，就是Ability來的。
為了方便開發和維護，將頁面Ability的資源放到resources中，再用自動生成的代碼進行引用，是一個不錯的分層解決方案，這也是存在resources原因，明白了么？
不明白不要緊，要緊的是趕緊關注我，下一節就開始學習Ability。
一個當了10多年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。我在分享Python，前端、Java和App(Android、iOS和鴻蒙)方面的干貨。關注我，你就賺翻了。
#APP#
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
