Imitate Android WeChat applet to achieve the effect of independent task view of applet

Today I want to share with you a very interesting technology, how to implement functions similar to WeChat applet in our App.

Haha, just kidding. If I could implement a WeChat mini-program system by myself, I would have been poached by Tencent to be an architect long ago.

I believe everyone has used mini programs now, right? Many people even use them every day. Mini programs are very convenient. There is no need to download or install them. You can open them in WeChat and use them immediately. You can use them whenever you want, and they do not take up any storage space on your phone.

WeChat Mini Programs on Android are made to be like real applications. Why? Because each WeChat Mini Program on Android can even have its own task view, just like a real independent application. Click the taskbar button on the phone to see the following interface:

In the picture above, Meituan Takeout, Weibo Hot Search, and Starbucks are all mini programs.

With an independent task view, you can more easily and quickly switch between multiple mini-programs or WeChat itself. In this regard, the Android experience is better than iOS.

So the question is, how can this small program that depends on other programs have an independent task view?

In this article we will find out.

In fact, this is a very basic function. How basic is it? Any Android developer must have learned this knowledge when getting started: Launch Mode.

Therefore, I will not explain Launch Mode in detail here. If you have never heard of Launch Mode, I recommend you to refer to Chapter 3 of First Line of Code, 3rd Edition.

We all know that there are four types of Activity startup modes in Android: standdard, singleTop, singleTask and singleInstance.

From the literal meaning, singleTask means to enable a separate task to store the current Activity. But if you declare an Activity as singleTask, you will find that you can't get the desired effect, and all Activities are still placed in the same task.

This is because singleTask is also associated with a property called taskAffinity. Only when the Activity is declared as singleTask and its taskAffinity value is independent, will the Activity be placed in a separate task.

By default, the taskAffinity attribute value of each Activity is the package name of the current application, that is to say, their values ​​are the same, so we cannot get the desired effect.

The solution is very simple. Just assign a different taskAffinity value to each Activity that wants to enable an independent task view.

Next, let’s start practicing.

First create a project called MiniProgramTest.

Next, create three empty Activities and name them FirstActivity, SecondActivity, and ThirdActivity respectively.

Then edit the activity_main.xml layout file of the project and add three buttons to start FirstActivity, SecondActivity and ThirdActivity respectively:

 < androidx .constraintlayout .widget .ConstraintLayout
 xmlns : android = "http://schemas.android.com/apk/res/android"
 xmlns : app = "http://schemas.android.com/apk/res-auto"
 xmlns : tools = "http://schemas.android.com/tools"
 android : layout_width = "match_parent"
 android : layout_height = "match_parent"
 tools : context = ".MainActivity" >

 < Button
 android : id = "@+id/first_btn"
 android : layout_width = "wrap_content"
 android : layout_height = "wrap_content"
 android : text = "Start the first line of code"
 app : layout_constraintVertical_chainStyle = "packed"
 app : layout_constraintBottom_toTopOf = "@+id/second_btn"
 app : layout_constraintEnd_toEndOf = "parent"
 app : layout_constraintStart_toStartOf = "parent"
 app : layout_constraintTop_toTopOf = "parent" />

 < Button
 android : id = "@+id/second_btn"
 android : layout_width = "wrap_content"
 android : layout_height = "wrap_content"
 android : text = "Start the second line of code"
 app : layout_constraintVertical_chainStyle = "packed"
 app : layout_constraintBottom_toTopOf = "@+id/third_btn"
 app : layout_constraintEnd_toEndOf = "parent"
 app : layout_constraintStart_toStartOf = "parent"
 app : layout_constraintTop_toBottomOf = "@+id/first_btn" />

 < Button
 android : id = "@+id/third_btn"
 android : layout_width = "wrap_content"
 android : layout_height = "wrap_content"
 android : text = "Start the third line of code"
 app : layout_constraintVertical_chainStyle = "packed"
 app : layout_constraintBottom_toBottomOf = "parent"
 app : layout_constraintEnd_toEndOf = "parent"
 app : layout_constraintStart_toStartOf = "parent"
 app : layout_constraintTop_toBottomOf = "@+id/second_btn" />

 </ androidx .constraintlayout .widget .ConstraintLayout >

After the layout file is defined, modify the code of MainActivity and add the startup logic:

 class MainActivity : AppCompatActivity ( ) {
 override fun onCreate ( savedInstanceState : Bundle? ) {
 super .onCreate ( savedInstanceState )
 setContentView ( R .layout .activity_main )

 val firstBtn = findViewById < Button > ( R .id .first_btn )
 val secondBtn = findViewById < Button > ( R .id .second_btn )
 val thirdBtn = findViewById < Button > ( R .id .third_btn )

 firstBtn .setOnClickListener {
 val intent = Intent ( this , FirstActivity :: class .java )
 startActivity ( intent )
 }
 secondBtn .setOnClickListener {
 val intent = Intent ( this , SecondActivity :: class .java )
 startActivity ( intent )
 }
 thirdBtn .setOnClickListener {
 val intent = Intent ( this , ThirdActivity :: class .java )
 startActivity ( intent )
 }
 }
 }

The code is very simple. Just click a button to start the corresponding Activity.

But if that's the case, FirstActivity, SecondActivity and ThirdActivity must be stored in the same task as MainActivity.

