Wechat applets Webview and Webapp single page sharing interaction

Before we start, let’s look at one effect.

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

Can you guess what jump the first effect takes?

? > < p style = “max-width: 100%; clear: both; min-width: 1pt; The overall experience feels smoother and more comfortable thanks to the single-page route that dynamically loads components.

First, the difference of development mode

Why use a WebView component when you have a small program? Let’s first sort out the differences between these development methods.

1. The Webapp development

? > This is h5 development in the traditional sense, pure web version, and a set of codes in the real sense run on multiple platforms. I choose BUI as the development of this WebApp for several reasons.

The characteristics of

  1. Support traditional multi-page routing development (combined with PHP, Java and other background languages), also support single-page routing development (better experience, such as the previous GIF effect);
  2. Modularization, componentization, support multi-person collaboration;
  3. Dynamic components, loaded on demand; Static modules can also be loaded at a time;
  4. Support state management;
  5. Rich templates, rapid development;
  6. .

? > < p style = “max-width: 100%; clear: both; min-height: 1em; BUI can be combined with packaging platforms, such as Cordova and Dcloud, and packaged into an independently installed App.

But solved the underlying ability, how to drainage? No one’s installing it. No one’s using it.

2. Small program development

? < p style = “margin-bottom: 0px; margin-bottom: 0px; margin-bottom: 0px; But this thing has its own development language, so if you have a product that’s already online and you want to use it in applets, you have to go back to the development of a new one, and the development cost is one thing, and applets are small and have a lot of restrictions, like package size, routing hierarchy, etc.

The characteristics of

  1. No installation, ready to go;
  2. Support for invoking underlying capabilities;
  3. Size limitation: the size of all subcontracts in the whole small program shall not exceed 8M, and the size of single subcontract/main package shall not exceed 2M;
  4. Download a small program file to the local, the maximum resource limit file is 50M;
  5. Routing was initially limited to 5 layers, but is now limited to 10 layers;
  6. .

3. Mixed development of small program Webview

? > < p style = “max-width: 100%; clear: both;

The characteristics of

  1. Support for invoking part of the underlying capabilities;
  2. Unlimited routing;
  3. Unlimited size;
  4. HTTPS interface;
  5. HTTPS service domain name;
  6. No support for personal applets (important);
  7. .

? “> < p style =” max-width: 100%; clear: both;

The example of this paper adopts webApp developed by BUI combined with webView, a small program of wechat. If you are interested in it, go on to read it.

Ii. Small program mixed Webapp development scheme provided by BUI

? > using the applet webview, bui single page to share out the page, before 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.

The scenario contains the following examples:

1. Support sharing

  1. Support jump parameters to the small program page;

  1. Support back close small program Webview;
  2. Support to send a message to the small program, need to trigger the user to share back and so on will 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
Copy the code

The project webview development consists of two parts,

  1. Bui Standard Engineering, responsible for functional interaction of BUI itself, and provided an example of operating wechat applet routing;
  2. /src/weixinDirectory for small program projects.

Small program engineering details

1. Directory description

/src/weixin

Compared with the newly built wechat small program project (2021-4-28), there are the following things

directory Document describing
/bui The bui directory is added to store bui module scripts
/bui/webview.js The webApp/Index module uses methods that automatically parse URL parameters for sharing
/pages/webapp Added webApp directory
/pages/webapp/index.js The URL used to configure the WebApp
/pages/webapp/index.json Page configuration
/pages/webapp/index.wxml It’s an HTML file
/pages/webapp/index.wxss It’s a CSS file

If you want to use Bui WebApp in an existing project, you can copy the above files to wechat small program project.

2. Instructions for using small programs

  1. Mp.weixin.com register applets;
  2. Get applets to appID for modificationproject.config.json;
{..."appid": "wx11xxxxxxxxxxxxx"."projectname": "bui". }Copy the code
  1. Import buiMiniProgram into the current project
  2. Modify thepages/webapp/index.jsThe Webapp address is the remote bui single-page routing address
  3. During the debugging phase, in the upper right corner of wechat developer tools,For details -> Local Settings -> Check whether the valid domain name, Web-view (service domain name), TLS version, and HTTPS certificate are verified

4. Common problems

  1. How to change the default home page of applets, for example, to jump to authorization?

A: Change the array in app.json. By default, the applet opens the first index path of the array.

"pages": ["pages/index/index"."pages/webapp/index",].Copy the code
  1. Can individuals use bui development?

A: No, the applets have more restrictions. Individual developers are not allowed to configure the Web view service domain name.

  1. What do companies need to know in advance when developing webView applets using Bui?

A:

1. Must have company qualification, need to apply for small procedures of company qualification; 2. The domain name must be recorded; 3. The domain name must be HTTPS. 4. The request related to the small program also needs to be configured, that is, if you use a third party request and cannot verify the domain name, it is not allowed to request; . Other reference applets official documentation.Copy the code

V. Appendix:

  1. Bui framework easybui.com
  2. Buijs command line www.npmjs.com/package/bui…
  3. Small program Webview: developers.weixin.qq.com/miniprogram…
  4. WeChat JS – SDK: developers.weixin.qq.com/doc/offiacc…
  5. WeChat JS – SDK Demo demo.open.weixin.qq.com/jssdk

Welcome to bui Speedy subscription and focus on webAPP development.