HBuilderX的uniapp项目APP之Webview调试（像开发网页一样开发APP）

最新推荐文章于 2024-08-07 16:04:57 发布
最新推荐文章于 2024-08-07 16:04:57 发布
阅读量2.7k 收藏 14
点赞数 16
文章标签： uni-app 前端 android ios vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46141063/article/details/135548567
版权
本文介绍了如何在HBuilderX中配置Webview调试，包括开启真机运行自动调试功能，通过uniapp的APP基座将Vue或NVue页面跳转到测试页面并进行滚动调试，以及推荐使用uniapp的调试插件进行JavaScript开发的辅助工具。
摘要由CSDN通过智能技术生成

注意：仅限vue页面

  1. 打开HBuilderX -> 视图 -> 显示Webview调试控制台（勾选）

img

  1. Webview调试 - > 真机运行自动打开Webview调试（勾选）

img

  1. 运行 - > 运行到手机或模拟器 -> 运行到Android APP基座或其他

img

  1. 选择基座（若无自定义则选择标准基座） -> 运行
    在这里插入图片描述

  2. 手机APP跳转到测试页面（比如 下图页面为 pages/message/myChat ）

img

  1. 滚动页面找到测试路由 -> 点击 inspect(调试)

img

  1. 自动打开浏览器跳转到Webview调试视图层

img

后面就可以根据web开发经验进行调试

关于js及nvue页面推荐下载uniapp APP调试插件

