某得物 - WebView App H5调试

已于 2025-03-06 18:18:28 修改
阅读量1.3k 收藏 11
点赞数 4
分类专栏： 逆向反爬知识总结与案例 文章标签： python javascript 前端 html5 android
于 2025-03-06 14:46:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mamenqi_csdn/article/details/146063457
版权

⚠️前言⚠️

本文仅用于学术交流。
学习探讨逆向知识，欢迎私信共享学习心得。
如有侵权，联系博主删除。
请勿商用，否则后果自负。

说明一下

本文不涉及算法还原，仅记录一下

  • 如何调试 App H5
  • 定位加密位置

App版本与入口

  • app版本：5.31.1
  • app - 主页 - 心愿海洋 - 领鱼食任务列表

一. 什么是WebView? 特地去问了一个 kimi，我们来简单了解一下。

i. WebView 是用来做什么的？
WebView 是一种用于在应用程序中嵌入网页内容的组件，它允许用户在应用内部浏览网页，而无需打开独立的浏览器。
WebView 广泛应用于各种开发平台，包括 Android、iOS 和桌面应用程序开发中。

在 Android 开发中，WebView 是一个强大的组件，用于嵌入网页内容。它基于 Chromium 浏览器引擎，支持 HTML5 和 JavaScript。

在 iOS 开发中，WKWebView 是 WebView 的现代版本，属于 WebKit
了解本专栏 订阅专栏 解锁全文 超级会员免费看
安卓篇-webview调试以及源码修改
qq_42423940的博客
01-08 943
webview调试
得物数据抓取+参数加密解析
Voccoo的博客
09-02 7738
环境：python 3.6 脚本最后一次修改于 2021-08-27 本次解析的参数为sign，解析的来源为微信小程序源码和H5页面JS文件 咱也不废话，直接上干活 应产品的需求要求需要相关的品类数据（详情数据也验证过，都是相同的方式，没问题的） 需要获取产品列表页的数据，通过两个post接口获取。 接口1【https://app.poizon.com/api/v1/h5/search/fire/commodity/detail_brand"】 参数：{“sign”: 加密参数, “brandId”:
Android WebView 调试终极指南：轻松掌握手机与电脑端调试技巧
最新发布
.
05-15 746
本文详细介绍了在Android移动应用开发中调试WebView内容的步骤。首先，需要在手机上开启开发者选项并启用USB调试。接着，通过USB数据线将手机连接到电脑，并在电脑上使用Chrome浏览器访问chrome://inspect/#devices页面来识别和调试WebView。文章还提供了常见问题的解决方法，如设备不显示、页面不显示或inspect按钮不可点等问题。通过这些系统化的步骤，开发者可以高效地进行WebView的调试，确保应用的稳定性和性能。
app自动化 强制开启webview调试
weixin_43936332的博客
07-28 598
创建64bit 模拟器。
调试Android应用的webView界面
m0_65292523的博客
12-11 2602
前提：在手机的设置里找到系统和更新，点击系统和更新找到开发人员选项，打开USB调试，然后将手机使用USB数据线连接上电脑主机或电脑。访问网址：chrome://inspect/#devices。就会出现这样的调试界面，由于涉及隐私，界面我就打码了。然后打开网页会出现这样的页面，点击箭头所指。以上都是个人经验，有错误的地方求大佬纠正。
浏览器(chrome)调试app webview页面
sinat_41694829的博客
06-07 4620
浏览器调试安卓app页面
干货|app自动化测试之Andriod WebView如何测试
software_test010的博客
09-08 1067
Hybrid App（混合模式移动应用）是介于 Web-app、Native-app 之间的 app，本质上是 Native-app 中嵌入 WebView 组件，在 WebView 组件里可以访问 Web App。Hybrid App 在给用户良好交互体验的同时，还具备了 Web App 的跨平台、热更新机制等优势。 Android WebView 在 Android 平台上是一个特殊的 View，用它来展示网页内容。WebView 内部实现是采用渲染引擎来展示 View 的内容，提供网页前进后退、网页.
App Webview远程调试学习小记
安静的偏执的专栏
07-26 2742
1. 使用chrome对Android应用中的webview进行远程调试： 1.1. 首先创建一个带有webview的应用，访问百度： 布局文件activity_main.xml添加如下代码： <WebView android:id="@+id/webView" android:layout_width="fill_parent" android:layout_he
Android通过Chrome Inspect调试WebView的H5 App离线.rar
09-10
1.前端开发离不开Chrome的开发者工具，尤其是调试Android WebView时。...3.本包内自带Chrome浏览器、离线调试包，用法解压包后文档中会有详细说明亲测保证可用，离线webview调试工具,开发H5混合应用必备。
如何在移动端app里嵌套web页面之react-native-webview
相信自己，没有攀不过去的高山！
09-04 899
快速上手使用react-native-webview官方指南，可查看详细使用教程React Native WebView是 React Native 的社区维护的 WebView 组件。它旨在替代内置的 WebView（已从核心中移除）。简单来说，就是可以实现将web页面嵌套在app里面，实现混合开发。
Android离线webview调试工具,开发H5混合应用必备
05-14
在Android平台上，开发混合应用程序（Hybrid App）时，经常需要用到WebView来加载和展示H5内容。然而，对于H5页面的调试工作，开发者通常依赖于Chrome浏览器的开发者工具（Chrome DevTools），其中的`chrome://...
h5plus 当前webview_H5+ 跨平台APP开发教程 - webview 窗口界面管理 ( 一 )
weixin_39954674的博客
12-31 941
Webview模块使用 Webview 模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。open: 创建并打开Webview窗口说明：创建Webview窗口并带宽，用于加载新的HTML页面，可通过styles设置Webview窗口的样式。参数：url: ( String ) 可选 打开窗口加载的HTML页面地址新打开Webview窗口要加载的...
移动APP、webview调试最佳实践（一）
C7
05-01 1441
忽略掉细节，一个webAPP访问服务器的大概流程就是这个样子： 当手机打开一个网页的时候，应用会向服务器发起一个请求。然后服务器处理完这个请求，相应的，也会将结果返回给浏览器。   这个流程虽然简洁明了，但是对于开发者来说，却还是太复杂了。 比如我现在修复一个紧急的BUG，我需要立马推送服务器，那么我应该做好以下这个步骤： 1、  手机APP更新地址为局域网的机子 2、 
基于HTML5的仿得物H5端的开发(源码+开题)
2301_81685385的博客
02-21 1599
具体目标包括：构建用户友好的交互界面，实现商品信息的展示和搜索功能，支持商品品类的分类和管理，以及实现用户注册、登录和购物流程等功能。通过这一研究，期望能够为电子商务领域的H5应用开发提供有益的参考和借鉴，推动该领域的持续创新和发展。同时，还将关注平台的安全性和稳定性，通过合理的技术架构和防护措施，保障用户数据和交易信息的安全。最终，通过实际开发和测试，验证本研究的可行性和有效性，为电子商务领域的H5应用开发提供有益的实践经验和理论支持。2023-01-11 至 2023-02-28：论文初稿、代码测试，
H5 app开启web调试
__tian__的博客
11-19 3754
在Android app逆向时，H5类型的app的加密通常在js中，所以就需要一种手段来查看源代码，查看加密过程。
【iOS安全】开启任意app的WebView远程调试
Juruo@Security
08-09 3056
【iOS安全】开启任意app的WebView远程调试
得物H5页面url中sign逆向分析
02-24 2344
一、抓包分析 https://app.dewu.com/api/v1/h5/activity/fire/activity-platform/product/feeds/recommend/detail?sign=b3e37ea512b177be5309ef8db88ab4b3 二、sign逆向分析 打断点 F()(A()(r = "".concat(o)).call(r, "048a9c494...
APP逆向 day15 某物逆向
一起进步
07-09 4726
这次讲的很长，主要是学习技术和概念。
【胡乱前端】小程序web-view怎么调试h5?
weixin_43738978的博客
04-14 385
小程序web-view调试h5
{ "name": "uni-preset-vue", "version": "0.0.0", "scripts": { "dev:app": "uni -p app", "dev:app-android": "uni -p app-android", "dev:app-ios": "uni -p app-ios", "dev:custom": "uni -p", "dev:h5": "uni", "dev:h5:ssr": "uni --ssr", "dev:mp-alipay": "uni -p mp-alipay", "dev:mp-baidu": "uni -p mp-baidu", "dev:mp-jd": "uni -p mp-jd", "dev:mp-kuaishou": "uni -p mp-kuaishou", "dev:mp-lark": "uni -p mp-lark", "dev:mp-qq": "uni -p mp-qq", "dev:mp-toutiao": "uni -p mp-toutiao", "dev:mp-weixin": "uni -p mp-weixin", "dev:quickapp-webview": "uni -p quickapp-webview", "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei", "dev:quickapp-webview-union": "uni -p quickapp-webview-union", "build:app": "uni build -p app", "build:app-android": "uni build -p app-android", "build:app-ios": "uni build -p app-ios", "build:custom": "uni build -p", "build:h5": "uni build", "build:h5:ssr": "uni build --ssr",
04-17
<think>好的，我现在需要解决用户在使用uni-preset-vue构建项目时缺少app.json的问题。首先，我得回忆一下uni-app的结构和uni-preset-vue的作用。uni-app项目通常通过vue-cli创建，使用uni-preset-vue作为预设配置，这样能生成跨平台的项目结构。用户提到构建后缺少app.json，这可能导致微信小程序无法正常运行，因为app.json是小程序的全局配置文件。 根据用户提供的引用信息，特别是引用[2]和[3]，uni-preset-vue是一个预设配置，帮助开发者用Vue CLI创建uni-app项目，支持多平台发布。用户可能按照文档使用vue-cli创建项目，但构建后没有生成app.json。这时候，我需要考虑几个可能的原因： 1. **项目结构问题**：uni-app的标准结构里，app.json可能被其他文件替代，比如manifest.json或pages.json，而构建时才会生成app.json。用户可能没有正确配置这些文件，导致构建时没有生成。 2. **编译配置错误**：uni-preset-vue可能需要特定的编译设置来生成目标平台的文件。用户可能在构建时没有指定正确的平台，或者配置有误，导致app.json未被生成。 3. **路径或构建脚本问题**：构建后的文件可能输出到不同的目录，用户可能没有检查正确的目录，或者构建脚本没有正确复制或生成app.json。 接下来，我需要参考用户之前的问题和回答。用户之前的问题是关于IDEA中构建后缺少app.json，当时的解决方案分场景处理，包括跨平台框架、原生项目和混合项目。现在用户具体提到使用uni-preset-vue，属于跨平台框架的情况，因此之前的场景1可能适用，但需要更针对uni-preset-vue的细节。 根据引用[3]，使用vue-cli创建项目时，可以选择不同的模板，比如vite或vite-ts。用户可能下载了模板，但模板中是否包含必要的配置？或者是否需要手动配置？ 可能的解决步骤包括： - **检查manifest.json配置**：uni-app的manifest.json负责应用的全局配置，包括各平台的特定设置。用户需要确保在manifest.json中正确配置了微信小程序的appid和相关设置，这样构建时才会生成对应的app.json。 - **确认编译命令**：构建微信小程序需要使用特定的npm脚本，比如`npm run build:mp-weixin`，这样uni-app编译器才会生成针对微信小程序的目录结构，包括app.json。 - **检查输出目录**：构建后的文件可能输出到dist目录下的子目录，如`dist/build/mp-weixin`，用户需要确认是否在该路径下查找app.json，而不是项目根目录。 - **手动创建app.json**：如果自动生成失败，可能需要手动创建app.json，并确保内容符合微信小程序的要求，如包含pages数组和window配置等。但根据uni-app的机制，通常不需要手动创建，因为pages.json会被编译成app.json。 此外，用户可能需要检查uni-app的版本和依赖是否正确安装，确保编译过程没有出错。如果编译过程中有错误提示，需要根据提示信息进行调试。 还需要考虑用户是否在vue.config.js中进行了自定义配置，可能会影响输出结果。例如，是否修改了输出路径或复制文件的规则，导致app.json未被正确复制到目标目录。 最后，参考之前的回答，可能需要指导用户检查编译后的目录结构，确保微信开发者工具正确指向生成目录，并在必要时调整project.config.json中的miniprogramRoot设置。</think>#### 解决方案：使用`uni-preset-vue`构建项目时修复缺失`app.json`的完整流程 --- ### 一、问题根源定位 `uni-preset-vue`是基于Vue CLI的uni-app预设模板，其**核心配置逻辑**是通过`pages.json`和`manifest.json`生成各平台配置文件（如微信小程序的`app.json`）[^2]。缺失`app.json`通常由以下原因导致： 1. **编译命令未指定目标平台**：未触发微信小程序专用构建流程。 2. **`manifest.json`配置不完整**：缺少微信小程序平台的必要字段。 3. **输出目录未正确映射**：构建结果未同步到开发者工具指定路径。 --- ### 二、分步骤解决方案 #### 步骤1：验证项目初始化完整性 1. **检查模板下载** - 使用引用[3]提供的模板地址下载`vite`或`vite-ts`版本，确保初始项目包含以下关键文件： ```bash ├── src │ ├── pages # 页面目录（必须至少包含一个页面） │ ├── manifest.json # 跨平台配置 │ └── pages.json # 路由及样式配置 ``` 2. **安装依赖** - 在项目根目录执行： ```bash npm install ``` 确保`@dcloudio/uni-cli-shared`等核心依赖已正确安装。 #### 步骤2：配置`manifest.json`微信小程序参数 1. **添加微信平台配置** - 在`src/manifest.json`中添加或完善以下字段： ```json { "mp-weixin": { "appid": "你的微信小程序AppID", // 必须填写有效ID（测试时可留空） "setting": { "urlCheck": false, // 关闭域名校验 "es6": true, // 启用ES6转ES5 "postcss": true // 启用PostCSS处理 }, "usingComponents": true // 启用自定义组件 } } ``` - 若无微信配置块，构建时不会生成`app.json`[^2]。 #### 步骤3：执行定向编译命令 1. **触发微信小程序构建** - 在终端运行以下命令，明确指定目标平台： ```bash npm run build:mp-weixin ``` - 成功编译后，检查`dist/build/mp-weixin`目录，生成的`app.json`将在此路径下[^2]。 #### 步骤4：配置开发者工具路径映射 1. **修改`project.config.json`** - 在项目根目录创建或修改`project.config.json`，指定微信开发者工具的小程序根目录： ```json { "miniprogramRoot": "dist/build/mp-weixin", "setting": { "autoAudits": false // 关闭自动审核 } } ``` - 在微信开发者工具中导入项目时，选择此配置文件[^2]。 --- ### 三、关键配置示例 #### `pages.json`与`app.json`的映射关系 - **`pages.json`示例（开发者维护）** ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } } ], "globalStyle": { "navigationBarTextStyle": "black" } } ``` - **编译生成的`app.json`（自动生成）** ```json { "pages": ["pages/index/index"], "window": { "navigationBarTitleText": "首页", "navigationBarTextStyle": "black" } } ``` 该文件由`uni-cli`根据`pages.json`和`manifest.json`合并生成。 --- ### 四、高级调试技巧 1. **强制清理构建缓存** - 删除`dist`目录和`node_modules/.vite`缓存文件夹后重新构建： ```bash rm -rf dist && rm -rf node_modules/.vite && npm run build:mp-weixin ``` 2. **检查编译日志** - 观察构建过程中是否出现以下关键日志： ```bash [vite] 开始生成微信小程序配置文件... [uni] 已生成 app.json -> /dist/build/mp-weixin/app.json ``` 若未显示，说明编译流程未正确触发。 --- ### 五、常见问题排查表 | 现象 | 解决方案 | |--------------------------|--------------------------------------------------------------------------| | 编译后`dist`目录为空 | 检查`package.json`中是否包含`build:mp-weixin`脚本 | | 开发者工具提示“无效的project.config.json” | 确认`miniprogramRoot`路径使用绝对路径或正确相对路径[^2] | | 页面样式丢失 | 在`manifest.json`中启用`"postcss": true`并检查`uni.scss`全局变量引入 | --- #### 相关问题 1. 如何为`uni-preset-vue`项目配置多环境下的微信小程序AppID？ 2. 使用`uni-preset-vue`时如何处理微信小程序的自定义组件兼容性问题？ 3. 如何优化`uni-app`编译微信小程序时的构建速度？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

傲娇的小苹果

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

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

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

打赏作者

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

抵扣说明：

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

余额充值