WeChat applet development to open another applet realization method

There are two ways to open another WeChat Mini Program: 1. Hyperlink; 2. Click the button.

Global configuration:

To jump to other applets, you need to configure the list of applets that need to be jumped in the current applet global configuration. The code is as follows:

App.json

{
 ...
 "navigateToMiniProgramAppIdList": [
  "wxe5f52902cf4de896"
 ]
}

Otherwise, the following error message will pop up:

Hyperlink realizes jump to applet:

demo.wxml

<navigator
 target="miniProgram"
 open-type="navigate"
 app-id="wxdbcxxxxxxxx985f"
 path="pages/index/index?goods_id=201"
 extra-data="{
   
   {extraData}}"
 version="develop"
 bindsuccess="toMiniProgramSuccess">点击超链接打开绑定的小程序</navigator>

demo.js

data:{
　　extraData: {
　　　　from: '优享新可能nav'
　　}
}
... 
toMiniProgramSuccess(res){
  //从其他小程序返回的时候触发
  wx.showToast({
   title: '通过超链接跳转其他小程序成功返回了'
  })
}

Related parameters:

Attribute name	Types of	Defaults	Description
target	String	self	Set to miniProgram, then jump to other small programs
app-id	String		AppId of the applet to be opened
path	String		The path of the opened page, if it is empty, the home page will be opened, with parameters
extra-data	Object		The data that needs to be passed to the target applet, the target applet can get this data in App.onLaunch(), App.onShow(). Details
version	version	release	The version of the applet to be opened, the effective values are develop (development version), trial (experience version), release (official version), this parameter is valid only when the current applet is the development version or the experience version; if the current applet is the official version , The open applet must be the official version.
bindsuccess	String		Jump to applet successfully
bindfail	String		Failed to jump to applet
bindcomplete	String		Jump to applet completed

Remarks:

1. The extra-data must be of Object type, which can be defined in data and then referenced in the template;

2. version can be empty, subject to the current environment of the applet. If a value is set, it will only be effective when the current applet is an informal version. If it is set to develop, it is best to use WeChat to preview the newly compiled applet that needs to be jumped to, and then scan the code to preview the original applet. Otherwise, the applet you jumped to may not be the latest version;

3. The bindsuccess callback event is triggered after the jump to the mini program and the wx.navigateToMiniProgram Api is triggered at the same time as the jump.

Through the button click event:

demo.wxml

<button bindtap='navigateToMiniProgram'>
点击按钮打开其他小程序
</button>

demo.js

navigateToMiniProgram(){
  wx.navigateToMiniProgram({
   appId: 'wxdbcxxxxx985f',
   path: 'pages/index/index?goods_id=201',
   extraData: {
    from: 'xxxxx'
   },
   envVersion: 'develop',
   success(res) {
    // 打开其他小程序成功同步触发
    wx.showToast({
     title: '跳转成功'
    })
   }
  })
 }

Related parameters:

Attributes	Types of	Defaults	Is it required	Description
appId	string		Yes	AppId of the applet to be opened
path	string		no	The path of the opened page, if it is empty, open the homepage
extraData	object		no	The data that needs to be passed to the target applet, the target applet can get this data in App.onLaunch and App.onShow.
envVersion	string	release	no	The version of the applet to open. This parameter is valid only when the current applet is the development version or the trial version. If the current applet is the official version, the open applet must be the official version.
success	function		no	Callback function for successful interface call
fail	function		no	Callback function for interface call failure
complete	function		no	The callback function for the end of the interface call (the call will be executed if it succeeds or fails)

The target applet receives the parameters passed by the source applet:

Target applet app.js

App({
 onLaunch: function (options) {
  console.log("referrerInfo:::", options.referrerInfo)
 }
  ...
})

Output:

{"appId":"wxcc41e47562b08129","extraData":{"from":"xxxxx"}}

The developer tool correctly receives the parameters when debugging the opened applet:

Developer Tools New Compilation Mode:

The output is as follows:

note:

1. First choose to enter the scene, enter 1037 to quickly locate the option to enter from the mini program, and then the input box for setting appid and extraData will be displayed;

2. Pay special attention to the format of extraData, which is slightly different from the format passed in from the source applet. Please strictly refer to the following code:

{"from":"xxxxx"}

Precautions:

1. NavigateToMiniProgram Api requires the user to actively trigger the jump, and before jumping to other applets, a unified pop-up window will be added to ask whether to jump, and the user can jump to other applets after confirming. Call back if the user clicks to cancelfail cancel；

2. The number of other applets that each applet can jump to is limited to no more than 10;

3. Calling this API on the developer tool will not actually jump to another applet, but the developer tool will verify whether the call to jump is successful.

4. The developer tool supports the debugging of the jumped applet to process the received parameters .

WeChat applet development to open another applet realization method

Guess you like