秃头小钢镚儿
关注
Android与Vue的交互的方法示例
01-05
做过 Android 混合开发的，应该都知道 Android 中 Java 代码和 Javascript 代码之间的交互怎么做。 首先回顾一下 Java 和 Javascript 之间的交互。 JavaScript 调用 Java Android 中 WebView 添加供 Html 页面调用的 Java 方法： mWebView.addJavascriptInterface(new DirectToJS(), AndroidObj); class DirectToJS{ @JavascriptInterface public void showToast(){ Toas
Chrome手机调试（WebView或如Hbuilder开发的Web App）
热门推荐
滴水穿石，点石为金
04-27 1万+
概述 调试是软件开发过程中很重要的环节，它能帮助开发者快速的定位和解决开发过程中碰到的问题。对于HTML5的开发，大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验，不仅能快速方便调试JavaScript、检查HTML页面DOM结构、实时同步更新元素CSS样式，还能跟踪分析页面资源加载性能等问题。对于移动平台的开发者来说，从Android4.4（KitKat）开始，也可
uniapp 荣耀手机 没有检测到设备 运行到Android手机 真机运行
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-07 1856
使用uniapp框架搭建的项目，开发的时候在浏览器运行，因为项目要打包成App，所以需要真机联调，需要运行到Android手机，在手机上查看/运行项目。通过真机调试才能确保软件开发的准确性和页面显示的完整性。操作步骤：1.Usb连接手机和电脑，电脑上的HbuilderX打开项目；2.手机打开开发者选项，允许通过Usb传输文件；3.荣耀手机，选择USB配置，选择音频来源。。。写在这儿，HbuilderX能检测到设备华为手机,但是检测不到荣耀手机。
HBuilder 入门(3) / 关于WebView
持续改进
05-24 1233
个人认为WebView是 html5+ API的一个非常重要的部分。 WebView 的帮助文档：请点击这里   为什么对WebView的掌握很重要？因为它是一个HTML5+ APP的基础。刚刚学习HBuilder的同学一般会将重点放在 mui 组件上。mui 提供了很多默认的方法，如 openWindow(打开新页面)，back(回退到上一个窗口)等等，不会意识到其实你操作的就是Web...
HBuilder app调试webview
weixin_41653484的博客
12-05 2110
HBuilder app调试webview 1、顶部操作栏：运行->浏览器->chrome，F12调试 我的设置不知道是哪里出错了，点击chrome无反应 2、右上方视图：将开发视图改成边改边看 3、inspect网址直接进入调试:chrome://inspect 最开始从devices下的app进入调试，也就是这个页面：chrome://inspect/#devices，出现了问题...
开发uniapp过程中对app、微信小程序与h5的webview调试
宁波阿成的博客
02-24 3136
开发uniapp过程中对app、微信小程序与h5的webview调试
uni-app之 App 调试
weixin_44119268的博客
03-15 4379
uni-app 开发App、web端、小程序时都需要调试。web端可以在浏览器上打开开发者工具调试，小程序在对应平台的开发工具上可以调试，那么App开发怎么调试呢？注意：代码更改后会进行热更新，这时需要重新点击。这里的调试操作与在web网页调试的操作一样。等待出现以下界面，点击。
uniapp中运用web-view组件的经验
m0_47267820的博客
06-07 8277
uniapp中运用web-view组件的经验
uni-app通过Webview调试在电脑上做app端调试
weixin_45966674的博客
05-09 1195
然后在 视图 中找到 显示Webview调试控制台(D) 点击勾选上。如果你没有开启真机调试 他就会找不到可以模仿的设备环境。我们就可以在弹出的窗口内像WEB端一样进行app调试了。首先 我们要按正常步骤 将项目用真机调试跑起来。点击这里的 Inspect(调试)中的就会出现 Webview调试。
Hbuilder开发APP(二)——侧滑菜单（webview模式）
weixin_44548736的博客
05-08 1115
作者：任铭基，撰写时间：2019年5月5日 mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。 今天我们来说下webview模式 主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点： （1）菜单内容是单独的webview，故可被多个页面复用； （2）菜单内容在单独的webv...
HBuilderX uniapp打包内存溢出解决放案.zip
05-20
uniapp项目体量过大时，打包H5会报错， - process out of memory 解决放案： 替换HBuildX内置\HBuilderX\plugins\node\node.exe版本 添加\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\...
（uniapp框架）手动封装webview页面与App交互sdk
01-30
总的来说，手动封装Webview与App交互SDK是一项涉及原生App开发、JavaScript编程以及事件通信等多个技术领域的任务。通过uniApp提供的API和组件，我们可以有效地实现在H5页面和App之间的数据交互，提升用户体验，同时...
初试vue-cli使用HBuilderx打包app的坑
10-16
在使用vue-cli时，HBuilderx可以提供一键打包和预览功能，通过这种方式可以将Vue项目打包成不同平台的应用程序，例如Android和iOS。 以上知识点是根据给定文件内容总结的，详细介绍了在使用vue-cli与HBuilderx进行...
Android APP之WebView校验SSL证书的方法
08-29
"Android APP之WebView校验SSL证书的方法" Android APP之WebView校验SSL证书的方法是Android应用程序中一个非常重要的安全机制。SSL证书校验是指Android APP中的WebView组件在访问HTTPS站点时，如何验证服务器提供...
Android开发笔记之如何正确获取WebView的网页Title
01-05
最近做项目的时候，老大让我把之前做的webview打开网页的功能修改一下，说是要动态的获取网页的标题，然后显示在我们自己app的标题栏上，然后我就屁颠屁颠的跑去看webview的源码，看看有没有获取标题这个方法。...
HBuilder/HBuilderX 运行APP 及调试
m0_51534164的博客
01-22 1312
HBuilder/HBuilderX 运行APP 及调试，调试失败分析
Android&Html5混合开发通过Hbuilder X调试WebView
tangzeyu7的博客
05-25 2935
对Android&Html5混合开发WebView调试必备神器DevTools的补充,可解决inspect白屏问题.
【HBuilderX】调试（Android、小程序）
joanmelon的博客
12-10 6124
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
第一次用HBuilderX真机调试App(uniapp)的基本设置步骤
weixin_55344124的博客
06-02 1万+
第一次用HBuilderX真机调试App
hbuilderx uniapp app开发打包后模拟器显示正常 手机端下载部分页面不显示
05-23
这情况可能是因为手机端的浏览器或者webview不支持某些特定的CSS属性或者JS语法，而模拟器则没有这个问题。你可以尝试以下几个步骤： 1. 检查你的代码是否有使用到一些手机端不支持的CSS属性或者JS语法，例如flex布局等。 2. 可以在手机端使用Chrome浏览器的开发者工具进行调试，查看具体的错误信息。 3. 如果你使用的是uni-app的打包工具，可以尝试进行热更新或者重新打包，以更新一些可能会影响页面显示的JS文件或者CSS文件。 4. 如果以上方法都无法解决问题，可以考虑使用其他方式进行开发和打包，例如原生开发或者使用其他框架。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秃头小钢镚儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值