自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

...

  • 博客(250)
  • 资源 (59)
  • 收藏
  • 关注

原创 前端工程化-基于Taro的Web端Monorepo架构改造

基于Taro框架下,如何将当前Monorepo架构的代码编译到Web端呢?

2022-06-29 14:26:46 166

原创 Sparse Checkout 在 Monorepo 工程下的应用

我们现在有越来越多的项目都是前后端分离的架构,所以在一个 Git Repo 里面同时放前后端代码是很常见的情况。不过,问题来了,如果前后端分离的很干净,若是前端人员不想要看到“后端”的原始代码,那 Git 有办法做到“部分取出”的功能吗?是的,还真的有!这篇文章我就来说说这个好用的功能。Sparse checkoutsSparse checkouts 是一个从 Git 2.25 才开始支持的功能,主要用途就是帮助你取得一个 Repo 的部分内容,大幅减少本机硬盘空间的占用,也可以帮助你更加专注在..

2022-05-26 10:26:11 85

原创 React Hooks 状态管理方案探索

来吧,手写一个 react hooks 状态管理库

2022-02-18 18:23:56 211

原创 前端工程化- ReactNative整合Taro工程可行性实践方案

背景随着基因宝多业务场景化的需求,前端需要同时面临App、Web、小程序多端同步开发相同业务功能的问题。App整体架构为ReactNative,小程序及Web端使用Taro来实现。当前模式下,需要分别对Web、小程序、App进行开发,并且为了“复用”代码,小程序端与App端需要分别等待做代码转换,工作及人员重叠,时间线延长,效率极低。为了解决以上问题,提升开发效率,降低错误成本,提出在App端实现对Taro代码的编译,转换、运行,实现无缝衔接。方案Taro官方在3版本上针对RN做了.

2021-10-18 15:21:49 1132 1

原创 前端工程化-Genebox小程序端Monorepo架构改造

工具yarnworkspace+lernayarnworkspace管理依赖,lerna负责更新发布功能模块授权用户相关,登录....唾液盒绑定唾液盒切换唾液盒检测进度地址编辑下单回寄协议网页WebView相关配置路由拆包package.jsoncommitlinthuskytsconfig根据目前的项目状况,设计如下:package入口统一为index.jspackage源码入口统...

2021-09-03 10:48:34 127

原创 前端工程化-在React中对DDD领域驱动架构设计的实践

React DDD 领域驱动架构设计

2021-07-15 15:49:53 391 2

原创 客户端ReactNative一键登录实现方案

背景当前App登录模式有三种: 手机号/验证码登录 人脸/指纹识别登录 第三方/其他方式登录 为提升App使用体验,助力新用户注册和老用户留存,提供更为便捷&安全的登录方式简介本机号码一键登录是基于运营商独有网关认证能力推出的账号认证产品。用户只需一键授权,即可实现以本机号码注册/登录,具有时延低、操作简单、号码验证免短验的特点,体验更优。本机号码一键登录的主要特点是以手机号码作为账号,无需验证,免密码即可登录,并且登录授权页面呈半自定义,以京东、小

2021-07-15 14:16:43 790

原创 前端工程化-客户端代码质量检测平台

工具SonarQube+SonarScanner+Jenkins+SonarLint环境配置 使用目前最新版本9.0.0(注意看官网对应的版本先决条件) JDK需要使用11版本及以上 如果需要mySQL请下载7.8版本,7.8版本以上的不再支持mySQL数据库 SonarQube版本7.7以上不再支持项目中的sonar.analysis.mode=preview(高版本没有使用数据库默认是预览模式) 日志,有报...

2021-07-15 14:15:23 122

原创 前端工程化-基于Monorepo模式下的重构

前端工程化-基于 monorepo 模式下的 lerna 实践

2021-05-17 10:32:55 174

原创 前端代码工程化-演进与实践

Genebox代码工程化演进

2021-04-24 15:04:06 120

原创 前端工程化-小程序持续交付平台化解决方案

