HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

iOS IPA 混淆实测分析:从逆向视角验证加固效果与防护流程

iOS

'''作为iOS开发者,如果从未尝试过逆向别人的App,就很难深刻理解为什么自己也需要给App做混淆和安全加固。我们在团队内部的安全演练中,专门挑选了一个无混淆的线上App进行逆向,并模拟了攻击者可能采取的步骤,结果表明——在未做任何混淆的情况下,逆向成本之低令人震惊

本文从一次逆向演练的真实过程讲起,结合如何用工具链(如Ipa Guard)将IPA保护起来做出完整总结。

演练过程:从下载IPA到获取核心逻辑

第一步:下载IPA包

利用Apple Configurator或在带越狱功能的设备上直接导出ipa文件,这是逆向的起点。

第二步:静态扫描

使用MobSF或类似扫描工具,在不到1分钟内就能发现以下问题:

  • 硬编码的API地址、Token
  • 明文字符串中的内部注释信息
  • Info.plist中开启的日志、调试选项

这些信息几乎是“白送”的,攻击者零门槛就能拿到。

第三步:符号提取

通过class-dump拉出可读的OC/Swift类结构,很多方法直接暴露核心业务逻辑,比如支付、数据上报、账号体系等。

例如:

@interface PaymentManager : NSObject  
- (void)sendOrderWithUser:(NSString *)uid amount:(NSNumber *)amount;  
@end

有了可读的符号信息,反编译器(如Hopper、Ghidra)里能直接映射方法名和调用关系。

第四步:调试和Hook

使用Frida或Theos等工具,结合符号信息,可以在几分钟内编写脚本Hook关键函数,拦截请求、伪造响应,完成对App行为的完全控制。

总结:一次逆向下来,从下载到Hook,不到30分钟。如果App没有任何混淆,核心逻辑等于裸奔。

如何针对逆向痛点分步加固

了解逆向方式后,才能有针对性地进行防护。我们在项目中形成了以下工具链分工方案:

1. 使用MobSF先行扫描

在项目交付阶段,先用MobSF对ipa做一次内部扫描。若扫描结果发现敏感字符串,则将其配置进Ipa Guard混淆白名单或敏感内容处理列表。

2. class-dump生成符号基线

即使自己不是要逆向,class-dump也是一种“自测”手段。它让你知道别人拿到ipa后能看到什么,并帮助提前确定要混淆的重点对象,比如:

  • 用户信息处理相关类
  • 核心算法类
  • 第三方支付接口实现

3. 用Ipa Guard执行符号混淆

针对class-dump识别出的符号,用Ipa Guard将类名、方法名、参数名批量重命名为无意义短串,如:

@interface Abf124Gd : NSObject  
- (void)Xy99qOpa:(NSString *)a1;  
@end

混淆后,Frida脚本需要猜测甚至暴力枚举方法名才能Hook,大幅增加攻击成本。

4. 对资源做伪装处理

混淆完代码结构后,资源文件的保护也很重要。我们用脚本批量改名图片、json、音频文件,同时用Ipa Guard提供的资源MD5修改功能扰乱哈希校验值,防止通过比对资源包识别App版本。

5. 重签名并验证运行

混淆后的ipa需要重签名以便部署测试,常用方式:

  • Xcode命令行codesign签名
  • ResignTool批量处理多个ipa版本

通过签名后的测试包在多种设备、不同iOS版本上测试功能完整性,是保证混淆安全性不破坏App的最后关键步骤。

为什么单一工具无法满足完整需求

演练中也验证了一点:没有任何一款工具能独立完成全部安全目标。例如:

  • MobSF能做静态扫描但不做混淆
  • class-dump只做符号提取无法保护
  • Ipa Guard专注符号和资源混淆,但不做漏洞扫描

因此在实际流程中,需要组合使用,形成闭环。

防护不是万能,但能显著增加逆向成本

在演练的结尾,我们再次尝试对混淆后的ipa做同样的逆向。结果表明:

  • class-dump输出的符号已成不可读乱码
  • Hopper反编译出的符号与App真实逻辑失去关联
  • Frida脚本需要穷举或暴力匹配Hook目标

虽然不能保证绝对安全,但逆向周期从30分钟提升到至少数天,足够让大多数攻击者放弃或转向易破解的目标。


以上是基于我们一次内部逆向演练总结出的实战经验,以及如何用MobSF、class-dump、Ipa Guard等工具配合,完成iOS ipa文件在交付阶段的安全加固。

希望能帮到需要在上线前应对逆向风险的iOS开发团队,让你更清晰地理解为什么做混淆、怎么做混淆,以及如何在项目中落实执行。'''

继续阅读 »

