Guess this is a small program or a webapp jump? --Small program Webview and Webapp interactive parameter transfer

WeChat applet Webview and Webapp single page sharing interaction

Before starting the article, let's take a look at an effect.

The two jump effects use the applet webview to jump to the native applet page, and the webapp route jump.

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

Friends who are familiar with bui development may have guessed it. The first type of routing jump uses the BUI single-page development routing jump (load first and then jump), and the second type is jump to the mini program interaction Effect (flash white first and then load). Thanks to the way that single-page routing dynamically loads components, the overall experience will feel smoother and more comfortable.

1. The difference in development methods

There are small programs, why use webview components? Let's first sort out the differences between these development methods.

### 1. Webapp development

This is h5 development in the traditional sense, pure web version, and a set of codes running on multiple platforms in the true sense. I chose bui as the development of this webapp. There are several reasons.

#### Features

1. Support traditional multi-page routing development (combined with php, java and other background languages), and also support single-page routing development (better experience, such as the previous gif effect);
2. Modularization, componentization, support for multi-person collaboration;
3. Dynamic components can be loaded on demand; it can also be loaded into static modules at one time;
4. Support state management;
5. Rich templates, rapid development;

6. ...

   As a traditional H5, there is no problem to do some display types, but once it involves the development of native low-level interfaces, such as calling Bluetooth, gyroscope, etc., there is currently nothing that can be done. At this time, there are two options. BUI can be combined with packaging platforms, such as Cordova, Dcloud, etc., and packaged into a stand-alone installation App.

But after solving the underlying capabilities, how to divert traffic? No one installs and no one uses it, which is also a problem.

2. Mini Program Development

The applet was born, which is free of installation and ready to use. It not only solves the ability to call the bottom layer, but also has a low-cost customer acquisition channel. But this thing has developed its own development language. If you have an online product before and want to use it in a small program, you have to reinvest in the development of one. The development cost is one thing. The small program is characterized by small and many Restrictions, such as packet size, routing level restrictions, etc.

Features

1. No installation, just use and go;
2. Support calling the underlying capabilities;
3. Size limit, the size of all sub-packages of the entire mini program cannot exceed 8M, and the size of a single sub-package/main package cannot exceed 2M;
4. The applet downloads files to the local, and the maximum resource limit is 50M;
5. At the beginning, routing was limited to 5 layers, and currently it is 10 layers;
6. ...

3. Mini program webview hybrid development

Combining the above advantages, the third derivative development method, mixed development, utilizes the webview capability of small programs, and a large amount of H5 stock can be converted into small programs, which is almost perfect.

Features

1. Support calling part of the underlying capabilities;
2. Unlimited routing;
3. Unlimited size;
4. https interface;
5. https business domain name;
6. does not support personal mini programs (emphasis);
7. ...

At present, many major Internet companies also use webapp and small program development methods. Although webview development has many limitations, this development method can break through the hierarchical restrictions of small programs, truly one-time development, multi-terminal adaptation, and maintaining a consistent experience at the same time , Reduce development cost and maintenance cost.

The example in this article uses the webapp developed by BUI combined with the WeChat applet webview development solution. If you are interested, then read on.

2. Mini Program Hybrid Webapp Development Solution Provided by BUI

Using the small program webview solution, the previous bui single-page shared page can only jump to the home page, but now with this new solution, it can automatically bring the parameters when sharing, and the user will automatically jump to The shared page, and the page needs to be included with the parameters, such as the id of the article details.

The scenario includes the following examples:

1. Support sharing

1. Support to jump to the page of passing parameters to the applet;

1. Support back to close the applet webview;
2. Support sending messages to the applet, and the message will only be triggered when the user triggers sharing and backing;

1. Support to close all pages and return to the tab of the main program;

1. ...

3. How to use it?

The project to create the webview directory of the applet

buijs create webview -p weixinapp

The program webview development consists of two parts,


1. bui standard project, responsible for the functional interaction of bui itself, and provides an example of operating the WeChat applet routing;
2. /src/weixin directory is a small program project.

Detailed description of applet project

1. Catalog description

/src/weixin

Compared with the newly built WeChat Mini Program Project (No. 2021-4-28), the following things are added

table of Contents	File description
/bui	Add a bui directory to store bui-related module scripts
/bui/webview.js	Some methods that the webapp/index module needs to use will automatically parse the URL parameters to achieve sharing
/pages/webapp	New webapp directory
/pages/webapp/index.js	URL address used to configure webapp
/pages/webapp/index.json	Related configuration of the page
/pages/webapp/index.wxml	Equivalent to html file
/pages/webapp/index.wxss	Equivalent to css file

If you want to use bui's webapp in an existing project, you can copy the above files to the WeChat applet project.

2. Instructions for Mini Program

1. mp.weixin.com registration mini program;

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

   {
     ...
     "appid": "wx11xxxxxxxxxxxxx",
     "projectname": "bui",
     ...
   }

3. Import buiMiniProgram to the current project
4. Modify pages/webapp/index.js webapp to the remote bui single page routing address
5. In the debugging phase, in the upper right corner of the developer tool, 160b45f5282a92 Details -> Local Settings -> Check not to verify the legal domain name, web-view (business domain name), TLS version and https certificate

Four, common problems

1. How to modify the default homepage of the applet, for example, need to jump to authorization?

Answer: Change the position of the array in app.json, the applet opens the first index path of the array by default.

"pages":[
    "pages/index/index",
    "pages/webapp/index",
  ],

1. Can individuals use the bui development method?

Answer: No, small programs have many restrictions, and individual developers are not allowed to configure web-view business domain names;

1. The company uses bui to develop webview applets. What do you need to know in advance?

answer:

  1. 必须要有公司资质，需要申请公司资质的小程序；
  2. 域名必须要备案；
  3. 域名必须是https；
  4. 小程序的相关请求也需要进行配置，也就是你使用第三方的请求，没法校验域名的情况下，是不允许请求的；
  ... 其它参考小程序的官方文档。

5. Appendix:

1. bui frame http://easybui.com
2. buijs command line https://www.npmjs.com/package/buijs
3. Description of Mini Program Webview: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
4. WeChat JS-SDK: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
5. WeChat JS-SDK Demo http://demo.open.weixin.qq.com/jssdk

Welcome to follow bui fast subscription number, focusing on webapp development.