admin 管理员组

文章数量: 1184232

开发环境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);
					}
  1. 浏览器调试运行
  2. F12检查切换手机屏幕模拟
  3. 显示效果
  4. 真机调试
    Android可能需要下载手机助手协同连接调试，iOS下载iTunes可进行真机调试

    真机调试 注意事项
    1> Android iOS运行之后会在手机自动安装Hbuilder APP 真机调试模式下无法修改图标、启动画面。
    2>iOS无 inspect 调试模式
    3>Android 自动打开软件，iOS需要手动打开Hbuilder软件查看效果
  5. 调试结果

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

本文标签： 指南 HBuilder App

版权声明：本文标题：Hbuilder X 开发APP指南 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1765755017a3412061.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。