'''作为iOS开发者,如果从未尝试过逆向别人的App,就很难深刻理解为什么自己也需要给App做混淆和安全加固。我们在团队内部的安全演练中,专门挑选了一个无混淆的线上App进行逆向,并模拟了攻击者可能采取的步骤,结果表明——在未做任何混淆的情况下,逆向成本之低令人震惊

本文从一次逆向演练的真实过程讲起,结合如何用工具链(如Ipa Guard)将IPA保护起来做出完整总结。

演练过程:从下载IPA到获取核心逻辑

第一步:下载IPA包

利用Apple Configurator或在带越狱功能的设备上直接导出ipa文件,这是逆向的起点。

第二步:静态扫描

使用MobSF或类似扫描工具,在不到1分钟内就能发现以下问题:

  • 硬编码的API地址、Token
  • 明文字符串中的内部注释信息
  • Info.plist中开启的日志、调试选项

这些信息几乎是“白送”的,攻击者零门槛就能拿到。

第三步:符号提取

通过class-dump拉出可读的OC/Swift类结构,很多方法直接暴露核心业务逻辑,比如支付、数据上报、账号体系等。

例如:

@interface PaymentManager : NSObject  
- (void)sendOrderWithUser:(NSString *)uid amount:(NSNumber *)amount;  
@end

有了可读的符号信息,反编译器(如Hopper、Ghidra)里能直接映射方法名和调用关系。

第四步:调试和Hook

使用Frida或Theos等工具,结合符号信息,可以在几分钟内编写脚本Hook关键函数,拦截请求、伪造响应,完成对App行为的完全控制。

总结:一次逆向下来,从下载到Hook,不到30分钟。如果App没有任何混淆,核心逻辑等于裸奔。

如何针对逆向痛点分步加固

了解逆向方式后,才能有针对性地进行防护。我们在项目中形成了以下工具链分工方案:

1. 使用MobSF先行扫描

在项目交付阶段,先用MobSF对ipa做一次内部扫描。若扫描结果发现敏感字符串,则将其配置进Ipa Guard混淆白名单或敏感内容处理列表。

2. class-dump生成符号基线

即使自己不是要逆向,class-dump也是一种“自测”手段。它让你知道别人拿到ipa后能看到什么,并帮助提前确定要混淆的重点对象,比如:

  • 用户信息处理相关类
  • 核心算法类
  • 第三方支付接口实现

3. 用Ipa Guard执行符号混淆

针对class-dump识别出的符号,用Ipa Guard将类名、方法名、参数名批量重命名为无意义短串,如:

@interface Abf124Gd : NSObject  
- (void)Xy99qOpa:(NSString *)a1;  
@end

混淆后,Frida脚本需要猜测甚至暴力枚举方法名才能Hook,大幅增加攻击成本。

4. 对资源做伪装处理

混淆完代码结构后,资源文件的保护也很重要。我们用脚本批量改名图片、json、音频文件,同时用Ipa Guard提供的资源MD5修改功能扰乱哈希校验值,防止通过比对资源包识别App版本。

5. 重签名并验证运行

混淆后的ipa需要重签名以便部署测试,常用方式:

  • Xcode命令行codesign签名
  • ResignTool批量处理多个ipa版本

通过签名后的测试包在多种设备、不同iOS版本上测试功能完整性,是保证混淆安全性不破坏App的最后关键步骤。

为什么单一工具无法满足完整需求

演练中也验证了一点:没有任何一款工具能独立完成全部安全目标。例如:

  • MobSF能做静态扫描但不做混淆
  • class-dump只做符号提取无法保护
  • Ipa Guard专注符号和资源混淆,但不做漏洞扫描

因此在实际流程中,需要组合使用,形成闭环。

防护不是万能,但能显著增加逆向成本

在演练的结尾,我们再次尝试对混淆后的ipa做同样的逆向。结果表明:

  • class-dump输出的符号已成不可读乱码
  • Hopper反编译出的符号与App真实逻辑失去关联
  • Frida脚本需要穷举或暴力匹配Hook目标

虽然不能保证绝对安全,但逆向周期从30分钟提升到至少数天,足够让大多数攻击者放弃或转向易破解的目标。


以上是基于我们一次内部逆向演练总结出的实战经验,以及如何用MobSF、class-dump、Ipa Guard等工具配合,完成iOS ipa文件在交付阶段的安全加固。

希望能帮到需要在上线前应对逆向风险的iOS开发团队,让你更清晰地理解为什么做混淆、怎么做混淆,以及如何在项目中落实执行。'''

收起阅读 »

cnm

文件太大了,上传不了

文件太大了,上传不了

我对uniappx的一些看法

我早期写mui, 后续用apicoud ,此时apicloud服务层面做的更好。
后放弃apicloud使用flutter, flutter理念更加不错。
最近发现uniappx ,觉得uniappx理念不错,这些理念都是有迹可循,但没有形成规范,兼容平台过多形成累赘。
1.我觉得uniappx应该放弃其他web端技术的平台,由uniapp继续支持,因为web本就互通。一次写多端理解适配web技术产品还行,
app 3端,这样适配,只会导致app 3端只能做简单应用层app,复制大型应用只能再次去选择flutter或者原生,uniappx在整体布局上明显不足。
2.uniappx的竞争对象应该是flutter,不仅仅编译适配3端,还可以考虑适配c#桌面,linux系统。不应该局限在应用层,
用web技术代码风格规范,去适配其他平台的应用。
3.目前这种大杂烩,uniapp,uniappx互相兼容的模式,带来各种混乱
01.文档层面,准确度不够,对比案例和文档,有些内容基本没有写入文档,或者在uniapp文档中,但对于没有用过和不了解uniapp非常麻烦,
并且uniapp的理念在当下并不新颖。此处对uniappx人员非常不友好。
02.uniappx借助了各种理念,比喻借助了vue,ts等,编译需要,并不会全部使用,但在文档上并没有与这些语言框架切割,还需要去其他平台看那些技术的文档,
dcloud对于这些讲解不全,我猜dcloud底层架构人员都是前端,用前端思维去解决所有问题,并且默认认为所有人都懂前端发展的层次技术,
借助前端的理念去规范和组织代码是没有问题的,但没必要去借助前端思维。
03.前端技术有极强的互通性,如web,各平台小程序,写各个平台不需要学新技术,仅仅是节省了一点开发时间,其他没啥优势,甚至在各平台新功能上无法即使更新,
那么其服务的群体也是国内的微型公司或者是市场性公司,功能也极具简单,也说明了布局者眼光非常窄,放弃了全球市场,也没有全球的世界观,
当然也就没有大的高加载的客户群体,目前这种节省了一点开发时间的成本,其附加值本就低,很有可能会转移到其他非发达国家去开发,
届时dcloud的这种服务对象会错位。
4.目前我看到的uniappx的优势是
1.用web技术代码风格规范,通过编译的能力适配各平台。
2.最早适配鸿蒙的混合模式,flutter都没这么快,这是市场空白期。

继续阅读 »

