開發環境HBuilder X

• 開發環境Hbuilder下載
• Vant輕量、可靠的移動端 Vue 組件庫（參考文檔）
• HTML5中國產業聯盟（參考文檔）

平臺支持

• iOS
• Android

FirstAPP

啟動HbuilderX

在菜單欄中選擇“文件”-> “新建”->“項目”，選擇5+App

創建完成后，會在項目管理器中顯示新建的“FirstWorld”項目

編輯程序啟動后默認顯示的頁面index.html

引入所需資源以便于后期開發（個人：在引入vant前引入vue）

編碼所需頁面（可參考Vant、中國產業聯盟提供文檔）

<van-nav-bar title="ALIPAY"><van-icon name="search" slot="left"></van-icon><van-icon name="setting-o" slot="right"></van-icon></van-nav-bar><van-tabbar v-model="active" @change="tabChange" active-color="#07c160" style="bottom:20px"><van-tabbar-item icon="home-o">XX</van-tabbar-item><van-tabbar-item icon="search">XX</van-tabbar-item><van-tabbar-item icon="friends-o">XX</van-tabbar-item><van-tabbar-item icon="setting-o">XX</van-tabbar-item></van-tabbar>view: [{name: "home",url: "view/home.html"},{name: "search",url: "view/search.html"},{name: "friends",url: "view/friends.html"},{name: "setting",url: "view/setting.html"}]},methods: {tabChange: function() {plus.webview.show(this.view[this.active].name);}},mounted() {plus.screen.lockOrientation("portrait-primary");var saveWebView = plus.webview.currentWebview();for (var i = 0; i < this.view.length; i++) {var tempWebView = plus.webview.create(this.view[i].url, this.view[i].name, {top: "46px",bottom: "70px",scrollIndicator: "none",zindex: 1});saveWebView.append(tempWebView);}

瀏覽器調試運行

F12檢查切換手機屏幕模擬

顯示效果

真機調試
Android可能需要下載手機助手協同連接調試，iOS下載iTunes可進行真機調試

真機調試 注意事項
1> Android iOS運行之后會在手機自動安裝Hbuilder APP 真機調試模式下無法修改圖標、啟動畫面。
2>iOS無 inspect 調試模式
3>Android 自動打開軟件，iOS需要手動打開Hbuilder軟件查看效果

調試結果

最后，祝你快速完成自己的移動App，并獲得更多用戶與變現收益！

總結

以上是生活随笔為你收集整理的Hbuilder X 开发APP指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。