For the front-end students of Internet mobile terminal products, webpage jump app is definitely a headache. Here I will not say the various jump scheme, interested students can refer to: juejin.cn/post/684490…

Wechat originally did not support the webpage of non-partners, so it could jump within the app, which may have been ridiculed too much. In July this year, a new function came out, which supports THE H5 webpage to jump through the open label provided by wechat. About the various configurations of the webpage jump app, I will not repeat them here. Please go to the official documents of wechat and talk about the possible pits in the development process. As a sprout new, feeling in addition to configuration a little bit of trouble, other parts or relatively smooth. To sum up, there are three problems, vue framework run times cannot compile open label error, button style, jS-SDK configuration when jsApiList cannot be empty array, whether needed or not.

Vue runs could not compile open labels

React uses the JSX syntax, you need to practice whether this problem will occur. Vue causes compilation errors because it matches non-native HTML tags at run time. Therefore, do not directly write the open tag on the page, should write an open tag parent element, etc component mounted after dynamic insert. The code is as follows:

export function wx_launch(info){ var btns = document.querySelectorAll('#launch-box'); ForEach (BTN =>{let width = btn.clientWidth let height = btn.clientHeight let HTML = '<wx-open-launch-app style="width:100%; height:100%; display:block;" id="launch-btn" appid="wxbffc17d2ef4bb9a7" extinfo="${info}"> <template> <style> .btn { width: ${width}px; height: ${height}px; line-height: ${height}px; Background: rgba (0,0,0,0); text-align: center; font-size: 14px; font-weight: 600; color: #FFFFFF; } </style> <div class="btn">${btn.innerHTML}</div> </template> </wx-open-launch-app>`; btn.innerHTML = html; / / HTML string assignment}) / / click on the button Normal jump triggered var launchs = document. QuerySelectorAll (' launch - BTN); launchs.forEach(launch=>{ launch.addEventListener("launch", function (e) { alert('alert("launch")') }); Launch. AddEventListener ("error", function (e) {if(e.daile.errmsg =='launch:fail'){self.location ='.. /.. /guideDownload.html' } }); })}Copy the code

Here I have wrapped a javascript function myself, which is called when the page mounted.

Button style

Following the above code, we continue with the button style. According to the wechat development document, it is not recommended to write absolute positioning and other styles on the template tag inside the open label. Since most H5 pages are responsive, I will write all the styles on the parent element here. Then set the background of the template style in the open label to background: rgba(0,0,0,0); Since this method can be used in many different scenarios, I get the button prompt dynamically from the innerHtml of the parent element. (When writing the article, I suddenly found that the absolute positioning style can be written in the wechat open label, which has not been practiced, DO not know whether it is good to use, interested partners can have a look)

JsApiList in the JS-SDK configuration cannot be an empty array

This is very simple, which means that in jS-SDK config configuration, configuration item jsApiList must be passed into an API interface, can not be an empty array, because the company’s previous code has not customized functions for wechat, in the development process, we will step on the hole passed an empty array, resulting in the possibility of head loss and increase so a drop

Last but not least, please make sure to get the function ready before launching, because this kind of functional test environment is super difficult to build. Of course, the wechat official will get the debugging tool and test number ready after some time