我早期写mui, 后续用apicoud ,此时apicloud服务层面做的更好。
后放弃apicloud使用flutter, flutter理念更加不错。
最近发现uniappx ,觉得uniappx理念不错,这些理念都是有迹可循,但没有形成规范,兼容平台过多形成累赘。
1.我觉得uniappx应该放弃其他web端技术的平台,由uniapp继续支持,因为web本就互通。一次写多端理解适配web技术产品还行,
app 3端,这样适配,只会导致app 3端只能做简单应用层app,复制大型应用只能再次去选择flutter或者原生,uniappx在整体布局上明显不足。
2.uniappx的竞争对象应该是flutter,不仅仅编译适配3端,还可以考虑适配c#桌面,linux系统。不应该局限在应用层,
用web技术代码风格规范,去适配其他平台的应用。
3.目前这种大杂烩,uniapp,uniappx互相兼容的模式,带来各种混乱
01.文档层面,准确度不够,对比案例和文档,有些内容基本没有写入文档,或者在uniapp文档中,但对于没有用过和不了解uniapp非常麻烦,
并且uniapp的理念在当下并不新颖。此处对uniappx人员非常不友好。
02.uniappx借助了各种理念,比喻借助了vue,ts等,编译需要,并不会全部使用,但在文档上并没有与这些语言框架切割,还需要去其他平台看那些技术的文档,
dcloud对于这些讲解不全,我猜dcloud底层架构人员都是前端,用前端思维去解决所有问题,并且默认认为所有人都懂前端发展的层次技术,
借助前端的理念去规范和组织代码是没有问题的,但没必要去借助前端思维。
03.前端技术有极强的互通性,如web,各平台小程序,写各个平台不需要学新技术,仅仅是节省了一点开发时间,其他没啥优势,甚至在各平台新功能上无法即使更新,
那么其服务的群体也是国内的微型公司或者是市场性公司,功能也极具简单,也说明了布局者眼光非常窄,放弃了全球市场,也没有全球的世界观,
当然也就没有大的高加载的客户群体,目前这种节省了一点开发时间的成本,其附加值本就低,很有可能会转移到其他非发达国家去开发,
届时dcloud的这种服务对象会错位。
4.目前我看到的uniappx的优势是
1.用web技术代码风格规范,通过编译的能力适配各平台。
2.最早适配鸿蒙的混合模式,flutter都没这么快,这是市场空白期。

收起阅读 »

如何提升 iOS App 全链路体验?从启动到退出的优化调试流程

iOS

'''在iOS App开发中,我们往往只在出现崩溃、卡顿时才想着调试。但如果从一开始就能在App整个生命周期里嵌入性能检测、日志跟踪、文件校验等机制,调试就不再是亡羊补牢,而是提前发现问题的主动手段。

在多个中大型项目中,我们逐步形成了把App 从启动到退出分成几个关键阶段的思路,并在每个阶段用对应工具收集和分析数据,形成一个全链路体验保障闭环。本文就结合实战,分享这一流程。


阶段一:App启动——快与稳定的第一印象

对用户来说,App的第一次印象就是启动速度。首屏快慢决定了留存的第一步。

常见问题:

  • 启动动画卡顿
  • 启动白屏时间过长
  • 首次渲染资源加载慢

工具组合:

  • 克魔性能面板(FPS、CPU、GPU监测)
  • Instruments中的Time Profiler(慢函数定位)

实战案例:
在一个新闻App中,测试人员反馈部分老iPhone设备启动后动画掉帧明显。我们用克魔录制启动过程的性能数据,发现FPS在首屏期间波动到20-25帧,CPU峰值接近100%。随后通过Instruments定位到主线程执行了大批图片解码任务,把解码放到异步线程后,首屏加载从2.3秒降到1.1秒,FPS稳定在55以上。


阶段二:页面交互——保持流畅的操作体验

用户在滑动、点击、切换页面时如果体验到延迟,会直接影响满意度。

常见问题:

  • 列表滚动掉帧
  • 动画卡顿
  • 按钮点击响应慢

工具组合:

  • 克魔目标App帧率监控
  • Charles(排查慢接口引起的交互卡顿)
  • Reveal(UI层级性能可视化)

实战案例:
在一个电商App中,商品详情页顶部Banner在滑动时总会瞬间卡顿。使用克魔追踪帧率后,发现滑动期间FPS周期性跌到30左右,而Charles显示图片接口返回耗时超过800ms。最终定位是懒加载逻辑中图片请求未做缓存,接口慢时阻塞了Banner更新。


阶段三:后台与切换——防止资源泄露与异常耗电

当App进入后台、或在App之间切换时,可能触发资源释放、数据保存、后台任务,这些都容易留下隐蔽Bug。

常见问题:

  • App进入后台后偶发崩溃
  • 后台任务未及时结束导致耗电
  • 切回前台后界面异常

工具组合:

  • 克魔使用记录(监控后台用电、硬件调用时长)
  • Xcode Organizer(查看后台挂起/崩溃情况)

实战案例:
我们在调试一个视频App时发现部分用户手机夜间待机掉电过快。用克魔可追溯的使用记录看后台App行为,发现App被唤醒后一直占用音频模块。结合系统日志分析确认后台任务未释放AVAudioSession,修复后后台待机电量下降明显。


阶段四:文件与缓存管理——保持轻量、减少占用

随着使用时间增长,App会积累缓存、日志、数据库文件,这些文件如果管理不好,会让App变得臃肿、甚至影响性能。

常见问题:

  • 缓存无限增长
  • 老版本文件残留
  • 写入权限错误

工具组合:

  • 克魔文件管理(无越狱访问App沙盒目录,验证缓存与配置文件)
  • mac终端/SQLite工具(查看数据库内容)

实战案例:
我们给一个内容社区App上线评论表情缓存功能后,发现某版本后缓存未清理,克魔中能直观看到Library/Caches/emoji文件夹无限增长。通过对比新旧版本的目录结构发现,逻辑里只清理了表层文件,忘了子目录。补上子目录删除后问题解决。


阶段五:崩溃与错误收集——闭环问题定位

即使功能、性能都做得再好,用户使用中也可能遇到崩溃或闪退。及时收集和分析崩溃,是产品质量保障的最后一环。

常见问题:

  • BAD_ACCESS、内存越界等低频但严重崩溃
  • 线上无法重现的问题

工具组合:

  • 克魔崩溃日志导出+符号化
  • Bugly/Sentry(线上聚合崩溃统计)
  • Xcode Organizer(连接设备时分析崩溃)

实战案例:
在一个海外用户量较大的版本中,偶发崩溃在国内无法复现。让当地QA通过克魔导出.crash文件并发送给国内研发,经过symbolicatecrash符号化还原到ExactViewController.m的第42行,发现是CoreData对象在释放后访问,修复后崩溃率显著下降。


我们的端到端调试工具组合

生命周期阶段 常用工具
启动 克魔性能面板 + Instruments
交互 克魔帧率监测 + Charles + Reveal
后台切换 克魔使用记录 + 系统日志
文件管理 克魔文件模块 + SQLite工具
崩溃处理 克魔崩溃日志导出 + symbolicatecrash + Bugly

结语:把调试嵌入每个生命周期,才有真正可控的体验

调试不该只是出Bug后的亡羊补牢,而是要像产品设计一样,从用户全程体验角度思考,把性能、日志、资源管理融入到App生命周期的每个环节。

这套“端到端调试闭环”,让我们从启动到退出都能掌握真实数据,保证App性能与稳定性。而克魔在整个流程中承担的角色是提供多场景、跨平台的数据采集和离线分析能力,让每个阶段的问题都能在不同环境下被回收和定位。'''

