開(kāi)發(fā)環(huán)境HBuilder X

• 開(kāi)發(fā)環(huán)境Hbuilder下載
• Vant輕量、可靠的移動(dòng)端 Vue 組件庫(kù)（參考文檔）
• HTML5中國(guó)產(chǎn)業(yè)聯(lián)盟（參考文檔）

平臺(tái)支持

• iOS
• Android

FirstAPP

啟動(dòng)HbuilderX

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

創(chuàng)建完成后，會(huì)在項(xiàng)目管理器中顯示新建的“FirstWorld”項(xiàng)目

編輯程序啟動(dòng)后默認(rèn)顯示的頁(yè)面index.html

引入所需資源以便于后期開(kāi)發(fā)（個(gè)人：在引入vant前引入vue）

編碼所需頁(yè)面（可參考Vant、中國(guó)產(chǎn)業(yè)聯(lián)盟提供文檔）

<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);}

瀏覽器調(diào)試運(yùn)行

F12檢查切換手機(jī)屏幕模擬

顯示效果

真機(jī)調(diào)試
Android可能需要下載手機(jī)助手協(xié)同連接調(diào)試，iOS下載iTunes可進(jìn)行真機(jī)調(diào)試

真機(jī)調(diào)試 注意事項(xiàng)
1> Android iOS運(yùn)行之后會(huì)在手機(jī)自動(dòng)安裝Hbuilder APP 真機(jī)調(diào)試模式下無(wú)法修改圖標(biāo)、啟動(dòng)畫面。
2>iOS無(wú) inspect 調(diào)試模式
3>Android 自動(dòng)打開(kāi)軟件，iOS需要手動(dòng)打開(kāi)Hbuilder軟件查看效果

調(diào)試結(jié)果

最后，祝你快速完成自己的移動(dòng)App，并獲得更多用戶與變現(xiàn)收益！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。