The first time to write an article, still a little nervous, write bad, but also hope more corrections ~


1, binding JS secure domain name login wechat public platform, enter the function Settings of the public account Settings, fill in the secure domain name

2. Add a whitelist

3, introduce the js file Need to call in JS interface pages to introduce the following JS file: support HTTPS

4. Authenticated service numbers, authenticated applets of non-personal subjects

The development of

1. Use the Config interface injection permission to verify the configuration and apply for open labels

return new Promise((resolve): void => { const script = document.createElement('script'); const body = document.getElementsByTagName('body')[0]; script.type = 'text/javascript'; script.async = true; Script. The SRC = "/ /; body.append(script); script.onload = () => { wxsdk(encodeURI(window.location.href)).then((res) => { console.log(, "124") window.wx.config({beta: true,// must be written this way, otherwise wx.invoke jsAPI will have a problem: False, // If debug mode is enabled, the return value of all API calls will be alert on the client. If you want to view the passed parameter, you can open it on the PC, and the parameter information will be printed in log. AppId:, // Required, enterprise wechat corpID timestamp:, // Required, generated signature timestamp nonceStr: Res. Data. The data nonceStr, / / required, random string generated signature signature: res. Data. The data. The signature, / / required signatures, see appendix - JS - SDK signature algorithm jsApiList access: Res. The data. The data jsApiList,, / / required, you need to use JS interface list, any interface to invoke need incoming openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'] }); window.wx.ready(function(){ resolve(); All interface calls must be made after the result of the config interface. Config is an asynchronous operation on the client side, so if the relevant interface needs to be called when the page loads, it must be called in the ready function to ensure correct execution. Interfaces that are invoked only when triggered by the user can be invoked directly without being placed in the ready function. }); Window.wx. error(function(res:any){console.log(res) // Config information fails to be verified. For example, if the signature expires, the verification fails. It can also be viewed in the returned RES parameter, where the signature can be updated for SPA. }); }); }; })}Copy the code

2. Use the wechat open label wX-open-launch-WEAP page

<wx-open-launch-weapp id="launch-btn" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} username="gh_xxxxxx" path="pages/index/index.html"> <script type="text/wxtag-template"> <div style={{ padding:  "0 30px", display:"flex", alignItems: "center", backgroundColor: "#3bc48b", color: "#fff", borderRadius: "10 px}}" > find ta learn more < / div > < / div > < / script > < / wx - open - launch - weapp >Copy the code

The app-redirects H5 to the app-app, which works only on the app. To do that, you need to app-eap a layer of app-eap outside of WX-open-launch-app-eAP. App-eap tags don’t work.

Sometimes it will be found that even if the check is passed, there will be no display button in wechat browser, because the content placed in type= “text/x-template” will not be parsed, executed, or displayed by the browser, it just silently hidden there. What is the use of this, is to render the page after it has been loaded and then get its alignment, a process that is usually done using various template engines.

< script type=”text/wxtag-template” > < script type=”text/wxtag-template” >

Container refers to the area of appellated mini-programs (relative location), content refers to the display of appellated mini-programs, and WX-open-launch-syndrome refers to the area of appellated mini-programs (absolute location). The code is omitted here

Here are a few points to note:

Username: must be the original Id of the applet

2, in order to get wechat tag script need to add type=”text/wxtag-template” inside the style must be inline style

3, path some need to add. HTML, some do not need, this should be based on their jump to confirm the small program

All right, let’s stop there.