继续阅读 »

'''在iOS App开发中,我们往往只在出现崩溃、卡顿时才想着调试。但如果从一开始就能在App整个生命周期里嵌入性能检测、日志跟踪、文件校验等机制,调试就不再是亡羊补牢,而是提前发现问题的主动手段。

在多个中大型项目中,我们逐步形成了把App 从启动到退出分成几个关键阶段的思路,并在每个阶段用对应工具收集和分析数据,形成一个全链路体验保障闭环。本文就结合实战,分享这一流程。


阶段一:App启动——快与稳定的第一印象

对用户来说,App的第一次印象就是启动速度。首屏快慢决定了留存的第一步。

常见问题:

  • 启动动画卡顿
  • 启动白屏时间过长
  • 首次渲染资源加载慢

工具组合:

  • 克魔性能面板(FPS、CPU、GPU监测)
  • Instruments中的Time Profiler(慢函数定位)

实战案例:
在一个新闻App中,测试人员反馈部分老iPhone设备启动后动画掉帧明显。我们用克魔录制启动过程的性能数据,发现FPS在首屏期间波动到20-25帧,CPU峰值接近100%。随后通过Instruments定位到主线程执行了大批图片解码任务,把解码放到异步线程后,首屏加载从2.3秒降到1.1秒,FPS稳定在55以上。


阶段二:页面交互——保持流畅的操作体验

用户在滑动、点击、切换页面时如果体验到延迟,会直接影响满意度。

常见问题:

  • 列表滚动掉帧
  • 动画卡顿
  • 按钮点击响应慢

工具组合:

  • 克魔目标App帧率监控
  • Charles(排查慢接口引起的交互卡顿)
  • Reveal(UI层级性能可视化)

实战案例:
在一个电商App中,商品详情页顶部Banner在滑动时总会瞬间卡顿。使用克魔追踪帧率后,发现滑动期间FPS周期性跌到30左右,而Charles显示图片接口返回耗时超过800ms。最终定位是懒加载逻辑中图片请求未做缓存,接口慢时阻塞了Banner更新。


阶段三:后台与切换——防止资源泄露与异常耗电

当App进入后台、或在App之间切换时,可能触发资源释放、数据保存、后台任务,这些都容易留下隐蔽Bug。

常见问题:

  • App进入后台后偶发崩溃
  • 后台任务未及时结束导致耗电
  • 切回前台后界面异常

工具组合:

  • 克魔使用记录(监控后台用电、硬件调用时长)
  • Xcode Organizer(查看后台挂起/崩溃情况)

实战案例:
我们在调试一个视频App时发现部分用户手机夜间待机掉电过快。用克魔可追溯的使用记录看后台App行为,发现App被唤醒后一直占用音频模块。结合系统日志分析确认后台任务未释放AVAudioSession,修复后后台待机电量下降明显。


阶段四:文件与缓存管理——保持轻量、减少占用

随着使用时间增长,App会积累缓存、日志、数据库文件,这些文件如果管理不好,会让App变得臃肿、甚至影响性能。

常见问题:

  • 缓存无限增长
  • 老版本文件残留
  • 写入权限错误

工具组合:

  • 克魔文件管理(无越狱访问App沙盒目录,验证缓存与配置文件)
  • mac终端/SQLite工具(查看数据库内容)

实战案例:
我们给一个内容社区App上线评论表情缓存功能后,发现某版本后缓存未清理,克魔中能直观看到Library/Caches/emoji文件夹无限增长。通过对比新旧版本的目录结构发现,逻辑里只清理了表层文件,忘了子目录。补上子目录删除后问题解决。


阶段五:崩溃与错误收集——闭环问题定位

即使功能、性能都做得再好,用户使用中也可能遇到崩溃或闪退。及时收集和分析崩溃,是产品质量保障的最后一环。

常见问题:

  • BAD_ACCESS、内存越界等低频但严重崩溃
  • 线上无法重现的问题

工具组合:

  • 克魔崩溃日志导出+符号化
  • Bugly/Sentry(线上聚合崩溃统计)
  • Xcode Organizer(连接设备时分析崩溃)

实战案例:
在一个海外用户量较大的版本中,偶发崩溃在国内无法复现。让当地QA通过克魔导出.crash文件并发送给国内研发,经过symbolicatecrash符号化还原到ExactViewController.m的第42行,发现是CoreData对象在释放后访问,修复后崩溃率显著下降。


我们的端到端调试工具组合

生命周期阶段 常用工具
启动 克魔性能面板 + Instruments
交互 克魔帧率监测 + Charles + Reveal
后台切换 克魔使用记录 + 系统日志
文件管理 克魔文件模块 + SQLite工具
崩溃处理 克魔崩溃日志导出 + symbolicatecrash + Bugly

结语:把调试嵌入每个生命周期,才有真正可控的体验

调试不该只是出Bug后的亡羊补牢,而是要像产品设计一样,从用户全程体验角度思考,把性能、日志、资源管理融入到App生命周期的每个环节。

这套“端到端调试闭环”,让我们从启动到退出都能掌握真实数据,保证App性能与稳定性。而克魔在整个流程中承担的角色是提供多场景、跨平台的数据采集和离线分析能力,让每个阶段的问题都能在不同环境下被回收和定位。'''

收起阅读 »

文档真是够够的,研究都要找瞎也没看到哪儿有UTS插件导出接口名称的定义全是类型定义

uts插件 文档

interface.uts 作为整个插件的入口声明 文档找了个遍也没看到怎么定义每个函数的名称 通篇都是类型 ,类型导出也是犯愁

插件申明文件中 export type和export type 对外都不可见,尝试用 export class (本不应该用class,这里没有具体实现)
结果 编译运行开始报错平台实现没找到导出的类型
然后在接口声明一个 接口 去平台目录实现 好家伙接口中要返回的类型必须 改成接口里面声明的接口 外面又看不到接口中导出的 interface
只能用typ 导出 t ype导出了 实现的时候需要一个class 去实现返回封装 好家伙类型又报错

interface.uts

export/open/public/   interface  IResult {  
        x:number  
        y:number;  
       close():void   
}  

  export interface IPlugins {      

    a():void   
    b():Promise<IResult>  

  }   

web/index.uts

class IResultWebImpl  implements IResult  {  
     //     
}  

