HbuilderX开发APP指南开发环境HBuilder X
（参考⽂档）
（参考⽂档）
平台⽀持
iOS
Android
FirstAPP
1. 启动HbuilderX
2. 在菜单栏中选择“⽂件”-> “新建”->“项⽬”，选择5+App
3. 创建完成后，会在项⽬管理器中显⽰新建的“FirstWorld”项⽬
4. 编辑程序启动后默认显⽰的页⾯index.html
5. 引⼊所需资源以便于后期开发（个⼈：在引⼊vant前引⼊vue）
6. 编码所需页⾯（可参考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" >    <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 = ate(this.view[i].url, this.view[i].name, {
top: "46px",
bottom: "70px",
scrollIndicator: "none",
zindex: 1
});
saveWebView.append(tempWebView);
}
7. 浏览器调试运⾏
8. F12检查切换⼿机屏幕模拟
9. 显⽰效果
10. 真机调试
Android可能需要下载⼿机助⼿协同连接调试，iOS下载iTunes可进⾏真机调试
真机调试 注意事项
1> Android iOS运⾏之后会在⼿机⾃动安装Hbuilder APP 真机调试模式下⽆法修改图标、启动画⾯。
2>iOS⽆ inspect 调试模式
3>Android ⾃动打开软件，iOS需要⼿动打开Hbuilder软件查看效果icon图标库
11. 调试结果
最后，祝你快速完成⾃⼰的移动App，并获得更多⽤户与变现收益！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。