Hbuilder X 开发APP指南

开发环境HBuilder X

• 开发环境Hbuilder下载
• Vant轻量、可靠的移动端 Vue 组件库（参考文档）
• HTML5中国产业联盟（参考文档）

平台支持

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

7. 浏览器调试运行
   
8. F12检查切换手机屏幕模拟
   
9. 显示效果
   
10. 真机调试
    Android可能需要下载手机助手协同连接调试，iOS下载iTunes可进行真机调试
    
    真机调试 注意事项
    1> Android iOS运行之后会在手机自动安装Hbuilder APP 真机调试模式下无法修改图标、启动画面。
    2>iOS无 inspect 调试模式
    3>Android 自动打开软件，iOS需要手动打开Hbuilder软件查看效果
11. 调试结果
    

最后，祝你快速完成自己的移动App，并获得更多用户与变现收益！