前言

在微信发布了小程序之后，越来越多的厂商页陆陆续续地发布了各自的小程序。小程序的好处毋庸置疑，我自己总结的是以下几点：

• 开发者不需要通过重新上架就能让app提供新的功能（产品经理的福音）
• 除了基础的用户数据（姓名/性别/地址）共享，其他的数据完全独立（业务逻辑0耦合）

如果能在自己的app中实现一下类似小程序的功能岂不美哉[严肃脸]。。。

所以本文试图从技术层面去介绍怎么样在你的app中去实现小程序的功能。

主要技术栈

react native

是的，我们要用rn。因为觉得weex有点半吊子，flutter还不成熟，issue多多。当然主要原因是rn比较熟-。- 喜欢weex和flutter的同学请不要拍砖，哈哈哈。

android/iOS

既然是小程序，这两个底层的平台都是要去熟悉的

nodejs

编写rn就离不开他

基本思路

众所周知，react native是跨平台的app解决方案，facebook，京东，携程这些大厂都在用。作为普通开发者，可能最开始的工作是从react native的getting started开始的（注意，本文没有使用expo cli的方式）。

按照getting started上的步骤做完，差不多就可以编出一个简单的demo。 纯react native的开发步骤大致是这个样子的：

开发先在debug模式下进行开发，把UI和逻辑都调试的差不多，然后测试通过验收后就可以打包准备上架了。但是其实把react native的项目打包成apk和ipa之前，会先跑这个命令：

react-native bundle

不知道这个命令做什么的同学可以自己打个help看一下。这里限于篇幅对这个命令就不作详细的解释了，但是总的来说这个命令会让你指定一个js文件作为入口，然后把相关js代码打包成一个js的bundle放到android的assets目录下和iOS的项目里。当你的apk/ipa打出来之后，原生的代码就会去分别load这个bundle，然后就是走js的逻辑。

整个流程看起来并没有什么问题，但是当你的项目越来越复杂的时候，你会发现，load整个bundle的时间到第一屏出来的时间（首屏时间）越来越长。facebook官方有一些优化的建议RAM bundles + inline requires 但是当你的项目足够大，并且使用了react navigation的时候，其实很难把首屏的时间降下来。

目前比较好的方式是对项目做分包：基础功能的包（basic bundle）和相关业务的包（business bundle）。其实这也是整个小程序化的核心。基础的功能打成basic bundle内置到apk/ipa里，然后business相关的东西可以内置，也可以放到服务端/cdn，在需要的时候本地载入后使用或者下载后使用。同时，为了加快首屏的速度，最一开始呈现给用户的UI都是使用native代码来编写的。

基本实现

大致会从这么几个方面讲

分包的实现

如何载入本地的分包

这部分会分两块讲，基础的和业务的

(a) 载入基础包

(b) 载入业务包

如何载入远端的分包

Debug的技巧

分包了之后怎样去debug

一个简单开发流程

一点感想

每天码代码码惯了，没想到写点文章这么累，刚开始用掘金，有点不熟悉，后续的实现等github上的工作做的差不多了再公布出来 2019-1-16