PluginsWebImpl implements IPlugins  {  

  //...   
}

// page/index.uts;

import * as P from  '@/uni_modules/xx'  

P.b().then(r:P.IResult ) {  
        // .....  
}  

外部使用的始终是 接口定义的不关心实现 这种模式很难实现吗?

简化一下

interface.uts

export/open/public/   interface  IResult {  
        x:number  
        y:number;  
       close():void   
}  

//  export interface IPlugins {     省略掉  

 export  function a ():void   
  export  function b ():Promise<IResult>  

//  }   

或者使用 internal open public protected declare 等等标记 一下 应该不是多难得事情
面向接口而非实现 不是首要遵守的吗 为什么那么折腾

继续阅读 »

interface.uts 作为整个插件的入口声明 文档找了个遍也没看到怎么定义每个函数的名称 通篇都是类型 ,类型导出也是犯愁

插件申明文件中 export type和export type 对外都不可见,尝试用 export class (本不应该用class,这里没有具体实现)
结果 编译运行开始报错平台实现没找到导出的类型
然后在接口声明一个 接口 去平台目录实现 好家伙接口中要返回的类型必须 改成接口里面声明的接口 外面又看不到接口中导出的 interface
只能用typ 导出 t ype导出了 实现的时候需要一个class 去实现返回封装 好家伙类型又报错

interface.uts

export/open/public/   interface  IResult {  
        x:number  
        y:number;  
       close():void   
}  

  export interface IPlugins {      

    a():void   
    b():Promise<IResult>  

  }   

web/index.uts

class IResultWebImpl  implements IResult  {  
     //     
}  

PluginsWebImpl implements IPlugins  {  

  //...   
}

// page/index.uts;

import * as P from  '@/uni_modules/xx'  

P.b().then(r:P.IResult ) {  
        // .....  
}  

外部使用的始终是 接口定义的不关心实现 这种模式很难实现吗?

简化一下

interface.uts

export/open/public/   interface  IResult {  
        x:number  
        y:number;  
       close():void   
}  

//  export interface IPlugins {     省略掉  

 export  function a ():void   
  export  function b ():Promise<IResult>  

//  }   

或者使用 internal open public protected declare 等等标记 一下 应该不是多难得事情
面向接口而非实现 不是首要遵守的吗 为什么那么折腾

收起阅读 »

App原生语言插件不应该被取消,希望继续维护更新

uniapp原生插件 uts插件

uni开发很好用,很少用到uts或者原生插件。能用到的地方就是uni满足不了功能调用硬件的需求。而硬件开发都是厂家提供sdk包的,sdk包都是原生语言。所以没必要使用uts插件,直接原生语言插件内整合sdk就可以了,挺好用的方案为啥不支持了呢,看看使用插件的都是哪些需求,我遇到的都是提供sdk二次开发的需求,没可能转uts开发

继续阅读 »

uni开发很好用,很少用到uts或者原生插件。能用到的地方就是uni满足不了功能调用硬件的需求。而硬件开发都是厂家提供sdk包的,sdk包都是原生语言。所以没必要使用uts插件,直接原生语言插件内整合sdk就可以了,挺好用的方案为啥不支持了呢,看看使用插件的都是哪些需求,我遇到的都是提供sdk二次开发的需求,没可能转uts开发

收起阅读 »

iOS App 上架常见问题解决方案:六大难点与实战工具分工详解

iOS

'''作为一名主要负责移动端交付的工程师,iOS 上架过程向来是开发周期中最容易“卡壳”的一环,特别是在跨平台项目、资源有限的团队中更为明显。

在最近一个智能出行类 App 项目中,我们团队采用 Flutter 开发,最终要将成品应用发布至 App Store。在整个过程中,我们遇到了不少实际问题。本文将围绕“上架过程中最棘手的6个典型难点”,结合我们的解决方法和所用工具,进行一次全面复盘。


难点一:没有 Mac 电脑,无法处理证书相关操作

iOS 开发证书(开发、发布)和描述文件的申请、管理通常需要在 macOS 下通过 Xcode 或钥匙串操作,而我们的开发团队大部分成员都是使用 Windows 和 Linux。

解决方式:

  • 使用 Appuploader 工具在 Windows 上直接申请 Apple 证书,导出为 .p12 格式,跳过了 CSR 文件手动生成和钥匙串导出等流程。
  • Apple Developer 官网仍然用于确认证书状态、检查关联 App ID 和服务(如推送、定位)配置。

这样,即便团队成员没有接触过 Mac 设备,也能高效完成证书的初始化。


难点二:跨平台开发,但打包构建必须依赖 macOS

即使我们用了 Flutter 这种跨平台框架,iOS 的构建流程仍然依赖 Xcode 和 macOS 环境。App 的 IPA 文件必须在 macOS 下归档生成。

解决方式:

  • 使用团队仅有的一台旧 Mac mini 搭建远程构建环境,配置 Git 仓库与 SSH 访问。

  • 项目成员将代码提交后,由专人登录远程机器执行:

    flutter build ios --release  

    然后用 Xcode 打开项目归档导出 IPA。

为了节省人力成本,我们写了一些构建脚本配合使用 xcodebuild 命令,使打包任务更自动化。


难点三:如何上传 IPA 文件到 App Store?

Apple 官方推荐的上传方式为 Xcode 或 Transporter 工具,这两个工具都限定在 macOS 平台。对于我们这种主要在 Windows 上工作的成员而言,这一环节十分不便。

解决方式:

  • 采用 Appuploader 在 Windows 系统上传 IPA 文件,支持图形界面操作,过程较为直观。
  • 在关键版本或紧急情况下,也有通过 Transporter(Mac mini 上) 上传以备不时之需。

整体来看,日常构建和提交完全可在非 Mac 平台完成。


难点四:App Store Connect 上的元信息太多,填写效率低

App Store Connect 要求填写丰富的元数据,包括名称、关键词、描述、截图、支持语言、内购项、隐私声明等,如果一个版本支持多个地区与语言,手动操作极其耗时。

解决方式:

  • 非技术成员(项目经理)提前在模板中维护所有文本内容及截图分类(不同设备尺寸),我们采用约定命名规则。
  • 使用 Appuploader 的批量导入功能 将模板内容一次性同步至 App Store Connect,避免手动粘贴错误。
  • 部分版本仍采用 Web 端逐项核对,确保特殊语言版本展示正常。

我们还制定了版本配置 checklist,规范每次提交的必备项和负责人。


难点五:测试部署效率低,版本分发耗时

在开发后期,我们需要频繁部署内部版本进行安装验证,测试成员多为非技术岗,对安装方式不熟悉。TestFlight 的审核等待时间又成为了瓶颈。

解决方式:

  • 使用 Appuploader 的安装测试功能,在本地通过扫码或 USB 方式部署已签名的 IPA。
  • 初期测试版本用蒲公英发放,便于远程测试人员使用。
  • 正式预上线前统一通过 TestFlight 进行完整验证,确保符合 Apple 审核标准。

这种方式让开发测试之间的迭代周期显著缩短,沟通效率也提升。


难点六:版本协作混乱,重复上传和命名不规范

在我们刚开始使用 App Store Connect 时,存在重复上传、版本号不一致、截图命名混乱等问题。

解决方式:

  • 制定了规范的文件命名规则,如 screenshot-iphone8-en.pngscreenshot-iphone12-cn.png 等。
  • 所有上传文件集中管理于公司 Git 私有仓库,禁止使用本地个人目录作为版本管理依据。
  • 上传、审核、描述填充流程中明确责任人,确保所有操作有迹可循。

工具本身不是万能的,规范流程才是根本解决方案。


结语:每个问题都有合适的工具应对,但不应迷信“全能”解决方案

回顾整个流程,我们用到的工具包括:

  • Appuploader:证书创建、描述信息上传、IPA 提交、测试安装(简化流程,支持全平台)
  • Apple Developer 网站:配置服务、下载证书、管理 App ID
  • Xcode:构建打包(必须使用)
  • Transporter:Mac 上传 IPA 的备选方案
  • App Store Connect:官方提交页面,最终操作平台

每种工具都有其边界,真正让流程高效的,不是依赖某一个工具包打天下,而是因地制宜地将它们组合使用,加上合理的协作规则与流程设计。

对于像我们这样资源受限、设备不统一、团队多样的开发场景,组合工具流、角色职责清晰、自动化程度可控,就是实现高效 iOS 上架流程的关键。'''

