uniapp项目怎么连接手机调试

简介: uniapp项目怎么连接手机调试

1:新建一个uniapp项目,命名为test。


可以看到,在开发工具HBuilderX里面,极速生成的模板目录结构如下

 

打开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搜不到你要调试的手机,无法建立连接。)

如果不会打开USB调试模式,可以自行百度,我的是oppor的手机

我就查了一下,oppor手机怎么打开USB调试模式.


3:真机调试


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


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


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

连接成功,控制台里面会有这样的提示

 

并且在手机端提示安装HBuilderX,同意安装就行了。

 


4:调试结果


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



相关文章
|
1月前
|
小程序 安全 JavaScript
从零开始uniapp微信小程序项目到发布(超级详细)
最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目
133 1
|
1月前
|
移动开发 小程序 JavaScript
uniapp指南第1章---如何创建一个uniapp项目
uniapp指南第1章---如何创建一个uniapp项目
69 0
|
3月前
|
存储 监控 iOS开发
iOS应用崩溃了,如何通过崩溃手机连接电脑查找日志方法
在iOS应用开发过程中,调试日志和奔溃日志是开发者必不可少的工具。当iOS手机崩溃时,我们可以连接电脑并使用Xcode Console等工具来查看日志。然而,这种方式可能不够方便,并且处理奔溃日志也相当繁琐。克魔助手的出现为开发者带来了极大的便利,本文将详细介绍其功能和使用方法。 克魔助手会提供两种日志,一种是实时的,一种的是崩溃的。(由于崩溃日志的环境很麻烦,目前只展示实时日志操作步骤)
|
1月前
|
移动开发 小程序 JavaScript
(一)、项目介绍及知识点概述【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】
(一)、项目介绍及知识点概述【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】
21 0
|
3月前
|
存储 JSON JavaScript
前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)-1
前后端分离项目知识汇总(微信扫码登录,手机验证码登录,JWT)
66 0
|
1天前
|
人工智能 移动开发 小程序
uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)
uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)
12 2
|
1天前
|
人工智能 小程序 前端开发
uniapp框架——初始化vue3项目(搭建ai项目第一步)
uniapp框架——初始化vue3项目(搭建ai项目第一步)
11 1
|
1月前
|
缓存 数据可视化 小程序
uniapp项目中使用vue3开发多端项目实践
uniapp项目中使用vue3开发多端项目实践
21 0
|
1月前
|
移动开发 自然语言处理 小程序
miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)
miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)
35 1
|
1月前
|
移动开发 数据安全/隐私保护
HC05蓝牙模块与手机APP连接
HC05蓝牙模块与手机APP连接
42 1

热门文章

最新文章