基础知识储备

HTML、CSS、JavaScript(ES6)

HTML（结构）

1.View容器:
2.Text文本
3.swiper
4.image
5.video
6.button
7.input

CSS样式

1.属性
* 字体
* 大小
* 布局: float
2.选择器：class类选择器
3.取值与单位
* px
* color
* rpx自动根据屏幕大小比例进行适配
4.盒子模型
margin:外边距
padding:内边距
border:边框
5.弹性盒子模型

JS业务

1.页面的动态处理
2.事件处理
3.生命周期函数
4.网络请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
	<view>
		<text>Hello App</text>
		<swiper :indicator-dots="true" autoplay>
			<swiper-item>
				<text>
					<image style="width: 100%;" src="../../../itbaizhan-test/static/logo.png"></image>
				</text>
			</swiper-item>
			<swiper-item>
				<text><image style="width: 100%;" src="../../../itbaizhan-test/static/logo.png"></image></text>
			</swiper-item>
			<swiper-item>
				<text><image style="width: 100%;" src="../../../itbaizhan-test/static/logo.png"></image></text>
			</swiper-item>
		</swiper>
		<video src=""></video>
		<button type="primary">页面主操作 Normal</button>
		<input style="border: 1px solid #666;"/>
	</view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<template>
	<view>
		<view class="box">
			<text>测试</text>
		</view>
		<view class="box1">
			<text>盒子模型</text>
		</view>
		<view class="box2">
			<view class="sonbox1">
				<text class="b1">盒子1</text>
			</view>
			<view class="sonbox1"></view>
			<view class="sonbox1"></view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.name{
		color: #ff0000;
		font-size: 30px;
	}
	.box{
		float: left;
		width: 200rpx;
		height: 200rpx;
		background: #ff0000;
	}
	.box1{
		width: 100px;
		height: 100px;
		background-color: #007AFF;
		margin-left: 10px;
		margin-top: 10px;
		padding-left: 10px;
		padding-top: 10px;
		border:5px solid #4CD964;
	}
	.box2{
		display: flex;
	}
	.sonbox1{
		display: flex;
		flex: 1;
		/* width: 100px; */
		height: 100px;
		background-color: #007AFF;
		margin: 5px;
		justify-content: center;    /* 水平方向居中 */
		align-items: center;    /* 垂直方向居中 */
	}
	.b1{
		
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<template>
	<view>
		<text>{{title}}</text>
		<text v-for="{item,index} in list" :key="index">{{ item }}</text>
		<view>{{count}}</view>
		<button @click="clickHandle">按钮</button>
		<view>
			<view v-for="(item,index) in banners" :key="index">
				<text>{{item.title}}</text>
				<text>{{item.content}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello!',
				list: ["iwen","line","frank"],
				count:0,
				bammers:[]
			}
		},
		onLoad() {
			console.log("onLoad")

		},
		//   nuiapp生命周期函数
		// 		1.小程序
		// 		2.Vue
		mounted() {
			uni.request({
			    url: 'https://iwenwiki.com/api/blueberrypai/getIndexBanner.php', //仅为示例，并非真实接口地址。
			    success: (res) => {
			        console.log(res.data);
					this.banners = res.data.banner
			    }
			});

			
		},
		methods: {
			clickHandle(){
				this.count++
				console.log("打印信息")
			}

		}
	}
</script>

<style>
	
</style>

tabbar底部导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/tabbar/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationStyle": "custom"
			}
		},
		{
			"path" : "pages/tabbar/classify/classify",
			"style" : 
			{
				"navigationBarTitleText" : "分类",
				"navigationBarBackgroundColor": "#00b783",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": false
			}
		},
		{
			"path" : "pages/tabbar/study/study",
			"style" : 
			{
				"navigationBarTitleText" : "学习中心",
				"navigationBarBackgroundColor": "#00b783",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": false
			}
		},
		{
			"path" : "pages/tabbar/mine/mine",
			"style" : 
			{
				"navigationBarTitleText" : "个人中心",
				"navigationBarBackgroundColor": "#00b783",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": false
			}
		}
		
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar":{
		"color": "#999",
		"selectedColor": "#00b783",
		"borderStyle": "#fff",
		"backgroundColor": "#ffffff",
		"list": [
			{
				"pagePath": "pages/tabbar/index/index",
				"text": "首页",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			},
			{
				"pagePath": "pages/tabbar/classify/classify",
				"text": "分类",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			},
			{
				"pagePath": "pages/tabbar/study/study",
				"text": "学习",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			},
			{
				"pagePath": "pages/tabbar/mine/mine",
				"text": "用户",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png"
			}
		]
	}
	
	
}

