preface
After wechat released the small program, more and more manufacturers page after page released their small program. There is no doubt about the benefits of applets, and here are some of my own:
- Developers don’t need to re-launch apps to offer new features (good news for product managers)
- Except for the basic user data (name/gender/address) sharing, the rest of the data is completely independent (business logic 0 coupling)
Wouldn’t it be nice if you could implement something similar to a small program in your own app [serious face]…
So this article tries to introduce from the technical level how to realize the function of small program in your app.
Main Technology Stack
react native
Yeah, we’re going to use Rn. Because WEEx is a little half-assed, and Flutter is immature and has many issues. And of course the main reason is that Rn is relatively familiar. – No bricks for weex and Flutter fans, hahaha.
android/iOS
Since it is a small program, these two underlying platforms are to be familiar with
nodejs
I can’t write Rn without him
The basic idea
As we all know, React Native is a cross-platform app solution used by Facebook, JD.com and Ctrip. As an average developer, you probably started your work with React Native getting started (note that this article didn’t use the EXPO CLI).
Follow the steps in Getting Started and you should almost be ready to write a simple demo. React Native’s development process looks something like this:
The development is first carried out in debug mode, and the UI and logic are almost debugged. Then after the test is accepted, it can be packaged and ready to be put on the shelf. React Native projects can be packaged as apK and IPA with this command:
react-native bundle
Copy the codeIf you don’t know what this command does, please type help to see it. There isn’t enough space to explain this command in detail, but in general this command allows you to specify a JS file as the entry point, and then bundle the relevant JS code into a JS bundle for android assets and iOS projects. When your APK/IPA is typed, the native code loads the bundle separately, and then loads the JS logic.
The whole process seems fine, but as your project gets more complex, you’ll find that the load time for the entire bundle gets longer and longer until the first screen comes out. Facebook has some optimizations for RAM Bundles + Inline requires, but when your project is large enough and you use React Navigation, it can be difficult to reduce the first screen time.
Currently, it is better to subcontract projects: basic bundles and business bundles for related functions. In fact, this is the heart of the whole little program. Basic functions are built into APK/IPA as basic bundles, and business-related things can be built in or put into the server/CDN for local loading and use or download when needed. Meanwhile, in order to accelerate the speed of the first screen, the UI presented to users at the very beginning was written by native code.
Basic implementation
Roughly speaking from such aspects
Realization of subcontracting
How to load local subcontracting
This part is divided into two parts, basic and operational
(a) Load the base package
(b) Load the business package
How to load remote subcontracting
The technique of the Debug
How to debug after subcontracting
A simple development process
A little feeling
Every day code code used to code, did not expect to write some articles so tired, just began to use nuggets, a little unfamiliar, the subsequent implementation of github work done almost published again