So now we are going to write the most core code and modify the AndroidManifest.xml file as shown below:

 < manifest xmlns : android = "http://schemas.android.com/apk/res/android"
 xmlns : tools = "http://schemas.android.com/tools"
 package = "com.example.miniprogramtest" >

 < application
 ... >

 < activity
 android : name = ".FirstActivity"
 android : exported = "false"
 android : label = "First line of code"
 android : launchMode = "singleTask"
 android : taskAffinity = "com.example.miniprogramtest.first"
 />

 < activity
 android : name = ".SecondActivity"
 android : exported = "false"
 android : label = "The second line of code"
 android : launchMode = "singleTask"
 android : taskAffinity = "com.example.miniprogramtest.second" />

 < activity
 android : name = ".ThirdActivity"
 android : exported = "false"
 android : label = "The third line of code"
 android : launchMode = "singleTask"
 android : taskAffinity = "com.example.miniprogramtest.third"
 />
 ...
 </ application >

 </ manifest >

As you can see, here we set the launchMode of FirstActivity, SecondActivity and ThirdActivity to singleTask, and assign a different taskAffinity to each of them.

Now run the program, click the three buttons on the interface respectively, and then press the taskbar key on the phone, we can see the following effect:

Isn’t it amazing? These are three activities in the same app, but now we can display them in three independent task views. Doesn’t it feel like a WeChat applet?

However, although FirstActivity, SecondActivity and ThirdActivity all have independent task views, there is still a very obvious gap between them and WeChat applets.

Because every program has its own exclusive application logo, and mini programs are no exception. As we can see in the first picture, the Meituan mini program has the Meituan logo, the Weibo mini program has the Weibo logo, and the Starbucks mini program has the Starbucks logo.

At present, FirstActivity, SecondActivity, and ThirdActivity all display the Logo of the MiniProgramTest project, which makes them still not look like an independent application.

Now we will start to optimize this part of the problem.

First of all, I have prepared three pictures here: first_line.png, second_line.png, and third_line.png, which are used as the Logos of FirstActivity, SecondActivity, and ThirdActivity respectively:

Next, edit the code of FirstActivity, SecondActivity, and ThirdActivity and add the following logic:

 class FirstActivity : AppCompatActivity ( ) {
 override fun onCreate ( savedInstanceState : Bundle? ) {
 super .onCreate ( savedInstanceState )
 setContentView ( R .layout .activity_first )
 setCustomTaskDescription ( )
 }

 private fun setCustomTaskDescription ( ) {
 val taskDescription = ActivityManager .TaskDescription (
 "FirstActivity" ,
 BitmapFactory .decodeResource ( resources , R .drawable .first_line )
 )
 setTaskDescription ( taskDescription )
 }
 }

 class SecondActivity : AppCompatActivity ( ) {
 override fun onCreate ( savedInstanceState : Bundle? ) {
 super .onCreate ( savedInstanceState )
 setContentView ( R .layout .activity_second )
 setCustomTaskDescription ( )
 }

 private fun setCustomTaskDescription ( ) {
 val taskDescription = ActivityManager .TaskDescription (
 "SecondActivity" ,
 BitmapFactory .decodeResource ( resources , R .drawable .second_line )
 )
 setTaskDescription ( taskDescription )
 }
 }

 class ThirdActivity : AppCompatActivity ( ) {
 override fun onCreate ( savedInstanceState : Bundle? ) {
 super .onCreate ( savedInstanceState )
 setContentView ( R .layout .activity_third )
 setCustomTaskDescription ( )
 }

 private fun setCustomTaskDescription ( ) {
 val taskDescription = ActivityManager .TaskDescription (
 "ThirdActivity" ,
 BitmapFactory .decodeResource ( resources , R .drawable .third_line )
 )
 setTaskDescription ( taskDescription )
 }
 }

The logic of these three codes is basically the same.

The core part is to call the setCustomTaskDescription() method to set a custom TaskDescription for the current Activity.

The so-called TaskDescription is to set a description for the current task, which can include the task name and icon.

Here we set different TaskDescriptions for FirstActivity, SecondActivity, and ThirdActivity, so that you can see different application logos in the task view, as shown in the following figure:

In fact, up to this point, we have almost built the shell of the WeChat applet. The remaining part, of course, the most difficult part, is to add the content of the applet in this shell. The technology of this part is mainly front-end, which is not my area of ​​expertise, and I can't explain it, so I will not continue to extend it.

However, some friends may still have such doubts: our current technical implementation plan is to define a separate Activity (FirstActivity, SecondActivity and ThirdActivity) for each mini program, but WeChat mini programs can have an unlimited number of them. It is obviously impossible for us to register an unlimited number of Activities in the AndroidManifest.xml file, so how does WeChat achieve this?

In fact, this is just a beautiful misunderstanding, because WeChat mini-programs can have an infinite number of them. It’s just that you don’t pay attention to this small detail.

Let's verify this by doing an experiment and observing the effect in the following figure:

As you can see, I have opened these five mini-programs in order: Bilibili, QQ Music, Weibo Hot Search, JD Shopping, and Starbucks.

At this time, go back to WeChat and open the SF Express mini program.

Going back to the task view list interface again, you will find that there is now a SF Express mini program, while the Bilibili mini program that was opened first has disappeared from the task view list.

From this, we can see that WeChat actually only places 5 placeholder Activities in the AndroidManifest.xml file. When you try to open the sixth mini-program, the first mini-program opened will be recycled and its container will be provided to the sixth mini-program.

Well, this article ends here. The content is actually very simple, but it has explained how to implement the outer layer of the mini program on Android. As for how to implement the core content of the mini program, it depends on the level of each architect. ​