开发环境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，并获得更多用户与变现收益！