背景流程长且无明确规范,导致整个过程较为艰辛。下图展示了一次发版工作最基本的工作内容,其中还省略了各种通知、确认环节。可以看到,前端研发在其中承担了较多的重复工作。问题 1. 多个/多端小程序同时发版上传操作需要打开各自平台不同的开发者工具(多端情况下),后续送审、发布环节则需要在各小程序管理后台进行手工操作(重复繁琐)。开发周期紧张,发版频率高没有固定的发版周期,单个小程序每周可能会发布n次,对于前端同学来说,这可能意味着需要更频繁的在正常工作及发版任务中进行切换,...

2021-04-10 11:26:21 197

原创 前端工程化-AOP在Genebox小程序网络请求上的应用

genebox-mini-request 是基于JS Decorator 和 Taro 实现的网络请求,专注于实现对网络请求的使用优化。背景当前小程序端网络请求模块使用 request utils 统一处理,通过配置请求模块,动态生成 request task,并通过该实例发起请求。额外的 options 配置参数需要单独传入高阶函数,目前仅支持header,超时时长配置。存在的问题: 请求参数配置存在一定局限性,不易扩展 请求模版的创建增加重复性代码 请求模版配置与具体使用分离,

2020-11-04 21:01:38 232

原创 前端工程化-Git SubModule在实际开发中的应用

Git子仓库在实际开发中的应用

2020-10-09 15:33:34 487

原创 React Native Merge Flutter 混合开发实践

React Native Merge Flutter 混合开发实践

2020-07-14 14:39:48 588

原创 React Native 暗黑模式适配实践

React Native 暗黑模式实践方案

2020-05-20 15:34:14 3548 1

原创 React Native 三端同构实践

React Native三端同构实践

2020-04-19 15:57:54 2655

原创 React Native 函数式组件优化实践

React 性能优化理念的主要方向简单概括为两个:减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconciliation(简单可以理解为 diff),如果不 render,就不会 reconciliation。 减少计算的量。主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用。关于类组件的渲染优化,...

2020-04-14 14:27:33 2189

原创 React Native 包体积优化实践

React Native 包体积优化实践

2020-04-06 16:54:07 1294

原创 React Native SDR 实践

React Native SDR实践

2020-03-22 17:00:33 560 6

原创 Git代码提交规范

随着团队不断扩大,git 的 commit 信息需要按照一定的格式规范,以便在需要的时候方便使用。提交信息可以方便的定位问题, 代码 review 的时候也知道了该次 commit 干了什么,所以 commit 标准化好处很多,不再多说实现 结合 git hook 实现在 git commit 阶段检查输入是否符合规范,符合通过,反之提示工具commitlint:用于检查提交信息,...

2020-03-04 16:44:38 1047

原创 原生端(iOS和Android)读取ReactNative本地图片

源码已上传Github:https://github.com/songxiaoliang/native-read-rn-image在ReactNative开发过程中,有时需要在原生端显示RN里的图片,这样的好处是可以通过热更新来更新APP里的图片,而不需要发布原生版本,而ReactNative里图片路径是相对路径,类似'./xxximage.png'的写法,原生端是无法解析这类路径,那么如果将...

2019-05-24 19:49:15 2709

原创 Detox实现ReactNative E2E自动化测试

Detox 是什么?在创建新功能或修复错误后,我们通常会在我们的设备上安装该应用并手动测试。但是,当我们想要在标记版本之前验证所有新旧功能时,此过程可能会很麻烦。解放双手,是我们梦寐以求的。Detox,一个用于测试 React Native 应用程序 Selenium 界面的端到端自动化测试工具。Detox 是为移动端APP打造的灰盒端到端自动化测试框架。在 ReactNat...

2019-05-16 21:41:55 1914 2

原创 React Native字体适配解决方案

源码已上传 Github:react-native-app-font“怎么又是字体,老常的话题现在还拿出来说。关于字体适配的解决方式网上一搜几十篇!”。看到标题的烙铁心里一万个xxx疾驰飞腾。But! 我总是会给大家带点什么惊喜。关于 pxToDp、启动缩放 我们一点不说。本篇博客的主题很简单:如何控制App字体不随系统字体改变?系统字体改变一般有两种情况:(1)调整系统字...

2019-05-12 22:40:51 3445

原创 React Native图片资源使用方案

