OPPO主题组件开发 - 调试与预览

本篇作为 OPPO主题组件调试与预览 文档的补充,因为它真的很简单而且太老,一些命令已发生变化😪

1. 调试前准备

1. PC 端下载 adb命令工具

  1. 下载 https://adbdownload.com/,或从其他地方下载也可
  2. 解压,放在你想放的文件夹下
  3. 配置环境变量
    右键 我的电脑/此电脑 选择 属性,在弹出的面板里选择 高级系统设置

    在弹出的面板里,选择 环境变量,在弹出的面板里找到 Path,点击 编辑

    在弹出的面板里,选择 新建,在新建的空白行内填入,你解压后的文件夹地址,比我的是 D:\Tools\windows\platform-tools

    最后一步步确定,关闭所有面板
  4. 测试
    打开命令行工具,输入 adb,出现如下,则表示安装成功

2. 手机端安装 多彩引擎

下载地址参见 https://open.oppomobile.com/new/developmentDoc/info?id=12221,下载后安装到手机上

3. 手机连接电脑

  1. 手机找到 开发者选项
    没这个选项的话,请打开手机 设置 -> 关于本机 -> 版本信息,然后持续点击 版本号,直至出现类似 您现在已处于开发者模式 的提示即可。然后在 设置 -> 其他设置 下即可找到 开发者选项
  2. 打开开发者选项里的 USB调试
    出现提示,请点击 确定
  3. 手机通过 USB 数据线连接电脑
    连接无反应的,请检查接口或换线
    连接后,选择 传输文件

    弹出框提示允许USB调试吗,请选择 允许

经历以上步骤,则准备工作已做好

2. adb 调试和预览

打开 cmd 命令工具,开始进行调试

1. 测试是否连接正常

输入 adb devices,出现下列情况,则说明连接正常,如果没有 device 和它前面的id,则说明连接不成功

shell 复制代码
PS C:\Users\Administrator> adb devices
List of devices attached
8d58ec40        device

2. 创建手机端的 widget 文件夹

输入 adb shell mkdir /sdcard/Android/data/com.heytap.colorfulengine/files/widget,因为我已创建过,所以它提示已存在
关于命令中间 com.heytap.colorfulengine 这个地址,可以打开 多彩引擎 软件,最上面有提示

shell 复制代码
PS C:\Users\Administrator> adb shell mkdir /sdcard/Android/data/com.heytap.colorfulengine/files/widget
mkdir: '/sdcard/Android/data/com.heytap.colorfulengine/files/widget': File exists

3. 将创建的组件包发送到手机

如果你还没有创建自己的组件,可以先下载官方示例里 模板包,下载后重新命名简短点,然后 cd 到当前目录(或在当前目录右键打开 cmd 命令)执行发送命令 adb push xxx.zip /sdcard/Android/data/com.heytap.colorfulengine/files/widgetxxx.zip 请修改为具体你命名的文件名。

shell 复制代码
PS D:\workspace\2023\oppoTheme\oppowidget> adb push system.zip /sdcard/Android/data/com.heytap.colorfulengine/files/widget
system.zip: 1 file pushed, 0 skipped. 131.9 MB/s (240171 bytes in 0.002s)

出现以上提示,则表明发送成功

4. 手机端打开 多彩引擎 软件

点击新出现的压缩包,出现组件预览,然后 添加到桌面 即可

开发者进阶

1. 其他常用的 adb 命令

安装本地APK软件

shell 复制代码
adb install xxx.apk

删除手机上的组件文件

shell 复制代码
adb shell rm /sdcard/Android/data/com.heytap.colorfulengine/files/widget/xxx.zip

卸载手机软件请参考其他博文 使用adb安装或卸载卸载手机系统应用

2. 连接OPPO远程真机

请先查看 OPPO远程真机的官方介绍

前2步进行完毕后,执行以下命令

shell 复制代码
# 执行云真机连接命令,输入账号和密码,连接可用端口,比如23008,提示`failed to authenticate to 127.0.0.1:23008`不用理会是正常的
adb connect 127.0.0.1:14243
# 安装测试软件
adb install ColorfulEngine#Widget_13.0.62-Test-20230829-315979231.apk
# 安装完成后,其余操作和本地连接手机相同,推送组件然后查看
adb push xxx.zip /sdcard/Android/data/com.heytap.colorfulengine/files/widget
# 断开连接
adb disconnect 127.0.0.1:14243

3. PC端集成 组件打包/删除/压缩 命令

请查看我的上一篇博文 Cygwin,在windows中使用linux命令

安装 Cygwin 后,整个调试流程示例如下:

  1. 如果旧压缩包,先删除
shell 复制代码
rm .\xxx.zip
  1. 压缩
shell 复制代码
zip -r xxx.zip .\system\
  1. 推送压缩包到手机
shell 复制代码
adb push xxx.zip /sdcard/Android/data/com.heytap.colorfulengine/files/widget
相关推荐
布兰妮甜10 天前
React组件最佳实践
前端·javascript·react.js·组件
MaxCosmos200122 天前
挑战用React封装100个组件【006】
前端·javascript·react.js·typescript·前端框架·组件
MaxCosmos200122 天前
挑战用React封装100个组件【002】
css·前端框架·reactjs·组件·样式
图王大胜2 个月前
Android Framework AMS(10)广播组件分析-1
android·framework·应用·组件·broadcast·ams·广播
weixin_422201302 个月前
[Vue warn]: Do not use built-in or reserved HTML elements as component id:
vue·html·组件·重名·name
Amd7942 个月前
Nuxt.js 应用中的 components:extend 事件钩子详解
vue·生命周期·组件·nuxt·扩展·钩子·动态
Amd7942 个月前
Nuxt.js 应用中的 components:dirs 事件钩子详解
解析·组件·nuxt·目录·扩展·钩子·动态
暂时先用这个名字2 个月前
vue3中mitt和pinia的区别和主要用途,是否有可重合的部分?
开发语言·javascript·vue.js·pinia·组件·通信·mitt
Amd7942 个月前
Nuxt.js 应用中的 imports:extend 事件钩子详解
组件·模块·nuxt·导入·扩展·钩子·动态
Amd7943 个月前
理解 Vue 的 setup 应用程序钩子
vue·生命周期·组件·方法·响应式·计算属性·setup