搜索框实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="导航栏" @clickLeft="back" />
		<uni-section title="自定义内容" subTitle="使用 left/right/default 插槽自定义内容" type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar>
					<block slot="left">
						<view class="city">
							<view>
								<text class="uni-nav-bar-text">{{ city }}</text>
							</view>
							<uni-icons type="arrowdown" color="#666" size="18" />
						</view>
					</block>
					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
					</view>
					<block slot="right">
						<view class="city">
							搜索
						</view>
					</block>
				</uni-nav-bar>
			</view>
		</uni-section>


	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				city: '北京'
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			showMenu() {
				uni.showToast({
					title: '菜单'
				})
			},
			clickLeft() {
				uni.showToast({
					title: '左侧按钮'
				})
			},
			search() {
				uni.showToast({
					title: '搜索'
				})
			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style lang="scss">
	$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}


	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
</style>

Banner轮播图实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<template>
	<view class="home">
		<Navbar />
		<view class="index_banner_box">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in topBanner" :key="index">
					<image class="banner" :src="item.img_url" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import Navbar from "../../../uni_modules/navbar/navbar.vue"
	export default {
		data() {
			return {
				topBanner:[]
			}
		},
		methods: {
			
		},
		mounted() {
			uni.request({
				url:"http://html5.bjsxt.cn/api/index/banner",
				
				success: (res) => {
					this.topBanner = res.data.top_banner
				}
			})
		},
		components: {
			Navbar
		}
	}
</script>

<style lang="scss">
	.home{
		display: flex:
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		.index_banner_box{
				display: flex;
				width: 100%;
				padding: 10px;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
				overflow: hidden;
				.swiper{
					width: 100%;
					height: 260rpx;
					.banner{
						width: 700rpx;
						height: 260rpx;
					}
				}
		}
		
	}
</style>

课程导航实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<template>
	<view class="course_nav_con">
		<view class="course_nav_con_info" v-for="(item,index) in list" :key="index">
			<text class="course_nav_icon icon iconfont" :class="item.icon"></text>
			<view class="course_info_text">{{ item.text }}</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data(){
			list:[]
		},
		mounted(){
			uni.request({
				url:"http://html5.bjsxt.cn/api/index/nav",
				success:(res) => {
					console.log(res.data)
					this.list = res.data.data
				}
			})
		}
	}
</script>

