Weex series (3) – single page or multiple pages

Time:2022-11-25

Table of contents

Time always flies so fast, and another week has passed. It’s getting colder and colder, I feel like I’m going to hibernate, and I’m getting lazy, hahaha, let’s get into our theme.

single page application

Single page application (single page web application, SPA), everyone should be familiar with it. Now many pages adopt this mode. The advantages and disadvantages can be searched online, and there are many supported frameworks, such as react family bucket and vue family bucket Wait.

The upper-level language of Weex has vue, so can we also use vue family bucket to build an app? The answer from the official website is yes.

Initialize the project with weex scaffolding, and the option vue-router is followed by a (not recommended) not recommended.

Weex series (3) - single page or multiple pages

The demo is as shown in the figure below. This example is very simple, so we will not upload the code. In fact, there is a very typical example on the official website weex-hackernews(https://github.com/weexteam/w…, using vuex and vue-router, I feel that I have fallen into the pit of weex (doge), I should have seen and studied this example. There is one on the official websiteUsing Vuex and vue-router, you can also click in and have a look.

Weex series (3) - single page or multiple pages

Then let’s briefly analyze

a bundlejs

In the above example, although there are three tabs and one page3, it feels like a lot of pages, like the web, and only one js is packaged in the end. Do you feel something wrong? Yes, there is only one such a big app js.

1. It takes a long time to open the white screen for the first time
2. The corresponding page js cannot be loaded on demand
3. The entire app uses the same execution environment, and there are many hidden dangers, etc.

Generally, apps are getting bigger and bigger and more complicated. Think about it, isn’t it a little scary?
So the official website also guides us to integrate Weex into existing apps.

Weex series (3) - single page or multiple pages

multi-page application

In fact, the native app is a multi-page scene. For example, a browser can open many windows. The above example is just tossing back and forth in one window.
having said so much,Then how to realize the bottom tab1, 2, and 3 in the above example, yes, this is the cost of multiple pages, there should be many like us who have developed an app from scratch with Weex, and have considered a lot.For the bottom piece, we still decided to use native, for this part, we found native development classmates to do some support. This part is said to be a very basic and basic part of native development.It can be done in about half a day, but follow-up scalability, performance optimization, extensibility, etc. are easy to talk about. The following only provides an idea on our side.

  • iOS: UITabBarController + UIViewController Assign the paths of tab1, 2, and 3.js to UIViewController respectively. You can check WXDemoViewController before.
UIViewController * weexVC = [[WXDemoViewController alloc] init];((WXDemoViewController *)weexVC).url = url;
  • Android: This uses Fragment. Search weex Fragment online, and there will be many articles with reference value. You can go to find out. I won’t take screenshots, for fear of copyright.

navigator

I feel that this word has appeared many times in my previous articles. Yes, the bottom tab1 corresponds to tab1.js and after rendering the page, how to enter the corresponding page.js? This is what I said in the previous article. The navigator is basically used, and we also use the page corresponding to page.js You can use vue-router.

Of course, this is encapsulated with native module components. If you are interested, you can take a look at the file WXNavigatorModule.m, so the effects of page advance and retreat, switching, etc. are also excellent. Personally, I feel that it is completely better than a single-page application.

summary

Weex series (3) - single page or multiple pages

After reading the article, it is not difficult to find that my point of view is biased towards multi-page applications.Each has its own needs, and everyone can choose according to their own scenarios. If your app has few pages and is lightweight, you can also use the single-page mode.

Finally, if you like a little bit and help you a little bit, welcome to like and collect.