Public number/H5 jump to mini program pit filling guide
This article introduces how to use the wechat open hashtags WX-open-launch-appellate to realize web page reconnection to any legitimate mini programs in the wechat browser. The official wechat version is 7.0.12 or above, and the operating system version is iOS 10.3 or above, Android 5.0 or above. Without further ado, first paste the official document: open label description document
One. Preparation
Before writing the code, you must handle the configuration properly to avoid unpleasant subsequent operations.
Step 1: Bind the domain name
The loginWechat management backgroundAdd the interface domain name for your JS request under Development – Development Management – Development Settings – Service domain name.
Step 2: Import the JS file
There are two ways to introduce JS files into your project. Method 1: Use script tags in HTML
<script type="text/javascript" src="Https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
Copy the codeMode 2: NPM installation
npm install weixin-js-sdk-ts
Copy the codeUse: import wx from ” weixin-js-sdK-ts ‘; Vue.prototype.wx = wx
Step 3: Verify the configuration through the Config interface injection permission and apply for the required open label
This step is very critical. The config information should be obtained before calling the wechat JS interface. The same URL only needs to be called once.
wx.config({
debug: true.// If debug mode is enabled, the return value of all API calls will be displayed in the client alert. If you want to view the parameters passed in, you can open it in the PC, and the parameter information will be printed in the log.
appId: ' '.// Mandatory, the unique identifier of the public account
timestamp:,// Mandatory to generate the timestamp of the signature
nonceStr: ' '.// Mandatory to generate a random string of signatures
signature: ' '.// Mandatory, signature
jsApiList: [].// Mandatory, a list of JS interfaces to use, such as ['onMenuShareTimeline','onMenuShareAppMessage']
openTagList: [] // Optional list of open labels to use, e.g. ['wx-open-launch-app']
})
Copy the codeSignature signature is obtained from the developer server.
The four steps to obtain a signature are as follows: Step 1: Obtain access_token using appId and appSecret (usually cached globally by the developer server, valid for 7200 seconds, to obtain accessToken) Step 2: Obtaining the jSAPi_ticket temporary ticket using the Access_Token Step 3: Combine the string using the timestamp, random number, jSAPi_ticket, and url to access according to the signature algorithm. Step 4: Encrypt the string in step 3 with SHA1 to obtain the signature. Note: 1. The noncestr and TIMESTAMP used for signature must be the same as noncestr and TIMESTAMP in wx.config. 2. The url used for the signature must be the complete URL of the page that invokes the JS interface, excluding the one after #. For details, please go here (wechat JS-SDK for signature)
Step 4: Verify success with ready/error
After the above processing, you can use the wx.ready method to handle the results of success and the wx.error method to handle the results of failure. Normally, if debug is enabled, the Alert window should pop up, and if config: OK is displayed, the configuration is successful.
Tip: If you do not have an account, you can apply for a wechat test account in the wechat public background, and you can call most of the JS interface.
Share applets using WX-open-launch-pervasive
To use WX-open-launch-pervasive tags where redirects are needed, the tags must first be registered in the openTagList of wx.config. Username is the original Id of the small program to jump to, starting with GH, not wx (APP shares the small program with the appId starting with GH). Path is the specified page of the applet. This parameter is not mandatory. The default path is the home page of the applet. /pages/list = /pages/list.html = /pages/list.html = /pages/list.html Concatenation parameters are available in app.js, onLoad, onShow of the specified page.
The official demo looks like this, where the jump button is wrapped in a template tag, in the form of a slot.
<wx-open-launch-weapp
id="launch-btn"
username="gh_XXXX"
:path="path"
>
<template>
<img src="/images/live/[email protected]" alt="">
<span>Wechat applets</span>
</template>
</wx-open-launch-weapp>
<! -- path: `/packages/live/watch.html? liveId=XXX`-->
Copy the codeTo get ACCESS to WX-open-launch-pervasive P during browser debugging, add the following code in the main section of vue programs:
Vue.config.ignoredElements = ['wx-open-launch-weapp']
Copy the codeHowever, the above code does not work on the real machine, probably because it conflicts with the template tag in Vue, so template is changed to a script tag.
<script type='text/wxtag-template'></script>
Copy the codeNote: Inside the script tag, it is isolated from the page, and should be written as a small program, such as the view tag used above, and the image file should be base64. In addition, the style should also be written inside the script tag, in the style form. If you’re writing it inside a popover, you have to pay attention to the hierarchy.
If the following popover appears, it is successful. But also make sure that the page is specified.
conclusion
If you use THE WX-open-launch-appellatory tag, you need to configure the config information and add the WX-Open-launch-appellatory tag to appellatory programs. Only authenticated service number and bound domain name or authenticated small program cloud development static hosting domain name can jump, subscription number is not supported at present.
Troubleshooting: No effect/error?
1. Enable the debugging of wx.config and process the error information step by step until config: OK is displayed.
2. A component is not registered an error in the app. Js configuration inside Vue. Config. IgnoredElements = [‘ wx – open – launch – weapp ‘]. 3. Does the button on the real phone not display? Is there injection in wx.config? Template tag conflict? Hierarchy style problem?
4. Style issues? If it is a Vue project, the style is also written in the script tag, if it is other, wrapped in template, the style is written in the HTML tag
5. Failed to jump? Use the LANch or error method in THE WX-open-launch-syndrome tag to determine whether a retry is successful
6. Compatibility issues? Vue project uses history routing, does it not work on ios? The reason: In ios, wechat will cache the address of the page entered for the first time. If you jump from the level 1 page of wechat to the level 2 page, the page will not be refreshed because vUE is a single-page application, and the routing address of VUE is changed, which is inconsistent with the address cached by wechat. Therefore, if the url imported during wxConfig is inconsistent with the url cached by wechat, JSDK fails to be invoked, and WX-open-launch-regenerative P fails to take effect. Solution:
// Refresh the current page
reloadPage() {
if(!this.isIos) return;
const currUrl = location.href;
const isReload = currUrl.indexOf("? reload=1") > -1 ? true : false;
if(! isReload) { location.replace(currUrl +"? reload=1"); }},Copy the codeextension
1. Other ways for the public to jump small procedures
- Public account custom menu bar set small program link
- Jump to applets via customer service messages, subscription messages, template messages
- In the public article by small program code or small program card jump to small program
- Jump to the applet through the card
2. Small program jump to the public number article/embedded H5
- Use web-view to open articles or jump to web pages.
- Follow components using the official-Account public id
H5 return small program: web – view web pages using js – SDK provides the interface wx. MiniProgram. NavigateTo directly click on cell phone back, let it automatically according to the hierarchical return;
3. Applet Jumps to applet
- Use the Wx. navigateToMiniProgram interface to automatically jump to other applets
4.App opens the applet
- Mobile application (APP) pull up applet function
5. Small program jumps to APP
- Set button component open-type to launchApp.
6. Jump to APP from official account/wechat webpage H5
- Use the WX-open-launch-app tag