There are many blogs on weeX’s basic integration, so I won’t focus on them. Today, I will share some notes and pits that are not included in the WEEX document. Full experience and dry goods, I hope to help you.

1. How to integrate into the Fragment

Integration into fragments is still very common, because many apps now adopt the development mode of activity embedded fragment, putting the actual functions into the fragment. For example, TAB is generally tabLayout (bottomNavigationView)+fragment layout, TAB content also need to use WEEX to develop.

The WEEx document only explains how to integrate the weex into the fragment. There are many people asking how to integrate the Weex into the Fragment. The answer is simple, the weex rendered content is actually in a control, so just like normal fragment development, the WEEx SDK embedded. The onViewCreated view is returned in the IWXRenderListener callback according to weeX’s official description. So we just need to have the Fragment implement IWXRenderListener and then add the rendered view to the entire view container in onViewCreated.

One last bit of optimization, in addition to weex being used in fragments, should also take into account the fact that some pages are not embedded fragments. Instead of rewriting the INTEGRATION of the WEEX SDK, let your activity use fragments that already integrate weeX.

2. Select a loading mode

The WEEX document provides two common loading methods: local loading and remote loading. The author asked the official staff of WeeX developers conference, they said that weex home page entrance 9 chengdu is weeX page, and the 2 loading methods are useful, according to the actual business team to choose flexibly.

We use the method of downloading JS when opening app or switching between front and background, and then loading local JS directly. Since this method does not have to be downloaded from the Internet every time, the loading efficiency is higher, but it also has a disadvantage, that is, after each online release, it takes a period of time for users to download the code and take effect, and the update effect cannot be achieved in time.

Note: Don’t try to download the local JS version when you click on the previous page. It looks nice, it’s real-time, it’s efficient, but it’s not. The problem is that this method needs to request the server to obtain JS update status. In case of poor network, the container will not be initialized all the time. At this time, users will open multiple pages after clicking many times, which is very unfriendly and will bring indifferent pressure to the server.

3. How to conduct business interaction among different service modules

Weex is different from RN, where all services are placed in one module by default. Therefore, RN handles communication for us. However, the WEEX is different. Different services in weeX use different JS files, which causes communication difficulties.

There is a way to use storage online, but this way is not very good, after consultation with the front end, we decided to write a set of business module communication mode. We have customized a warehouse class, which provides a set method to save the key and value of the value to be transmitted in the communication of the business module. When the front end calls the set method, the value can be saved to the client, and then when the B module is loaded, the client will send the value to the B module, that is, push the value to the front end through fireGlobalEventCallback.

4. How to construct a front-end invocation system

The front-end call system here refers to the method called to the client in the VUE code, including custom controls, client functions, etc. Official told us by way of JScallback, but we can’t write in many ways a one-to-one correspondence on the client, here we write is simpler, let the front end to a good pseudo protocol, including the need to call the method, the parameters such as content, then parse the agreement in the client method corresponding to the actual. Of course, this can be considered in design mode optimization, closed for modification, more solid principles.

5. Network frame and picture frame

Weex’s sample uses the simplest httpurlConnection to request data, but this is the basic access without any optimization. SetHttpAdapter () allows you to use a network framework suitable for your company, such as OkHttp and Retrofit. Weex also recommends that you modify the network framework to improve access efficiency.

Weex does not provide a way to load images. According to the official explanation, everyone has different ways to load images. Adding them will make the SDK bloated and may not fit the actual business scenarios of each company. So weeX officially only provides a setImageAdapter() for us to customize our own picture frame, we must implement IWXImgLoaderAdapter, otherwise the picture is not able to load out.

Note: The image loading framework needs to be tested for compatibility with other formats such as GIF. We had problems with ios at the time.

6. With regard to downgrading measures

Since we use the method of downloading the local JS first and then loading the local JS, we cannot avoid the problem that the actual business code is not downloaded when we open the WEEx page. Before opening the WEEx page, check whether the service code exists locally. If not, open the H5 link configured on the entry

7. On the dot

Here only share the client side of the dot, we have several dot in the process of downloading JS, respectively download success (failure and reason), unzip success (failure and reason), incremental update success (failure and reason), in addition, Weex page information, WEEX rendering success or not, whether into the downgrade and the reason for the downgrade and other basic points.

8. Points not mentioned in other WEEX documents

Weex documents are not comprehensive, resulting in a lot of holes in the actual application of the project. After the launch of WEEX, some codes were added to fill the holes in each version. Of course, WEEX officials knew this in advance, but did not share it in time. To name a few examples, the support of UA, cookie, etc., all require client support.

Ua: There is a default UA in the WEEx SDK, but that is definitely not what we want, generally the server needs ua with app information.

Cookie: Cookie is required to be worn during the request, so we need to wear the WEEx network request framework. These in the first line may not be able to consider, but the client version of the problem has always been a big problem, here to share the hope to help you. In addition, we need to give the front end the ability to save and modify cookies, so we provide relevant set and GET methods on the client side.

9. Unsolved weeX bugs are known online

We’ve had a lot of problems since we launched, most of which have been resolved by weex. I’d like to thank weex for working with aremabi only, and for the fact that there are fewer and fewer online crashes. Weex is getting more mature. However, there is no denying that weeX still has some problems, such as weeX SDK framework initialization failure, the probability of occurrence is about three out of 1,000, WEEX official advice is that this problem can not be fixed in the SDK, you need to decide whether to initialize yourself. In case they enter a degrade strategy without initialization, the latest WEEX SDK provides an interface to initialize or not. There is also a known problem that some Samsung phones crash. This problem only appears on Samsung phones. Weex has not been solved officially. In addition, WEEX’s support for recyclerView is not very good, resulting in the effect of some lists can not be realized, I believe this should be solved in the future. In addition, there are some puzzling problems, DO not know how to say, is not very important, here is not a description, but I believe weeX gradually mature, these problems will be solved.

10. Other suggestions

After weex itself is not stable at present, and for the first time to use, can’t avoid will encounter a lot of pit, so you can use the gray released by the way, according to the device number or id shunt release part of users use only weex page, one thousand problems influence range is small, so if the mass online again after a period of time no problem. Weex integration client developers should also learn vUE, so that they can test the weeX integration code, and improve the communication efficiency with front-end personnel. More attention to weeX community and Github, JIRA, WeeX group and other weeX official platforms, there are questions can be raised in the issue, I personally experience or will reply, including now WEEX official has provided a dedicated WEEX discussion group, there are Ali personnel in the inside to answer the question. Free to study weeX underlying code and core principles, enhance the depth of technology and the ability to see the source code.

Finally: The author has used WEEX as an online project and shared his experience in using it. Absolutely not on the Internet to copy casually, I hope to be able to help with the practical application of WEEX to the project. Also welcome to use weeX students to discuss the relevant technology, progress together.