This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

This article will show you all the ways you can jump into small programs to help you solve your business needs.

The content is more exciting, it is suggested to like, collect, and then continue to see

Wechat browser jump small program

usewx-open-launch-weappLabel jump

  • Prerequisites to be aware ofMore documentation details
    1. With the authenticated service number, log in to the wechat public platform, enter the “Public Account Setting”, and fill in the “JS Interface security Domain name” in the “Function Setting”.
    2. Authenticated non-individual subject applets, using applets cloud developed static web hosting bound under the domain name of the web page, can use this label jump to any legal compliance applets
    3. Need to call in JS interface pages to introduce the following JS file: res.wx.qq.com/open/js/jwe… (HTTPS is supported)
    4. In the same way as using jS-SDK configuration, all pages that need to use open tags must first inject configuration information and passopenTagListField application requires an open tag that would otherwise be unavailable (the same URL only needs to be called once). The open label application and the JS interface application are independent, so they can be applied at the same time.
    wx.config({
  debug: true.// If the debug mode is enabled, the return values of all API calls will be displayed on the client alert. If you want to view the parameters passed in, you can enable the debug mode on the PC, and the parameter information will be printed through the log, only on the PC will be printed
  appId: ' '.// Mandatory, the unique identifier of the official number
  timestamp:,// Required to generate a timestamp for the signature
  nonceStr: ' '.// Required to generate a random string of signatures
  signature: ' '.// Required, signature
  jsApiList: [].// Mandatory list of required JS interfaces
  openTagList: [] // Optional list of open tags to use, for example ['wx-open-launch-app']
});
Copy the code
    1. The service can be used only after the ready interface is successfully verifiedwx-open-launch-weapp
  • Complete the above steps to usewx-open-launch-weapp, the use method is as follows:
<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index? user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">Open the applet</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch'.function (e) {
    console.log('success');
  });
  btn.addEventListener('error'.function (e) {
    console.log('fail', e.detail);
  });
</script>
Copy the code
  • Matters needing attention
    1. An open label is a user-defined label. Vue will give warnings to unknown labels. You can configure themVue.config.ignoredElementsTo ignore Vue’s check for open labels
    Vue.config.ignoredElements = ['wx-open-launch-app'.'wx-open-launch-weapp'];
Copy the code
    1. If you use a label that allows you to provide slots, you need to be careful to define the style of the template in the slot because the style of the template in the slot is isolated from the page. Slot templates and styles need to be passed<script type="text/wxtag-template"></script>Carry out the package. In addition, the named slot also needs to be passedslotProperty specifies the slot name. The default slot in the following label slot is the default slot. You do not need to specify the slot name.
    2. Styles related to layout and positioning on a page, such asposition: fixed; top -100;, try not to write in the slot template node, please declare in the label or its parent node;
    3. For pages that have CSP requirements, you need to add a whitelistframe-src https://*.qq.com webcompt:In order to normally use the open TAB on the page
    4. Wechat version must be 7.0.12 or later. The operating system must be iOS 10.3 or later and Android 5.0 or later.
  • test
    1. Now test this development tag has been very humane, you can directly use the wechat development tools of the public account webpage debugging can immediately see the effect (advance is to complete the above prerequisites)

useURL SchemeLink jump applet

  • To obtainURL SchemeThere are two ways to link

    Method one:By logging into the public platform,Small program management background”Tools” – “Generate URL Scheme” entry can get the URL Scheme of any page to open the applet (the location is in the upper right corner after login), you can fill in the page address and parameters you need to jump to the applet, click “Generate”



Method 2:Through the small program API interface server to generate the URL Scheme short address, the corresponding parameters can be configuredThe document details

  • How to use
    1. Generate a short link, you can set the effective time, test as long as possible
    2. The iOS system supports URL Scheme identification. You can use the Scheme to jump to applets in application scenarios such as SHORT messages
    3. Android system does not support direct recognition of URL Scheme, and users cannot normally open applet through Scheme. Developers need to use H5 page to transfer, and then jump to Scheme to open applet. For convenience, we write a H5 page and jump to the applet we need through script, as follows:
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>.</title>
</head>
<body>
    <button onclick="bintop()">If the jump fails, click the button</button>
</body>
<script>
    window.onload=function runoob(){
      bintop();
    }
    function bintop (e) {
        window.location.href = "weixin://dl/business/? t=2Uq63aGbY9r"
    }
</script>
</html>
Copy the code
  • test
    1. This short link now supports non-wechat browser and wechat browser, testing is very convenient
    2. In addition to this generating short link, there is another similar oneURL link, the short link may be strong, but the precondition is to use the applet cloud development, which can be generated through applet cloud developmentClick on me for details

Nested applet H5 jumps back to the applet page

  • How do small programs nest H5
    • Write on the native pageweb-viewLabel, throughsrcProperty to introduce the required H5 link
  • Jump back to applets native
    1. You can use the interface provided by JSSDK 1.3.2 (recommended to use jSSDK1.6.0 or above) to return the applet page in the Web-view page
    2. From WeChat7.0.0To begin with, you can judgeuserAgentContained in theminiProgramWord to determine the applet web-View environment
    3. Determine the current small program environment can use the API provided by wechat jump, as follows
    / / < script type = "text/javascript" SRC = "https://res.wx.qq.com/open/js/jweixin-1.3.2.js" > < / script >
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })
Copy the code
  • The ginseng
    1. Small program can only be one-way or certain conditions to trigger parameters back to the small program, can not write js as usual, the point under the event can be passed back to the native small program
    2. Applet provisionbindmessageMethod receives the return parameter of a web page, but at some point in the lifecycle

    When a web page postMessage to a applet, it triggers and receives the message at specific times (applet back, component destruction, share). E.trace = {data}, where data is an array of postMessage arguments 

    <web-view SRC =" bindMessage =" "bindMessage "></web-view> // js partial bindMessage (){}Copy the code
  • useweb-viewMatters needing attention
    1. The iframe domain name on the web page must also be added to the whitelist
    2. On developer tools, you can open web-View component debugging by right-clicking on the web-View component
    3. You can only have one Web-View per page, and the Web-View automatically fills the entire page and overrides other components
    4. There is no support for communication between web pages and applets other than the interface provided by the JSSDK
    5. In iOS, if JSSDK interface calls do not respond, you can add #wechat_redirect to the SRC of the web-view to resolve the problem
    6. Avoid Chinese characters in links, which will open white screen in iOS. It is suggested to add encodeURIComponent

conclusion

Article has introduced the WeChat environment to the WeChat jump small application method of the environment, as long as according to the article content hints and pay attention to the basic won’t have too many questions, because these have been relatively stable function, usually get too much of a pit, if you have other questions or would like to know the other content of small programs, you can leave a message ~ I will update you want time article

I’m done with it. Like it. Thank you