Weex Series (4) – Three-End Unity



  • Weex Series (Preface) – Always know a little bit about native iOS
  • Weex Series (Preface) – Always know the original Android
  • Weex Series (1) – Hello World Project
  • Weex Series (2) – Page Jump and Communication
  • Weex series (3) – single page or multi-page
  • Weex Series (4) – Three-End Unity
  • [Weex Series (5) – Packaging Native Components and Modules]
  • [Weex series (6) – CSS related summary]
  • [Weex Series (7) – Web Components and webview]
  • [Weex Series (8) – It’s time to give a brief analysis of process principles]
  • [Weex Series (9) – A Collection of Stepping on Pits and Filling Pits]
  • [Weex Series (10) – So much before you write… ]

Hey, covering your face by hand is really a busy two weeks, pulling out a wisdom tooth, voting at three ends and participating in the Wechat Marathon. Fortunately, they all insisted on it. Why am I so excellent? Let’s do it manually.

Above mentioned a three-end voting campaign, before thinking about how to write this article, after doing this campaign, I feel that there are thousands of words.


Attached is our activity link. Welcome to call for your favorite beans. App side, welcome to searchBlack cat complaintorSina public surveyWell, you can double vote by clicking on banner. Yes, both apps are based on weex.

Open the activity page, you can see only three pages, home page, star details page, star list page. When I first saw these three pages,I just think that we can use routing to make a three-terminal unification.

Weex Series (4) - Three-End Unity

To configure

Looking at my previous article, I know that our apps are multi-page. Web pack can only be packaged into multiple js. According to the idea above, we need to modify the configuration at this time. If we have done a large project of vue, we should have met it. I haven’t done it before. It took me half a day to refer to the existing multi-page configuration of app. With the newly built configuration of only one page project, the configuration file was finally modified. (I can refer to my previous article here for a single page and multiple pages).

Then the static three pages are cut, and the app side and the web style are basically normal.
If you use the latest weex scaffoldingThe index. HTML of the web needs to introduce the corresponding index. web. JS and vendor. web. JS in the dist directory, instead of the weex-vue-render and other JS quoted in the weex-hacker news-master project on the web. (Otherwise, it can’t run alone.

vendor.web.jsIt is compatible with the weex components and modules we use, so you can study them if you are interested.

In fact, it was a smooth start, but there were many problems in the process. Here are some main points.

Packaged modules and components

When I first got the project, I thought less about it. Weex only handles the components and modules it supports, so we need to do compatibility /(o)/~ for our own packaging.

Here’s one thing to say.weex-uiAlso handled, such as wxc-slider-bar three-terminal basically no difference.

For example, our login module, H5 is a set of login components, app is the login module of Weibo. There are also related request methods, back-end interface processing and so on.


This part of the real three-terminal is basically highly unified, some fine-tuning can be done, which is exactly the same, we can quickly solve the follow-up H5 and PC.


The part of the above module is related to the project. I have taken it in a few simple strokes. In fact, this one is really troublesome. I wish you all a success.

This time, we have two ends of pc, H5 and two apps. In fact, there are six ends, and the time is tight. So in the end, we basically still have two ends.H5, PC maintenance set, app maintenance set

Finally, I did not talk about the unification of the three ends, but I really experienced it once. Although there was some discrepancy in the end, the next time is basically no problem (doge).

If you want to use it but haven’t done it yet, you can really try it.

Finally, you are welcome to comment, exchange and study. If you like it, please give me a compliment.~~

Recommended Today

Go HTTP programming

Catalog Net / HTTP introduction HTTP server Default server Custom server HTTP client Basic http / HTTPS requests Get request example Sample get request with parameters Post request example Custom client Custom transport Net / HTTP introduction The go language standard library provides net / HTTP package, which covers the specific implementation of HTTP client […]