uniapp项目怎么连接手机调试

桃扇骨 2022-12-19 03:38 270阅读 0赞

##### 1：新建一个uniapp项目，命名为test。 #####

![1b7f307e47e00c0b066808563bd88d01.png][]  
可以看到，在开发工具HBuilderX里面，极速生成的模板目录结构如下  
![09bcfb73f65fa18dc7890c1e85d77ec6.png][]  
打开pages底下的index.vue的组件，开始写代码了，把代码写好，这里随便写了一个例子。

<template>
    	<view>
    		<button type="primary" @click="scanCode()">button</button>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    
    			};
    		},
    		methods: {
    			scanCode() {
    				let that = this;
    				// 允许从相机和相册扫码
    				uni.scanCode({
    					success: function(res) {
    						that.result1 = res.result;
    					}
    				});
    
    
    			}
    		}
    	}
    </script>

##### 2：允许USB调试 #####

需要将手机用充电线连接电脑，并且允许USB调试（这一步很重要，不然HBuilderX搜不到你要调试的手机，无法建立连接。）

![3c06cfff3ab50d556667acb87025da17.png][]

如果不会打开USB调试模式，可以自行百度，我的是oppor的手机  
我就查了一下，oppor手机怎么打开USB调试模式.  
https://jingyan.baidu.com/article/93f9803fed1cfbe0e56f554d.html

##### 3：真机调试 #####

打开顶部菜单栏中的“运行”菜单，点击运行，选择运行到手机后者模拟器。

这个时候HBuilderX是自动检测手机是否连接，（如果运行设备为灰色，则说明没有手机没有连接成功）。

连接不成功的原因有很多，比如，手机没有打开usb调试模式，电脑中其他软件占用adb通道等。

![0c953f7359c67c6e2314d4ee9c1d0108.png][]

连接成功，控制台里面会有这样的提示  
![84ab45173f86375c4f99d01bffa93f3d.png][]

并且在手机端提示安装HBuilderX，同意安装就行了。  
![eb7cba86043955faa72cc9533f817e9b.png][]

##### 4：调试结果 #####

每次调试的时候，只需要打开HBuilderX，就能同步看到开发工具里面编辑的内容了。

![8f23807673519824d3b8397f9ebffae8.png][]

![欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。][500G]

[1b7f307e47e00c0b066808563bd88d01.png]: /images/20221120/757006b8ad284158a1d882ca4e66ddfe.png
[09bcfb73f65fa18dc7890c1e85d77ec6.png]: /images/20221120/5d249aa7e65746d084d2a84b1bef5f3d.png
[3c06cfff3ab50d556667acb87025da17.png]: /images/20221120/fb023ab228af4b9eaa9af72a880e6c44.png
[0c953f7359c67c6e2314d4ee9c1d0108.png]: https://img-blog.csdnimg.cn/img_convert/0c953f7359c67c6e2314d4ee9c1d0108.png
[84ab45173f86375c4f99d01bffa93f3d.png]: https://img-blog.csdnimg.cn/img_convert/84ab45173f86375c4f99d01bffa93f3d.png
[eb7cba86043955faa72cc9533f817e9b.png]: https://img-blog.csdnimg.cn/img_convert/eb7cba86043955faa72cc9533f817e9b.png
[8f23807673519824d3b8397f9ebffae8.png]: https://img-blog.csdnimg.cn/img_convert/8f23807673519824d3b8397f9ebffae8.png
[500G]: https://img-blog.csdnimg.cn/20201105105057554.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70#pic_center