Solution to embedding WeChat mini program WebView into other people’s web pages

As written above, the applet must be a hot-certified enterprise applet. Personal applet does not support WebView creation.

method one:

When starting to create a WeChat mini program, everyone will encounter that the URL used by the WebView component must set the business domain name in the background of the mini program, and the corresponding verification file must be placed in the root directory of the corresponding domain name server, otherwise it will not work after publishing. Open normally.

When developing and testing, I embedded someone else's webpage in the applet. I can't place the verification file on someone else's server, which causes the content in the WebView of the applet to not be displayed normally after the release.

Solution
Because there are servers and domain names here, the following method is used

1. Use nginx to proxy the target URL to your own second-level domain name
2. Point the request for the applet verification file to the verification file on my local service:

server {
    
    
    listen       8778;
    server_name  ltzf.agribigdata.com.cn;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    # iframe 跨域问题
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_hide_header X-Frame-Options;
        add_header X-Frame-Options ALLOWALL;
        add_header Access-Control-Allow-Origin *; # 必须要有
        add_header Access-Control-Allow-Headers *; # 必须要有

    #location / {
    
    
     #   root   /usr/share/nginx/ltzf;
    #    index  index.html index.htm;
    #}
    location =/4nzqVbVMLP.txt {
    
    
        root   /usr/share/nginx/ltzf;
        index  4nzqVbVMLP.txt;
    }
    location ^~/ {
    
    
    proxy_set_header Accept-Encoding "";
    proxy_set_header Referer "https://h5.aicloudav.com/";
    proxy_pass https://h5.aicloudav.com/;

    add_header Access-Control-Allow-Origin *;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
    
    
        root   /usr/share/nginx/nxh5cj;
    }
}

After this configuration, the WeChat authentication is passed and the mini program displays normally.

Method Two:

WeChat applet jumps to WeChat built-in browser

After consulting a lot of information, I found that there are two ways to achieve it.

1. Realized through WeChat public account articles

The mini program can use web-view to open the associated official account article. The official account article can be read in full text by clicking a link. After the mini program opens the article, click Read the full text to jump to the WeChat built-in browser.

The associated official account is required, and the user needs to click to open an article first, and then click to read the full text to jump to the corresponding link.

2. Realized through WeChat mini program customer service messages

When the user clicks the customer service button of the applet to enter the session, parameters are sent to the background, the background receives and processes, and an automatic reply is realized through the interface.

3. Realized through cloud development

https://blog.csdn.net/baidu_38493460/article/details/124241960

The main explanation is the second implementation method.

1) Open the customer service message on the WeChat public platform

2) Generate AppSecret

Notice: The AppID is displayed in plain text and can be obtained directly. AppSecret needs to be obtained by clicking Reset on the right. It should be noted that AppSecret will only be displayed once and needs to be saved. The previous AppSecret cannot be obtained next time and can only be reset.

3) Access message push

Development Management-Development Settings-Message Push, fill in the relevant configuration

URL: interface address, you don’t need to write it first.

Token: set freely, used when the interface calls WeChat

EncodingAESKey: Automatically generated, used when the interface calls WeChat

Send AppID, AppSecret, Token, EncodingAESKeyto the back-end staff to develop the message push interface, and then fill in the interface address written by the back-end staff into the message push URL.

4) Access customer service function

Mini program customer service session function, users can pass parameters to the backend api address when entering the customer service session, receive it using the post method, and save it to txt. Just use the attribute: session-from. As shown below:

5) After setting the above steps, you can get the default reply.