<style lang="scss">
	@import "@/common/front/iconfont.css"
	.course_nav_con{
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 15px 10px;
		.course_nav_info{
			width: 20%;
			flex-direction: row;
			flex-wrap: wrap;
			text-align: center;
			margin-bottom: 15px;
			.course_nav_icon{
				font-size: 30px;
			.icon-java{
				color: #2a83f3;
			}
			.course_info_text{
				width: 100%;
				font-size: 13px;
				margin-top: 10px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			}
		}
	}
</style>

限时免费实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<template>
	<view>
		<view class="free_card_box" v-for="(item,index) in teaList" :key="index">
			<view class="free_card_img">
				<image :src="item.teacher_logo" mode=""></image>
			</view>
			<view class="free_card_text">
				<view class="free_card_T">{{ item.limitName }}</view>
				<view class="free_card_info">
					<view class="free_card_info_txt">
						<view class="info_text">{{ item.teacher_name }}{{ item.teacher_job}}</view>
						<view>{{ item.limitNum }} </view>
					</view>
					<view class="free_card_info_btn" v-if="item.baoming == '马上报名'">{{ item.baoming }}</view>
					<view class="free_card_info_btn free_card_info_btn1" v-else>{{ item.baoming }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name:"free-card",
		data(){
			return{	
			};
		},
		mounted() {
			uni.request({
				url:"http:/html5.bjsxt.cn/api/index/specific?userid=2160",
				success:(res) => {
					console.log(res.data)
					this.teaList = res.data.data
				}
			})
			
		}
	}
</script>
<style lang="scss">
	.free_card_box{
		display: flex;
		padding: 10px 0;
		margin: 10px;
		border-radius: 10px ;
		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
		box-sizing: border-box;
		align-items: center;
		margin-bottom: 15px;
		background-color: #fff;
		.free_card_img{
			flex-shrink: 0;
			width: 91rpx;
			border-radius: 100%;
			margin: 0 15px;
			image{
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.free_card_txt{
			width: 100%;
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			padding: 0 15px 0 0;
			.free_card_T{
				font-size: 16px;
				overflow: hidden;
				margin: 10px 0;
			}
			.free_card_info{
				width: 100%;
				display: flex;
				box-sizing: border-box;
				flex-flow: row nowrap;
				justify-content: space-between;
				.free_card_info_txt{
					width: 60%;
					overflow: hidden;
					font-size: 16px;
					color: #666;
					.info_txt1{
						height: 20px;
						font-size: 14px;
						overflow: hidden;
					}
				}
				.free_card_btn{
					width: 100px;
					height: 34px;
					text-align: center;
					line-height: 34px;
					border-radius: 34px;
					background-color: #00b783;
					color: #fff;a
					font-size: 16px;
					margin-top: 10px;
				}
				.free_card_btn
			}
		}
	}
</style>

课程介绍详情实现

播放页面实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
	<view>
		<web-view src=http://iwenwiki.com"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

打包项目

1.App（IOS、Android）
2.小程序（微信小程序）

1
https://www.bilibili.com/video/BV1SP4y127si?p=17&vd_source=0881c185180c1edc97f9d341a01a4fc5

真机调试

真机运行常见问题

从在HBuilder/HBuilderX菜单里点真机运行，程序会执行如下几个步骤：

1.手机硬件通过usb线连接到HBuilder所在电脑，此时可能因为手机驱动、usb口、数据线、手机硬件等多种问题造成连接失败。
2.HBuilderX通过adb或itunes服务检测手机。此时可能因为手机渠道、usb连接设置、adb设置或adb冲突、itunes设置造成检测不到。
3.HBuilderX安装调试基座到手机。此时可能因为手机禁止usb安装、Android手机没有sd卡、iOS手机没有信任证书而安装失败。
4.HBuilderX将ide中的代码同步到手机上并启动调试基座。这一步一般不会出问题。
可按如下步骤依次排查问题：

第1步 HX中没有运行到手机的菜单

HBuilderX支持项目类型较多，只有uni-app、5+app、wap2app可以真机运行。它们都会在项目根目录下有个manifest.json文件（uni-cli项目会在src目录下有manifest.json）。

如果是web项目，不能运行到手机，只能运行到浏览器。

如果项目管理器显示项目图标的话，web项目前面的图标是W，5+app和wap2app的图标是A，uni-app的项目图标是方型U，uni-app x的项目图标是圆形U。

如果项目类型未能正确识别，可以对项目点右键 - 重新识别项目类型

第2步 电脑是否能检测到手机

OS的资源管理器，是否可以发现手机设备。如果插入usb线后电脑检测不到手机设备，那么hx也肯定检测不到。

此时遇到问题一般是：

1.数据线不合格。有的数据线只能充电，不能发送数据。需要换线。
2.usb口电压不足或是坏口。需要换usb口，或配置一个带独立电源的usb hub。
usb和线的问题，可以通过交叉验证来排查具体的问题。

如果您使用的是模拟器，可以不关心usb口和数据线的问题。

老版的windows需要安装手机驱动。如果拒绝安装驱动，也无法检测到手机。安装驱动精灵或360、腾讯的各种手机助手或华为手机助手可解决驱动安装问题。

如果在启动HBuilderX后才安装驱动连接上手机，可能需要重启HBuilderX。

第3步 电脑与手机是否建立信任调试关系

3.1 Android设备信任

如果您的Android手机已开启USB调试模式，那么数据线连接好电脑和手机后，手机端会弹出确认框，询问是否同意该电脑调试本手机。点击同意进行授权。

如果手机未开启USB调试模式，那么按如下步骤开启。

Android手机的设置中，在系统（不同rom可能名字不一样，有的叫系统和更新）中，有一个开发人员选项。

如果你找不到这个选项，那说明这个rom默认隐藏了该选项。此时需要上网查一下这个rom如何打开开发人员选项。

比如华为手机是在设置的关于手机里，连续点击7次版本号。然后在返回到之前的系统和更新中找开发人员选项。

找到开发人员选项后，往下翻，有几个设置项：

  • USB 调试：打开
  • “仅充电”模式下允许ADB调试：打开
  • 监控ADB安装应用：建议关闭，开发更便利

以上设置完成后，如果数据线和电脑连接正常，那么手机端会弹出一个确认框：是否允许该电脑调试本手机。点击同意。并且最好是把始终同意该设备调试勾上。

如不小心拒绝，需要重插手机或重启电脑。

如未弹出询问框，可以拔线重插。

注意，Android5.0及以上系统，不要使用访客模式。这种模式下无法成功运行。

由于Android的开源性，不少国产Android rom的魔改造成兼容性问题：

  • 部分手机如小米，还有usb安装应用的独立权限，需在手机上允许通过usb安装应用。不同rom的界面不一样，请自行搜索你的手机打开usb安装应用的方式。
  • 如果是荣耀Magic UI系列手机，请参考 华为荣耀Magic UI系列手机ADB连接手机方法
    3.2 iOS设备信任
    iOS设备比较简单，数据线连接好电脑和手机后，手机端会弹出确认框，询问是否同意该电脑调试本手机。点击同意进行授权。

特别注意：Windows连接Android手机，一定要确保电脑已安装相应的手机驱动。

第4步 HBuilderX检测手机

在前述工作完成后，终于到了HBuilderX的环节了。

4.1 检测Android手机

HBuilderX自带一个ADB，用于调试Android手机。在HBuilderX的安装目录的\plugins\launcher-tools\tools\adbs\adb.exe

您也可以在HBuilderX的设置-运行设置中，选择其他的adb和端口。有些三方模拟器必须使用它自定义的端口才能连接。这需要查阅三方模拟器提供商的官方说明。

但如果您自定义了adb和端口，可能只能连接指定的模拟器。连接其他真机时可能无法识别，此时需要清空自定义设置。

当HBuilderX检测手机时，系统进程中会出现adb.exe。如果系统进程出现多个adb.exe，也可能还有其他名字，比如tadb.exe、kadb.exe，请把HBuilderX关闭，然后把进程里的相关adb进程都强制杀掉。

如果您在HBuilderX的运行界面检测不到手机，可以在cmd窗口里找到HBuilderX的安装目录的 \plugins\launcher-tools\tools\adbs\adb.exe，执行命令：adb.exe devices

这个命令就是google官方的检测手机的命令，如果这个命令拉出的device列表是空的，那么如下可能：

1.前述步骤中有的未完成
2.需使用管理员模式运行HBuilderX
3.某些杀毒软件限制了HBuilderX的行为。此时需要在杀毒软件中给HBuilderX设置白名单。
4.HBuilderX版本太老，需要升级
5.HBuilderX的adb被其他adb抢占了。排查抢占问题的方式。见下
6.HBuilderX的adb版本与手机要求不匹配。需更换adb版本。见下
有时mac上不得不修改adb_usb.ini

1.关于本机(指Mac系统的关于本机，非手机) –> 系统报告 -> usb -> 你所连接的device –> 厂商ID或者供应商ID(Vendor ID)
2.在终端执行如下命令：echo xxxxxx >> /.android/adb_usb.ini （“xxxxxx”为厂商ID或者供应商ID(Vendor ID)，有些系统下echo命令并不能正确写入文件，可在/.android/目录下修改或新建adb_usb.ini添加xxxxxx），重启HBuilderX。

  • Android 11部分手机真机运行文件同步失败的问题，请升级HBuilderX 到3.1.19+版本。
    4.1.2 adb占用问题
    Android的ADB服务已经被大量软件滥用，除了各种手机助手自带adb，其他如QQ、搜狗输入法、暴风影音、酷狗音乐、阿里旺旺等众多软件都自带adb。

有些工具的adb版本低且独占手机通道，就会导致HBuilderX无法连接手机。

  • 在任务管理器中找到adb.exe相关进程（包括kadb.exe等），在任务管理中右键该进程，打开文件位置，查看该进程是什么软件启动的。
  • 禁止这些软件监听手机插入（一般在该软件的设置中）、禁止自动启动。
  • 有些软件结束adb进程后又会自动启动，所以得将adb.exe文件重命名一下，实在不行卸载了这些流氓软件。
  • 关闭所有手机助手及进程里各种adb.exe（包括kadb.exe等），再试。
    如果你找不到被谁占用，则还可以使用如下方式检测，寻找幕后黑手：

1.打开命令行窗口
2.确认adb的启动进程： 寻找端口是5037的tcp连接，在命令行中输入：netstat -ano | findstr 5037
在输出结果中找到类似下面的一行： TCP 127.0.0.1:5037 0.0.0.0:0 LISTENING 5816 如果内容为空，可能是没有程序在占用adb端口。

或者使用 netstat -ano | findstr 5037>d:/1.txt 输出到文件中查找。

根据查询结果确认端口为5037的连接被那个进程占用，结果中显示的“5816”表示占用adb端口的进程PID。

3.根据进程的PID可以找到具体进程。
在命令行中输入：tasklist | findstr 5816 在输出结果中找到类似下面的一行：

adb.exe 5816 Console 0 4,440 K
复制代码
adb.exe（名称一般不是adb.exe，以adb.exe举例）为启动的adb进程。

或者手工在任务管理器中定位这个进程，打开任务管理器后，进入进程选项卡，如果列表里有PID，直接找；如果列表里没有PID，点菜单查看-选择列，勾上PID。

4.1.2 ADB版本问题
如果以上方式仍然不行，还有一种可能是手机对adb的版本有特定要求（遇到一些魅族手机有此问题），此时需要更换HBuilder的adb版本。

HBuilder安装目录下带了多个版本的adb。

替换版本前，将默认版本的adb.exe备份下。然后把其他版的adb.exe拷贝出来替换主目录下的exe。

当然也可下载Android SDK，将其中的adb替换HBuilderX自带的adb。

如果上面的方法还无法解决，菜单【帮助】【查看运行日志】，看下日志中存在什么相关的错误。 也可到DCloud论坛发帖。发帖时，详细说明操作系统信息、HBuilderX版本号、手机型号以及手机系统信息，并提供运行日志。

4.2 检测iOS手机

iOS设备连接比较简单，电脑安装itunes（或iTools），只要这些软件能连上iOS设备，HBuilderX就能连上。

4.2.1 windows上iTunes注意事项

[Windows 32位 iTunes]下载地址、所有版本的iTunes下载地址

[Windows 64位 iTunes]下载地址、所有版本的iTunes下载地址

  • windows上iTunes请勿从微软应用商店下载；建议从如上地址下载iTunes；如果是第一次安装完iTunes，建议重新启动电脑
  • 如果您的电脑是64位, 且HBuilderX的版本低于3.4.0，请下载12.9.4.102之前的iTunes
  • 如果您的电脑是32位，请下载12.9.4.102之前的iTunes
  • 不要用太老的iTunes版本，但有时iTunes最新版确实会有bug，如果不幸遇到，可以卸载干净后安装次新版
    如果以上方案都无法解决，有可能是因为本地库与iTunes带的库冲突了， 一般是iTunes库目录（32位系统目录为：C:\Program Files\Common Files\Apple\Apple Application Support，64位系统目录为：C:\Program Files (x86)\Common Files\Apple\Apple Application Support）下的dll文件 和系统库目录（32位系统目录为：C:\WINDOWS\system32，64位系统目录为：C:\Windows\SysWOW64）下的dll重名， 可将iTunes库目录下的同名dll文件拷贝到系统库目录下，或者将系统目录下的同名dll文件重命名或删除，然后再重启HBuilder或者重试真机运行。

有时iTunes安装时依赖库会丢失，需要重装iTunes解决问题。

4.2.2 iTunes无法检测到手机

iTunes无法检测到手机，iTunes弹窗提示：iTunes 在您的电脑上检测到不兼容的蓝牙软件，可能无法正常运行。

请禁用或更新某些蓝牙驱动。或参考Apple 论坛解决方案

4.2.3 Mac上连接iOS模拟器

1.Xcode必须安装在应用程序（Application）中
2.首先确认Xcode（版本必须是6.0及以上版本）已安装并能正常启动模拟器
3.如果仍然无法检测到，则打开Xcode，然后打开Xcode的 Preferences –> Locations，设置该界面中的 Command Line Tools 项，选择正确的Xcode版本即可