继续阅读 »

'''作为一名主要负责移动端交付的工程师,iOS 上架过程向来是开发周期中最容易“卡壳”的一环,特别是在跨平台项目、资源有限的团队中更为明显。

在最近一个智能出行类 App 项目中,我们团队采用 Flutter 开发,最终要将成品应用发布至 App Store。在整个过程中,我们遇到了不少实际问题。本文将围绕“上架过程中最棘手的6个典型难点”,结合我们的解决方法和所用工具,进行一次全面复盘。


难点一:没有 Mac 电脑,无法处理证书相关操作

iOS 开发证书(开发、发布)和描述文件的申请、管理通常需要在 macOS 下通过 Xcode 或钥匙串操作,而我们的开发团队大部分成员都是使用 Windows 和 Linux。

解决方式:

  • 使用 Appuploader 工具在 Windows 上直接申请 Apple 证书,导出为 .p12 格式,跳过了 CSR 文件手动生成和钥匙串导出等流程。
  • Apple Developer 官网仍然用于确认证书状态、检查关联 App ID 和服务(如推送、定位)配置。

这样,即便团队成员没有接触过 Mac 设备,也能高效完成证书的初始化。


难点二:跨平台开发,但打包构建必须依赖 macOS

即使我们用了 Flutter 这种跨平台框架,iOS 的构建流程仍然依赖 Xcode 和 macOS 环境。App 的 IPA 文件必须在 macOS 下归档生成。

解决方式:

  • 使用团队仅有的一台旧 Mac mini 搭建远程构建环境,配置 Git 仓库与 SSH 访问。

  • 项目成员将代码提交后,由专人登录远程机器执行:

    flutter build ios --release  

    然后用 Xcode 打开项目归档导出 IPA。

为了节省人力成本,我们写了一些构建脚本配合使用 xcodebuild 命令,使打包任务更自动化。


难点三:如何上传 IPA 文件到 App Store?

Apple 官方推荐的上传方式为 Xcode 或 Transporter 工具,这两个工具都限定在 macOS 平台。对于我们这种主要在 Windows 上工作的成员而言,这一环节十分不便。

解决方式:

  • 采用 Appuploader 在 Windows 系统上传 IPA 文件,支持图形界面操作,过程较为直观。
  • 在关键版本或紧急情况下,也有通过 Transporter(Mac mini 上) 上传以备不时之需。

整体来看,日常构建和提交完全可在非 Mac 平台完成。


难点四:App Store Connect 上的元信息太多,填写效率低

App Store Connect 要求填写丰富的元数据,包括名称、关键词、描述、截图、支持语言、内购项、隐私声明等,如果一个版本支持多个地区与语言,手动操作极其耗时。

解决方式:

  • 非技术成员(项目经理)提前在模板中维护所有文本内容及截图分类(不同设备尺寸),我们采用约定命名规则。
  • 使用 Appuploader 的批量导入功能 将模板内容一次性同步至 App Store Connect,避免手动粘贴错误。
  • 部分版本仍采用 Web 端逐项核对,确保特殊语言版本展示正常。

我们还制定了版本配置 checklist,规范每次提交的必备项和负责人。


难点五:测试部署效率低,版本分发耗时

在开发后期,我们需要频繁部署内部版本进行安装验证,测试成员多为非技术岗,对安装方式不熟悉。TestFlight 的审核等待时间又成为了瓶颈。

解决方式:

  • 使用 Appuploader 的安装测试功能,在本地通过扫码或 USB 方式部署已签名的 IPA。
  • 初期测试版本用蒲公英发放,便于远程测试人员使用。
  • 正式预上线前统一通过 TestFlight 进行完整验证,确保符合 Apple 审核标准。

这种方式让开发测试之间的迭代周期显著缩短,沟通效率也提升。


难点六:版本协作混乱,重复上传和命名不规范

在我们刚开始使用 App Store Connect 时,存在重复上传、版本号不一致、截图命名混乱等问题。

解决方式:

  • 制定了规范的文件命名规则,如 screenshot-iphone8-en.pngscreenshot-iphone12-cn.png 等。
  • 所有上传文件集中管理于公司 Git 私有仓库,禁止使用本地个人目录作为版本管理依据。
  • 上传、审核、描述填充流程中明确责任人,确保所有操作有迹可循。

工具本身不是万能的,规范流程才是根本解决方案。


结语:每个问题都有合适的工具应对,但不应迷信“全能”解决方案

回顾整个流程,我们用到的工具包括:

  • Appuploader:证书创建、描述信息上传、IPA 提交、测试安装(简化流程,支持全平台)
  • Apple Developer 网站:配置服务、下载证书、管理 App ID
  • Xcode:构建打包(必须使用)
  • Transporter:Mac 上传 IPA 的备选方案
  • App Store Connect:官方提交页面,最终操作平台

每种工具都有其边界,真正让流程高效的,不是依赖某一个工具包打天下,而是因地制宜地将它们组合使用,加上合理的协作规则与流程设计。

对于像我们这样资源受限、设备不统一、团队多样的开发场景,组合工具流、角色职责清晰、自动化程度可控,就是实现高效 iOS 上架流程的关键。'''

