preface

3 months ago, micro channel small program launched the Web-view component caused a wave of small climax, the author of the big front-end team wrote a brief analysis, details can be seen: micro channel small program front-end ecology.

We dared to guess that this feature could lead directly to a spike in the number of small programs.

After all, there should be a lot of teams with insufficient resources. Now we can embed the existing H5 applications into the small program Web-view container, and sit wechat traffic dividend with the lowest development cost. Why not?

We also imagined that “applet pages + Web pages” hybrid development (even heavier Web) would be the next trend.

The 2M code limit (now updated to 4M) makes it necessary for complex applets like “Scroll official” to consider introducing Web content, and the applets release mechanism makes it ultimately impossible to iterate as quickly as the Web.

Just in my business line, there are existing H5 applications but no corresponding applets. We in the development of the corresponding small program is also calculated to harvest a lot of experience (stepped on a lot of pits), share to have small program needs of friends ~

Biggest pitfall: Service notifications are not supported

Yes, web-View does not support push service notifications (or template messages).

As shown, the pattern is similar to subscription numbers in the conversation list

Why is it called the biggest hole? Let’s take a look at the service notices first. The following quotes are all from the official mini program documents of wechat.

Based on the wechat notification channel, we provide developers with template messaging capabilities that can effectively reach users in order to achieve closed-loop service and provide a better experience.

That looks impressive. What if our applet didn’t have this feature?

  1. “Run out of time” is the slogan of small programs. Without service notification, the ability to reach (recall) users effectively is lost, and then the users will never come back. What about activation and retention?

  2. Many functions are not like reading an article in a subscription account, which can be done in a few minutes. For example, most e-commerce activities: from searching, browsing price comparison, communicating with sellers, to adding to the shopping cart, only go through less than half of the life cycle; Then the order payment evaluation, not including recommendation of repurchase, cancellation, refund and so on, no 15-30 minutes is enough. However, no user is going to leave a small application open all the time, while others have to go out to chat and check moments. Without the ability to turn synchronization into asynchrony, how can most product logic achieve service closed-loop?

In an article that teaches you how to break through the limitations of applets’ message push, the characteristics of service notifications are summarized as “more, faster, better and less”. Before we expand this, we can also see:

  1. Data from sources visited by this small program in the last 30 days show that about 20% of users enter Xiaodachard through template messages, ranking the 3rd among all sources (if the denominator is removed from the source of new users, the ratio and ranking will be higher).

  2. Moreover, users almost never close wechat’s message push. Compared with App’s and SMS’s, the touch rate of small programs’ push is much higher.

So, no (serious) small program will not support service notification (rogue some such as Pin-duo duo, see a product can give you N consecutive push). Imagine an APP without push notifications. Would your product, your operation, and your bosses agree?

Why not?

However, why doesn’t Web-View support service notifications? What’s wrong? Please continue to read the definition in wechat official documents.

Delivery condition: triggered after the user interacts with the page in the wechat system

To sum up, three payments, one submission form (which needs to be declared to send a template message) are valid for 7 days.

  1. First of all, there’s a distinction between paying and submitting a form, and you have to report it in different cases. Here we go.

  2. However, web-view does not support the ability to pay (its JSAPI capability does not include wechat pay), which is not explicitly stated in the wechat documentation, but can be seen in the wechat web-view problem summary, this is also quite a hole…

  3. In fact, the behavior of payment is a very small amount of interaction for the applets themselves, and most applets don’t even include payment. So we basically have to rely on forms, but here’s the problem: the applet’s Web-view is incompatible with forms!!

PS: Let’s distinguish the form component. It has nothing to do with the form tag in the web-view.

PS: RN and Weex also have no form component. Why does the author think of the following picture when he sees the form?

The HTML 4.01 Specification released in December 1999 supports forms. Since AJAX took over the world in 2005, cross-domain and file uploads have been provided with solutions other than forms.

Let’s not make fun of how primitive the form component is in the wechat document, but let’s look at the definition of the Web-view component

