WeChat small program WebView and WebApp single page sharing interaction

Before the article begins, let’s look at one effect.


The two jump effects use the applet WebView to jump to the native applet page respectively, and the WebApp route jump.

Can you guess what jump is used for the first effect?

As friends familiar with BUI development may have guessed, the first route jump adopts the single page development route jump of BUI (first load and then jump), the second route jump to the interaction effect of small program (first flash white and then load). The overall experience is smoother and more comfortable thanks to the dynamic loading of components with a single page route.

First, the difference of development mode

Why use a WebView component when you have applets? Let’s tease out the differences between these development methods.

# # # 1. Webapp development

This is the traditional sense of H5 development, pure web version, the true sense of a set of code multi-platform operation, I choose
buiThere were several reasons for the development of this webapp,

# # # #

  1. Support traditional multi-page routing development (combined with PHP, Java and other background languages), but also support single-page routing development (better experience, such as the previous GIF effect);
  2. Modularization, componentization, support multi-person collaboration;
  3. Dynamic components, load on demand; It can also be turned into a static module for one-time loading;
  4. Support state management;
  5. Rich template, rapid development;

  6. .

    As a traditional H5, there is no problem to do some demonstration classes, but once it involves the development of the native underlying interface, such as calling Bluetooth, gyroscope, etc., it can’t be done at present. In this case, there are two options. Bui can be packaged into a standalone installed App in combination with packaging platforms such as Cordova, dCloud, etc.

But solved the underlying ability, how to drain? No one installed it and no one used it.

2. Small program development

Small program was born, free installation, that is to go, not only to solve the ability to call the bottom, but also a low-cost access to customer channels. But this thing has its own development language, so if you have a product that went live, and you want to use it in a applet, you have to invest in a new one, and the development cost is one thing, and applets are small, and they have a lot of limitations, like packet size, routing hierarchy, and so on.

The characteristics of

  1. Free installation, ready to go;
  2. Support for invoking underlying capabilities;
  3. Size limit: the size of all subpackages of the entire small program shall not exceed 8M, and the size of a single subpackage/main package shall not exceed 2M;
  4. Small program to download the file to the local, the maximum resource limit file is 50M;
  5. Routing was initially limited to 5 layers and is now limited to 10 layers.
  6. .

3. Mixed development of small program WebView

Combined with the above advantages, the third development method derived from mixed development, using the WebView capability of small programs, a large amount of stock H5 can be small programs, almost perfect.

The characteristics of

  1. Support to call part of the underlying capabilities;
  2. Unrestricted routing;
  3. Size unlimited;
  4. HTTPS interface;
  5. HTTPS service domain name;
  6. Personal applets are not supported (key);
  7. .

At present, many Internet companies also use WebApp combined with small program development, although WebView development has many limitations, but this development method, can break through the small program level restrictions, real development, multi-terminal adaptation, maintain a consistent experience at the same time, reduce development costs, maintenance costs.

The example in this paper adopts the project of WebApp developed by BUI combined with WebView developed by WeChat small program. If you are interested, then look down.

II. Small program mixed WebApp development scheme provided by BUI

Before using applet webview, bui single page to share out the page, can jump to the home page, and now with this new solution, can realize sharing, automatic take parameters, user opens automatically jump to share the page, and put the page needs to bring along with all the parameters, such as the id of the article details.

This scenario contains the following examples:

1. Support sharing

  1. Pages that support jump to pass parameters to applets;

  1. Support back to close small program WebView;
  2. Support to send messages to small programs, need to be triggered in the user share back and so on to trigger the message;

  1. Support to close all pages, back to the main program TAB;

  1. .

Three, how to use?

Create small program WebView directory project

buijs create webview -p weixinapp

The scheme WebView development includes two parts,

  1. BUI standard engineering, is responsible for the functional interaction of BUI itself, and provides examples for manipulating WeChat applet routing;
  2. /src/weixinDirectory for small program projects.

Small program project detailed description

1. Directory description

/src/weixin

Compared to the new WeChat small program project (2021-4-28), more than the following things

directory Document describing
/bui Add BUI directory to store BUI-related module scripts
/bui/webview.js WebApp/Index module needs to use some methods, will automatically parse the URL parameters to achieve sharing
/pages/webapp Added WebApp directory
/pages/webapp/index.js The URL address used to configure the WebApp
/pages/webapp/index.json The relevant configuration of the page
/pages/webapp/index.wxml It’s like an HTML file
/pages/webapp/index.wxss It’s like a CSS file

If it is in the existing project to use BUI WebApp, you can put the above file, copy to WeChat small program project can be.

2. Instructions for small programs

  1. Mp.weixin.com register small program;

  2. Get the applet to appid and modify project.config.json;

    {... "appid": "wx11xxxxxxxxxxxxx", "projectname": "bui", ... }
  3. Import BuiminiProgram into the current project
  4. Modify thepages/webapp/index.jsThe address of the WebApp is the remote BUI single page routing address
  5. In the debug phase, in the upper right corner of the WeChat developer tool,Details -> Local Settings -> check unchecked valid domain name, Web-view (business domain name), TLS version and HTTPS certificate

Four, common problems

  1. How to modify the small program default home page, such as the need to jump to authorization?

A: To change the array position in app.json, the applet will open the first index path of the array by default.

"pages":[
    "pages/index/index",
    "pages/webapp/index",
  ],
  1. Can individuals use BUI as a development approach?

A: No, small programs have more restrictions, do not allow individual developers to configure the Web-View business domain name;

  1. The company uses BUI to develop WebView applet, need to know what in advance?

A:

1. Must have the company qualification, the need to apply for the company qualification of small procedures; 2. Domain name must be put on record; 3. The domain name must be HTTPS; 4. Small program related requests also need to be configured, that is, you use a third party request, can not verify the domain name, is not allowed to request; . Other reference applet official documentation.

V. Appendix:

  1. Bui framework http://easybui.com
  2. Buijs command line https://www.npmjs.com/package…
  3. Small program Webview description: https://developers.weixin.qq…
  4. WeChat JS – SDK: https://developers.weixin.qq…
  5. WeChat JS – SDK Demo http://demo.open.weixin.qq.co…

Welcome to attentionBui fastSubscription number, focus on WebApp development.