收起阅读 »

djb

WebView 嵌套页面调试指南:解决上下文丢失与状态失效问题

iOS

'''在移动 Web 开发中,嵌套 iframe、多 Tab 页、多页面状态共享已是常见模式。尤其是在 App 中用 WebView 加载这些页面时,调试常常遇到一个隐形难题:状态丢失、数据不一致或逻辑错乱

比如点击跳转后上一页状态失效,iframe 内页面切换时 context 混乱,或者多页签之间数据传递失败。此类问题在浏览器中难以复现,在 WebView 环境下尤为常见。

这篇文章记录一次我们团队在调试“多页面嵌套 + 用户状态同步”时遇到的问题,通过逐层回溯、工具协同、逻辑解耦逐步找出并修复 bug 的过程。


背景:一个任务流程中的多页面嵌套

某次活动页面涉及三层页面嵌套结构:

  1. 主任务页(WebView 加载)
  2. 任务详情 iframe(包含积分发放逻辑)
  3. 规则说明页(从 iframe 内弹出新的 Tab 页)

功能链路包括用户登录态同步、积分动态更新、任务完成状态反馈。用户反馈:

  • 点击任务后积分不更新
  • 页面刷新后任务状态丢失
  • 部分跳转返回后出现白页

调试发现逻辑链中断,但没有明确报错。页面之间逻辑交叉复杂,不便单点复现。


第一步:还原页面结构与数据流路径

我们通过 WebDebugX 连接测试设备,在页面加载初期用 console 注入打印每一层页面的加载与数据状态:

console.log("currentPage", location.href);  
console.log("localStorage.user", localStorage.getItem("user"));

通过这种方式,我们绘制出数据流动路径:

[主任务页]  
    ↳ iframe: 任务详情页(重写 localStorage.user)  
        ↳ 新窗口:规则说明页(无法读取 iframe 中 user)

我们意识到不同页面之间存在存储隔离通信中断的问题。


第二步:分析状态存储机制

本项目采用了 localStorage 存储用户登录信息和任务状态,但在 WebView + iframe + 新 Tab 页面下出现多个问题:

  1. iframe 页面不能直接访问主页面 localStorage
  2. 新开页签页面属于另一个上下文环境,读取不到前页信息
  3. 任务状态回写未设置回调,页面刷新后状态丢失

我们通过 WebDebugX 的存储查看功能,分别在各页面节点下验证 localStorage.user 值:

  • 主页面:有 user
  • iframe 页面:加载时覆盖 user,值不一致
  • 规则页:获取不到任何 user 信息(新 context)

说明状态传递不可靠,且没有备份或同步机制。


第三步:建立可控状态同步机制

为解决这些问题,我们采取以下优化策略:

1. 统一状态中台模块

将用户状态逻辑封装为一个 JS SDK,在主页面中加载并注入 iframe 使用。通过 postMessage 通信进行状态获取与更新。

// 主页面监听  
window.addEventListener("message", (e) => {  
  if (e.data === "getUser") {  
    iframe.contentWindow.postMessage({ user: localStorage.user }, "*");  
  }  
});

2. URL 携带状态信息

对于新打开的页面(如规则页),通过 URL 参数传递当前用户信息和任务状态,确保即使在新的上下文中也能还原信息。

3. 任务状态上报 + 回写机制

在 iframe 完成任务后,不再直接改写 localStorage,而是调用主页面方法进行同步:

window.parent.postMessage({ taskDone: true }, "*");

主页面收到消息后更新页面状态,并做埋点记录。


第四步:验证多端状态一致性

修改完成后,我们使用 WebDebugX 对所有页面进行如下验证:

  • 打开主页面后,iframe 是否正常获取用户信息;
  • 点击任务完成后,主页面是否收到回传并更新状态;
  • 新 Tab 页面是否能读取 URL 中状态并展示正确数据;
  • 刷新页面后是否保持数据一致性。

我们同时结合 Charles 验证任务完成的接口调用是否精准,避免后端状态与前端状态不同步。


工具协作与角色职责

在整个调试过程中,我们团队配合如下:

工具 用途 使用者
WebDebugX 多页面 DOM 状态验证、localStorage 对比、消息通信验证 前端 / QA
Chrome DevTools iframe 调试、事件监听、window 通信测试 前端
Charles 接口调用验证、请求数据核对 前端 / 后端
Postman 重现任务完成接口、手动回调数据 后端
Vysor 真机多页面操作复现 QA

面对上下文失效问题,优先“绘制状态图谱”

这类“无报错但结果异常”的问题,往往源自页面间状态断裂、通信失败或上下文环境切换。调试的关键不是找“哪里错了”,而是先搞清楚谁该知道什么,谁应该通知谁

调试的过程就是“构建状态模型”的过程:

  • 哪些页面有状态?
  • 状态靠什么方式共享?
  • 在用户操作过程中状态是否随跳转被清空?
  • 如果出错,是否有兜底或回退?
    '''
继续阅读 »