The Web-view component is a container that can be used to host web pages and automatically fills the entire applet page.

Try to put the Web-view inside the Form component. The Form component is all paved. So, automatically full = page exclusive = all other elements are directly overwritten… Well, someone wrote a small line in Bug & Tip at the bottom of the document

In summary, Web-view has been insulated from service notifications. So, the interaction behavior of the page in the small program is not included in the wechat system!! ?

I can’t help but think back to The PWA (Progressive Web App) that Google launched earlier, and feel a bit like it here.

  1. Both are Web-based technologies that create (perhaps) pseudo-native replacements for apps;

  2. PWA’s push notifications were blocked due to its advanced API and some unknown services (you get the idea);

  3. Small program service notice, you want to use the Web -view shell released online also can not use.

Going a bit further, but everyone says that PWA is the next generation superset of Web technologies, and applets are the black magic to Hack Web technologies…

How to objectively evaluate the “mini program” experience? The Web continues to move away from us

So what?

Since my team’s business relies heavily on service notifications and payments, should we abandon Web-View altogether and rewrite all our H5 applications to native applets? Apparently not.

As mentioned above, payment is only one of many links in e-commerce, mainly in the product or order details page (which must be rewritten). For service notifications, enough forms can also be collected through several rewritten native applet pages.

  • For details on how to rewrite, please refer to our previous micro program like Vue – an in-depth study of the WEpy framework. While the Wepy framework tries to be syntactically as homogeneous as possible with the Web projects of the VUE technology stack, compatibility between the two feature apis remains a tricky issue, and after all, the syntactic sugar and lifecycle functions are different. There are also many labor costs and learning and adaptation processes. Here is an example:

Based on Wepy, the template part is a replacement + adaptation of the live, JS more troublesome. From isomorphism gap is not small, the United States your mpVue?

  • For details on how to collect, please refer to this article that teaches you how to break through the push limits of applets template messages. As mentioned in the article, people usually change all clickable places in the applet page to form. If you don’t think it’s simple enough, you can also create a form layer within the form and let the click event bubble! This form is not the other form. Magic enough…)

The rest of the business, in theory, can be implemented with web-view!! The biggest advantage of the open Web-view capability, aside from the operational activity page, is that it facilitates such needs. Applet home page, or even applet pages configured with tabBar. Because we also found a magical feature…

Probably using native UITabBar, Web-view and tabBar can coexist

conclusion

Thanks to the timely introduction of the Web-View component, we only had to rewrite some of the details page and its dependent components for a final review.

  1. Positioning: The web-view of applets is like a Hybrid client embedded with H5 pages. Native applets are best used when basic capabilities are needed, such as payment, service notification (IM and recall scenarios), etc.

  2. Compatibility: Don’t worry too much about this, the latest base library statistics show that 1.6.4+ coverage is over 95%;

  3. Data communication: small program => web-view can use search and hash in THE URL, web-view => small program can use BindMessage, generally used to solve the problem of sharing information transfer;

  4. Login: a. Access wechat authorization in web-view; b. Enter web-view after small program login, and transfer relevant cookies to web-view through URL.

Other features (welcome to discuss and add) :

  1. Web-view and applets are two independent environment, data completely different, including cookie, session, localStorage and so on;

  2. But the small program embedded web-view with wechat built-in browser is a set of environment, that is to say, you leave the above traces in web-view, to wechat built-in browser to open;

  3. __wxjs_environment === ‘miniprogram’, but when the web-view goes to the second page, On Android, this variable is undefined.

Other pits (common errors) :

  1. The open domain name is not set in the small program management background business domain name (note is business domain name, not the server domain name);

  2. The previous address of the page 302 must also have been set with the service domain name.

  3. The page can contain an IFrame, but the address of the IFrame must be the service domain name.

  4. The page must be HTTPS.

  5. You can check whether the HTTPS service is normal by opening the corresponding address in a common browser. And so on, For details, go to web-view Problem summary (https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=585555149&docid=ebfd9e5ec9986b4f2 3C41F8D8BBF2730) or leave a message in this thread.