图片资源( jpeg、png、svg、webp ... )作为与用户交互的界面元素,在客户端产品中起到了非常重要的角色作用。在应用开发中,移动端与PC的图片使用策略也有所不同。PC端较大的内存容量,快速的渲染能力使各类型图片资源都能得到较好的使用。而移动端由于设备内存,GPU渲染都与PC有较大差别,所以在App应用开发中,需要我们单独分析处理。今天我们聊聊在React Native开发中,如...

2019-04-02 16:38:04 1184

原创 在 React Native 中使用 Hooks

React官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks。什么是Hooks,我们来了解一下。什么是Hooks?在平时开发过程中,我们一般都会遇到如下问题:1. 难以重用和共享组件中的与状态相关的逻辑2. 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 state 时,每个生命周期函数中可能会包含...

2019-03-13 16:15:03 7451 3

原创 Android 集成 Flutter 及通信交互详解

欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。前不久开源了用Flutter开发的一个音视频类App客户端,欢迎大家star, fork。⚠️ 项目地址:https://github.com/songxiaoliang/visitor-flutter⚠️ 本篇博客涉及的源码全部开源在Github,地址:https://github.com/songxiao...

2019-01-28 16:18:03 4556 1

原创 基于 Flutter 视频客户端 Vistor【已开源】

项目已开源到 Github:Vistor,欢迎大家 fork,star。模块开发环境:Vs Code (1.30.2) Android Studio 3.+开发框架 ( Flutter sdk: ">=2.0.0-dev.68.0 <3.0.0" ):状态管理:Scoped_model 网络层:Dio 导航库:Fluro主模块分为首页...

2019-01-24 10:16:10 12659 18

原创 Flutter以两种方式实现App主题切换

欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。概述App主题切换已经成为了一种流行的用户体验,丰富了应用整体UI视觉效果。例如,白天夜间模式切换。实现该功能的思想其实不难,就是将涉及主题的资源文件进行全局替换更新。说到这里,我想你肯定能联想到一种设计模式:观察者模式。多种观察对象(主题资源)来观察当前主题更新的行为(被观察对象),进行主题的更新。今天和大家分...

2018-12-26 11:29:27 10040 4

原创 Flutter优化之将小部件拆分为方法将影响渲染性能

欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。在React Native跨平台开发框中,我们经常会看到,当界面组件层次嵌套深,组件交互涉及业务逻辑时,为了代码层次简洁、清晰,都会将组件拆分到方法中,然后在主布局中引入,例如:render() { return ( &lt;View style={{ flex: 1, backgroundCo...

2018-12-22 15:56:07 1753 4

原创 CodePush优化之减小更新包体积

欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。述还有 10 天就要迎来 2019 新年,感慨 18 年过的好快,恍恍惚惚。2018 年经历了很多,人生最重要的事情,很开心。闲余时间浏览了这一年写过的博客,9 篇相对 17 年少了很多。时间不等人,什么事还是要提前计划往前做。本来是要等新年再和大家分享新的内容,回头看看还是以整数结尾这一年,也算欣慰。这篇博...

2018-12-19 16:21:01 1212 6

原创 RN JSBundle 拆分解决方案(3): 固定ModuleId,JSBundle按需加载

实践源码:react-native-split-bundle:https://github.com/songxiaoliang/react-native-split-bundle前面两篇文章分别从源码加载、Bundle文件结构、Metro打包工具等做了简单分析,逐步了解关于RN打包,Bundle 文件加载的相关内容。本篇内容将结合代码来完成最终的实现方案。在阅读该篇博客内容前,可以点击如...

2018-11-30 12:56:28 3147 5

原创 RN JSBundle 拆分解决方案(2): JSBundle 、Metro 结构分析

 在第一篇(RN JSBundle 拆分解决方案(1): 应用启动、视图加载原理解析)中我们对RN的启动、视图加载流程从源码角度做了简单的梳理。本篇内容我们继续对JSBundle 文件内容结构,以及当前RN框架默认的打包工具 Metro 进行分析。JSBundle 文件结构当我们执行 react-native bundle | unbundle 命令时,RN框架会按照当前给定的参数,打...

2018-11-27 18:35:56 4175

原创 React Native BackHandler exitApp 源码分析

欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。概述昨天技术交流群里有个朋友提出一个问题,在 Android 中嵌入了 React Naitve,并且想从RN层执行代码,回到上一个原生Activity。说起来比较模糊,假设他的界面执行流程如下:ActivityA→ActivityB →RNActivityA→ JS端执行代码→...

2018-11-22 17:29:28 1788

原创 React Native 手势触摸事件机制详解(进阶篇)

 源码已开源到Github,详细代码可以查看:《React Native 触摸事件代码实践》。在基础篇,对RN中的触摸事件做了详细的介绍。相信大家对于触摸事件流程机制有了更为清晰的认识。没有浏览的可以先看看基础篇:《 React Native 手势触摸事件机制详解(基础篇)》本篇博客中,同样延续基础篇中结尾的内容,对触摸事件的执行流程从代码层执行流程进行更深的说明,并使用RN系统提供的...

2018-10-20 14:41:11 3781 1

原创 React Native 手势触摸事件机制详解(基础篇)

欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。 源码已开源到Github,详细代码可以查看:《React Native 触摸事件代码实践》。 博客产出拖延了很久,老早定的主题现在才开始写。之前群里朋友对于React Native(以下简称RN)中手势触摸相关问题提出的频率很高,并且在实际开发过程中较难理解和处理。本篇内容将围绕...

2018-09-26 16:07:47 5666

原创 React Native v0.56.0 最新版本更新日志

欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。React Native v0.56.0 已发布,这也是属于 6 月的更新发布!FB开发团队表示,自3月以来,超过 60 位贡献者贡献了 816 个 commit。另外,由于这个新版本有一些重要的破坏性变化需要大量的额外工作才能使其达到稳定的状态,这也是月度发布周期中跳过4月和5月的主要原因。同时官方表示,...

2018-07-05 15:07:14 2426

原创 React Native封装Android原生UI组件最详教程

欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。篇幅预计阅读时间10分钟,结尾有福利~~ 前些天群里有朋友说想了解如何在React Native项目中使用封装原生View组件,之前有写过一篇Android原生层与React Native 交互的文章,感兴趣的朋友可以看一下。今天要分享的如何封装原生View组件在React Native项目中...

2018-04-17 18:16:58 8099 3

原创 React Native未来导航库:react-navigation 使用详解(进阶篇)

欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。本篇内容为react-navigation的进阶内容以及高级用法。基础篇请看:React Native未来导航者:react-navigation 使用详解(基础篇)(1)适配顶部导航栏标题: 测试中发现,在iphone上标题栏的标题为居中状态,而在Android上则是居左对齐。所以需要我们修改源码,...

2018-03-06 17:44:25 4287 4

原创 RN JSBundle 拆分解决方案(1): 应用启动、视图加载原理解析

前两篇文章和大家分享了RN中的触摸事件机制。链接如下:React Native 手势触摸事件机制详解(基础篇)React Native 手势触摸事件机制详解(进阶篇)接下来的系列内容将结合 Android 原生层来分析拆包解决方案。如果你具有Android原生开发经验,并且在实践 Android + RN 的混合模式开发,那么这次连载的文章内容你一定喜欢。拆包解决方案的系列内容目录大致...

2018-02-22 14:57:46 3430 4

原创 React Native集成Sentry错误日志统计

欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。App版本升级想必大家都不陌生。原生开发中App升级方式有很多种,Android和iOS也不尽相同。大致区别如下:App错误收集的实现方式有很多,例如友盟、Bugly、阿里云、Sentry等等。本篇博客和大家分享一下在React Native中集成Sentry的流程和注意事项。在React Native...

2017-12-04 21:25:16 6332

ShareSDK分享功能封装

Android中基于ShareSDK分享功能的封装工具类,让你App不到一分钟搞定分享功能。

2016-10-27

Android微信Pay

使用EventBus对微信支付进行了封装,让微信支付更简便~

2016-10-26

Android白天夜间模式切换

一款支持白天夜间切换的工具

2016-10-17

Android集成高德定位

在Android中基于高德实现定位功能,代码很详细。

2016-09-23

附加动画的DialogFragment

Android中基于DialogFragment实现的Dialog提示功能,附加了nice的动画效果。

2016-09-11

ShareSDK分享功能工具类

Android中基于ShareSDK分享功能的封装工具类,让你App不到一分钟搞定分享功能。

2016-09-08

Android RecyclerView批量操作

Android 中基于RecyclerView实现Item内容的批量删除,全选操作。

2016-09-07

EditText自动搜索

基于EditText根据用户输入动态实现自动搜索功能。

2016-09-06

MVP+Dagger

MVP+Dagger,让你的应用高大上!!!!!!

2016-08-24

Android仿当当App首页按钮渐变动画

Android仿当当App首页按钮渐变动画,效果非常绚丽。大家可以下载体验扩展。

2016-08-05

Android 门票布局效果

Android带你实现门票布局效果 ,非常nice!就是这么nice!

2016-07-30

Android实现快速高斯模糊

Android实现快速高斯模糊,对其进行了优化,速度更快,效果更好!!

2016-07-21

高仿天猫App实现商品列表布局切换效果

高仿天猫App商品列表布局切换效果,切换顺畅,采用多布局完美实现,并添加了切换的动画效果!

2016-07-20

仿天猫App实现商品列表布局切换效果

高仿天猫App商品列表布局切换效果,切换顺畅,采用多布局完美实现!

2016-07-20

zxing jar包

zxing jar包,集成项目完美实现二维码扫描功能!

2016-06-15

zxing实现二维码扫描

基于zxing实现的二维码扫描,解决所有bug!完美解决方案

2016-06-15

SlidingUpPanel

一个基于SlidingUpPanel实现的Android托盘滚动效果!

2016-05-31

Loading加载动画

一套精美的Loading加载动画,你值得拥有!

2016-04-21

实现下拉式窗帘动画和上拉式抽屉Android动画

Android动画实战 一 实现下拉式窗帘动画和上拉式抽屉动画,详细解析可以看http://blog.csdn.net/u013718120/article/details/51161989

2016-04-16

高仿Path动画

组合Android动画实现一个高仿Path菜单动画效果,小伙伴们赶紧尝尝鲜吧!

2016-04-14

drag-sorts

react-native平台实现的拖拽组件,简单已用,可以结合多种动画实现!!组件化模块化!!!!!!!

2020-09-08

children在react中的应用.key

关于React Children 使用的一次内部技术分享! 包含了高级Api的使用, 以及组件化的思想.可下载查看全部内容......

2019-12-16

app-releaseStaging.apk

app-releaseStaging.apk

2019-11-11

React Native 瀑布流列表

React Native 瀑布流列表,用于展示瀑布流形式的内容,定制简单。

2018-07-05

React Native 视频播放器

React Native 视频播放器,自定义封装。支持暂停播放,快进,全屏等效果。

2018-01-07

React Native Modal

React Native Modal,支持定位显示等等!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

2017-09-21

React Native 单选,多选控件

React Native 单选,多选控件,完全支持自定义。

2017-08-04

Android水印效果

Android中实现界面布局文字水印,已封装,可复用。

2017-06-29

diff_match_patch

google-diff_match_patch:Java版本补丁包库文件

2017-05-04

RecyclerView动画

实现RecyclerView列表项的展示动画,丰富RecyclerView展示效果。

2017-04-27

Android动态更新图标

Android动态更新图标,几行代码搞定复杂问题!

2016-12-27

Android View动态热更新

Android View动态热更新,带你立刻上手完成动态更新View!

2016-12-20

android进程保活

对App进程的保活处理,延长App的驻留内存时长,并在主进程回收后拉起。

2016-12-16

android与js交互

android与js交互,让你更快速的认识android与js的交互实践。

2016-12-08

Android Studio Html插件

Android Studio Html插件,在As中即可轻松编辑Html,css。

2016-12-07

APK签名工具

该工具用于对生成的Apk进行重新签名,桌面应用程序界面,操作起来非常方便!

2016-11-30

MVP + Retrofit

MVP + Retrofit的架构模型,带你快速学会如何将MVP + Retrofit集成到项目中!

2016-11-15

懒加载基类Fragment

懒加载基类Fragment,让你在ViewPager中轻松实现懒加载Fragment!

2016-11-04

App版本升级更新

App版本升级更新,集成轻松搞定

2016-11-03

App版本更新

Android中App版本升级更新下载的封装工具类,简单实用。几行代码轻松搞定升级安装!

2016-11-03

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除