'''在移动 Web 开发中,嵌套 iframe、多 Tab 页、多页面状态共享已是常见模式。尤其是在 App 中用 WebView 加载这些页面时,调试常常遇到一个隐形难题:状态丢失、数据不一致或逻辑错乱

比如点击跳转后上一页状态失效,iframe 内页面切换时 context 混乱,或者多页签之间数据传递失败。此类问题在浏览器中难以复现,在 WebView 环境下尤为常见。

这篇文章记录一次我们团队在调试“多页面嵌套 + 用户状态同步”时遇到的问题,通过逐层回溯、工具协同、逻辑解耦逐步找出并修复 bug 的过程。


背景:一个任务流程中的多页面嵌套

某次活动页面涉及三层页面嵌套结构:

  1. 主任务页(WebView 加载)
  2. 任务详情 iframe(包含积分发放逻辑)
  3. 规则说明页(从 iframe 内弹出新的 Tab 页)

功能链路包括用户登录态同步、积分动态更新、任务完成状态反馈。用户反馈:

  • 点击任务后积分不更新
  • 页面刷新后任务状态丢失
  • 部分跳转返回后出现白页

调试发现逻辑链中断,但没有明确报错。页面之间逻辑交叉复杂,不便单点复现。


第一步:还原页面结构与数据流路径

我们通过 WebDebugX 连接测试设备,在页面加载初期用 console 注入打印每一层页面的加载与数据状态:

console.log("currentPage", location.href);  
console.log("localStorage.user", localStorage.getItem("user"));

通过这种方式,我们绘制出数据流动路径:

[主任务页]  
    ↳ iframe: 任务详情页(重写 localStorage.user)  
        ↳ 新窗口:规则说明页(无法读取 iframe 中 user)

我们意识到不同页面之间存在存储隔离通信中断的问题。


第二步:分析状态存储机制

本项目采用了 localStorage 存储用户登录信息和任务状态,但在 WebView + iframe + 新 Tab 页面下出现多个问题:

  1. iframe 页面不能直接访问主页面 localStorage
  2. 新开页签页面属于另一个上下文环境,读取不到前页信息
  3. 任务状态回写未设置回调,页面刷新后状态丢失

我们通过 WebDebugX 的存储查看功能,分别在各页面节点下验证 localStorage.user 值:

  • 主页面:有 user
  • iframe 页面:加载时覆盖 user,值不一致
  • 规则页:获取不到任何 user 信息(新 context)

说明状态传递不可靠,且没有备份或同步机制。


第三步:建立可控状态同步机制

为解决这些问题,我们采取以下优化策略:

1. 统一状态中台模块

将用户状态逻辑封装为一个 JS SDK,在主页面中加载并注入 iframe 使用。通过 postMessage 通信进行状态获取与更新。

// 主页面监听  
window.addEventListener("message", (e) => {  
  if (e.data === "getUser") {  
    iframe.contentWindow.postMessage({ user: localStorage.user }, "*");  
  }  
});

2. URL 携带状态信息

对于新打开的页面(如规则页),通过 URL 参数传递当前用户信息和任务状态,确保即使在新的上下文中也能还原信息。

3. 任务状态上报 + 回写机制

在 iframe 完成任务后,不再直接改写 localStorage,而是调用主页面方法进行同步:

window.parent.postMessage({ taskDone: true }, "*");

主页面收到消息后更新页面状态,并做埋点记录。


第四步:验证多端状态一致性

修改完成后,我们使用 WebDebugX 对所有页面进行如下验证:

  • 打开主页面后,iframe 是否正常获取用户信息;
  • 点击任务完成后,主页面是否收到回传并更新状态;
  • 新 Tab 页面是否能读取 URL 中状态并展示正确数据;
  • 刷新页面后是否保持数据一致性。

我们同时结合 Charles 验证任务完成的接口调用是否精准,避免后端状态与前端状态不同步。


工具协作与角色职责

在整个调试过程中,我们团队配合如下:

工具 用途 使用者
WebDebugX 多页面 DOM 状态验证、localStorage 对比、消息通信验证 前端 / QA
Chrome DevTools iframe 调试、事件监听、window 通信测试 前端
Charles 接口调用验证、请求数据核对 前端 / 后端
Postman 重现任务完成接口、手动回调数据 后端
Vysor 真机多页面操作复现 QA

面对上下文失效问题,优先“绘制状态图谱”

这类“无报错但结果异常”的问题,往往源自页面间状态断裂、通信失败或上下文环境切换。调试的关键不是找“哪里错了”,而是先搞清楚谁该知道什么,谁应该通知谁

调试的过程就是“构建状态模型”的过程:

  • 哪些页面有状态?
  • 状态靠什么方式共享?
  • 在用户操作过程中状态是否随跳转被清空?
  • 如果出错,是否有兜底或回退?
    '''
收起阅读 »

hshs

jsdthdshshg

jsdthdshshg

mui.tff字体版权问题

版权 字体

mui.tff字体版权是免费商用的吗?谢谢

mui.tff字体版权是免费商用的吗?谢谢

view垂直滚动时与上面的元素重叠

<--这是第一个元素-->  
<view class="tab-wrap">  
    <view class="group-list">  
        <view v-for="item in groupList" :key="item.id" class="group-div"  
        :class="{ selected: item.id === selectedId }" @click="selectGroup(item.id)">  
            <view :class="{ 'text-selected': item.id === selectedId }">{{ item.name }}</view>  
        </view>  
        </view>  
</view>  

<--这是第二个元素-->  
<view class="device-wrap">  
    <view class="content-wrap">  
        <view class="item-wrap" v-for="(device, index) in deviceList" :key="index">   
                        .....  
                 </view>  
        </view>  
</view  

当第二个元素中的子元素太多,就需要进行垂直滚动,此时滚动第二个元素的高度就会溢出,第一个元素没有背景色的情况下,就会与第一个元素重叠,可以给第一个元素加一个背景色

.group-list {  
     background-color: #fff;  
}

这样第二个元素的元素在垂直向上滚动的时候就不会与第一个元素重叠了

继续阅读 »
<--这是第一个元素-->  
<view class="tab-wrap">  
    <view class="group-list">  
        <view v-for="item in groupList" :key="item.id" class="group-div"  
        :class="{ selected: item.id === selectedId }" @click="selectGroup(item.id)">  
            <view :class="{ 'text-selected': item.id === selectedId }">{{ item.name }}</view>  
        </view>  
        </view>  
</view>  

<--这是第二个元素-->  
<view class="device-wrap">  
    <view class="content-wrap">  
        <view class="item-wrap" v-for="(device, index) in deviceList" :key="index">   
                        .....  
                 </view>  
        </view>  
</view  

当第二个元素中的子元素太多,就需要进行垂直滚动,此时滚动第二个元素的高度就会溢出,第一个元素没有背景色的情况下,就会与第一个元素重叠,可以给第一个元素加一个背景色

.group-list {  
     background-color: #fff;  
}

这样第二个元素的元素在垂直向上滚动的时候就不会与第一个元素重叠了

收起阅读 »