Wechat introduced a new TAB this year that can be used to wake up mobile apps in the wechat browser.
In the debugging of the time found numerous problems, and the document forum did not have any answer, their step by step to climb out of the pit, in this record, so that posterity ~Copy the codeThe application scenario is that the APP shares the card to the wechat terminal, and the wechat terminal opens the web page directly by clicking the card in the built-in browser. When browsing the web page, the user can wake up the APP by clicking buttons and other interactive activities, which has achieved the effect of diversion to the APP.
Prospects for the feed
Universal Link is a common way to wake up the APP in wechat, but it only supports ios, so we used the open label WX-open-launch-app provided by wechat.
Here we also talk about the pit of Universal Link. The principle of universal Link is to configure a JSON file on the server and then ios can recognize and write it to the system, so that we can wake up the app when we visit the corresponding url.
But there is a problem in the wechat environment, that is, it must cross domains, between domainsuniversal linkIt’s not going to work.
Ray point
1. Secure domain name
In the configuration of wechat open platform, we will see a secure domain name configuration similar to the service number, but they are completely different.
The JS secure domain names here need to match exactly
For example, if the secure domain name we set is 163.com, we can only use it under this domain name. Even the sub-domain more.163.com/ cannot wake up wechat open label, and an error will be reported as launch:fail_check fail
The environment
If you want to wake up the APP, you must use the card generated by the SDK, or use the browsing function of wechat developer tools. Otherwise, launch: Fail will be displayed
For example
Assuming that the address of the card we shared above is 163.com/share, we can wake up the development TAB when we click the card to open the web page, but if we manually input the address of the card 163.com/share into the chat box, and then click the link to open the app, then we will wake up the error.
This is outrageous, the documentation doesn’t say anything!
plan
Wechat support is really a long story, so post my code.
Tags defined
If you use TS like me, the introduction of wechat open label will not be recognized, and an error will be reported, so we need to define it first.
declare namespace JSX { interface IntrinsicElements { 'wx-open-launch-app': any; }}Copy the codeUse the trick
The other is the use of the WX-open-launch-app label. It is stated in the document that if the wakeup event is triggered, the WX-open-launch-app label must be written in the interaction place, that is to say, the APP can only be woken up by clicking the wX-open-launch-app label.
So if we need it in a lot of places, we can’t cover it everywhere, right?
So HERE I used a very clever method: keep the original tag unchanged, package the WX-Open-launch-App tag as a component, introduce components where necessary, and override the original tag through absolute positioning, and achieve priority triggering of the WX-Open-launch-App tag through hierarchy priority.
In addition, the label style of wechat is hidden through the style definition, so that the wechat label does not exist visually to ensure the readability of the original code.
The following code
const WechatOpenApp = (props: any) => { const launchBtn = useRef<HTMLButtonElement>(null!) ; useEffect(() => { if (! IS_WECHAT) { return; } const ready = () => { console.log('wx ready'); }; const launch = (e: any) => { console.log('wx launch', e); }; const error = (e: any) => { console.log('wx error', e); Toast.show({content: 'wechat wake-up service failed, error message:' + e.dail.errmsg,}); }; const ref_ = launchBtn.current; ref_.addEventListener('ready', ready); ref_.addEventListener('launch', launch); ref_.addEventListener('error', error); return () => { ref_.removeEventListener('ready', ready); ref_.removeEventListener('launch', launch); ref_.removeEventListener('error', error); }; } []); const style = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }; return IS_WECHAT ? ( <wx-open-launch-app ref={launchBtn} appid={WECHAT_OPEN_APP_ID} extinfo={encodeURIComponent(location.pathname + location.search)} style={style} > <script type="text/wxtag-template"> <button style={{ opacity: 0, position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, }} ></button> </script> </wx-open-launch-app> ) : null; };Copy the codeThe above code looks a little strange because the wechat tag is style isolated. The styles inside the tag cannot read the external styles, including the class name and so on, so we can only define the inline styles.
Finally, if the follow-up use of relevant questions can leave a message for consultation ~ wechat is really pit ~