微信小程序开发打开另一个小程序的实现方法

微信小程序打开另一个小程序,有两种方法:1.超链接;2.点击按钮。

全局配置:

跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下:

App.json

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

否则会弹出以下错误提示:

超链接实现跳转到小程序:

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: '通过超链接跳转其他小程序成功返回了'
  })
}

相关参数:

属性名 类型 默认值 说明
target String self 设置为miniProgram,则跳转都其他小程序
app-id String   要打开的小程序 appId
path String   打开的页面路径,如果为空则打开首页,可带参数
extra-data Object   需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。详情
version version release 要打开的小程序版本,有效值 develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。
bindsuccess String   跳转小程序成功
bindfail String   跳转小程序失败
bindcomplete String   跳转小程序完成

备注:

1.extra-data必须为Object类型,可以在data中定义,然后模板中引用;

2.version可以为空,以小程序当前环境为准。如果设置有值,则只在当前小程序为非正式版时有效。如果设置为develop,那么最好先用微信预览最新编译过的需要跳转到的小程序,然后再扫码预览原来的小程序。不然的话跳转到的小程序可能不是最新版;

3.bindsuccess回调事件在跳转到小程序返回之后触发,wx.navigateToMiniProgram Api则是在跳转同时触发。

通过按钮单击事件实现:

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: '跳转成功'
    })
   }
  })
 }

相关参数:

属性 类型 默认值 是否必填 说明
appId string   要打开的小程序 appId
path string   打开的页面路径,如果为空则打开首页
extraData object   需要传递给目标小程序的数据,目标小程序可在 App.onLaunch,App.onShow 中获取到这份数据。
envVersion string release 要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版。
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

目标小程序接收来源小程序传递过来的参数:

目标小程序app.js

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

输出:

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

开发者工具调试被打开的小程序时候正确的接收参数:

开发者工具新建编译模式:

输出如下:

注意:

1. 先选择进入场景,输入1037就能快速定位到从小程序进入这个选项,然后就会显示设置appid及extraData的输入框;

2. 尤其要注意extraData的格式,与来源小程序中传递过来的格式都有点不一样,请严格参照下边的代码:

{"from":"xxxxx"}

注意事项:

1.navigateToMiniProgram Api需要用户主动触发跳转,且在跳转至其他小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他小程序。如果用户点击取消,则回调fail cancel;

2.每个小程序可跳转的其他小程序数量限制为不超过 10 个;

3.在开发者工具上调用此 API 并不会真实的跳转到另外的小程序,但是开发者工具会校验本次调用跳转是否成功。

4. 开发者工具上支持被跳转的小程序处理接收参数的调试

到此这篇关于微信小程序开发打开另一个小程序的实现方法的文章就介绍到这了,更多相关小程序打开另一个小程序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序新手教程之页面打开数量限制

    前言 众所周知,无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页面的数量.在某些设计下,比如一个商品详情页面中会推荐其他的商品,这些商品点进去就是详情页面.详情页面中又有推荐,又可以点进去.这样重复下去打开的页面就会越来越多. 如果不做限制,当打开数量到一定程度的时候肯定会卡死了.在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面. 之前出现这个问

  • 微信小程序实现打开并下载服务器上面的pdf文件到手机

    谈一谈ios的bug: 关于ios系统的bug这块也是快把柚子给逼疯了啊,ios系统是没有文件管理的,柚子用了很多办法,最后终于确定不管用什么办法ios都是实现不了下载的,只能实现在线查看.所以没办法,如果不考虑兼容ios的话,是很简单就能解决的,但是我想没有哪一个小程序会不让你兼容ios的吧! 先看一下不兼容ios系统的下载柚子是怎么实现的吧: 首先我们需要在页面里写入一个按钮,用来触发pdf的打开和下载,写上点击事件 //查看并下载 See_download() { wx.downloadF

  • 微信小程序实现打开内置地图功能【附源码下载】

    本文实例讲述了微信小程序实现打开内置地图功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml布局文件代码 <button type="default" bindtap="openMap">打开地图</button> index.js逻辑文件代码 Page({ openMap:function(){ wx.getLocation({ type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,

  • 微信小程序开发打开另一个小程序的实现方法

    微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] } 否则会弹出以下错误提示: 超链接实现跳转到小程序: demo.wxml <navigator target="miniProgram&quo

  • mpvue微信小程序开发之实现一个弹幕评论

    先上图 就是一个简单的弹幕发送功能 弹幕区的页面: <div class="content" v-show="doommData.length"> <div class="textLeft"></div> <div class="textItem"> <p class="text aon" v-if="item.display" v-

  • 微信小程序开发之实现一个跑步小程序

    目录 地图组件 当前位置 开始跑步按钮 GPS定位 设置前后台允许获取定位 开启前后台定位 绘制路线 自己动手实现一个跑步小程序 用到的方法:wx.onLocationChange,监听实时地理位置变化事件,需结合 wx.startLocationUpdateBackground,wx.startLocationUpdate使用. 地图组件 定义一个全屏的地图,地图配置项经纬度(longitude,latitude),缩放(scale),标记点(markers),路线(polyline)等 <v

  • php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法

    实例如下: <? //include_once("inc/auth.inc.php"); include_once("inc/conn.php"); $HTML_PAGE_TITLE = _("运行"); include_once("inc/header.inc.php"); //路径如下 /* http://127.0.0.1/general/winexe/exe1.php?PROG=C:/Program Files

  • 在类库或winform项目中打开另一个winform项目窗体的方法

    本文实例讲述了在类库或winform项目中打开另一个winform项目窗体的方法.分享给大家供大家参考.具体如下: 一.问题: 假设类库或winform项目为A,另一个winform项目为B.那麽在A中添加一个接口,里面有一个Show方法,然后在B中写一个类b继承这个接口,并重写这个方法,具体内容为弹出某个窗体.然后在A中另一个类a中实例化B中的b类,并把它赋给A中的接口,然后调用接口的Show方法就可以弹出B中指定的窗体. 需要注意的是项目A和项目B需要互相引入对方的EXE或DLL文件. 二.

  • 微信小程序开发之获取用户信息的两种方法

    今天介绍两种微信小程序获取用户信息的方法 第一中直接授权获取(在同一页面之中): 首先在微信程序一个页面的WXML文件写入获取用户信息的按钮 <!-- bindTap用于绑定事件 --> <button type="default" bindtap="getUserInfor"> 登录</button> <!-- 展示获取到的用户信息 --> <image src="{{userinfor.avatar

  • 解决C#程序只允许运行一个实例的几种方法详解

    本文和大家讲一下如何使用C#来创建系统中只能有该程序的一个实例运行.要实现程序的互斥,通常有下面几种方式,下面用 C# 语言来实现:方法一:使用线程互斥变量. 通过定义互斥变量来判断是否已运行实例.把program.cs文件里的Main()函数改为如下代码: 复制代码 代码如下: using System;using System.Windows.Forms;using System.Runtime.InteropServices;namespace NetTools{    static cl

  • 微信小程序(微信应用号)开发工具0.9版安装详细教程

    微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号) 声明 •微信小程序开发工具类似于一个轻量级的IDE集成开发环境,目前仅开放给了少部分受微信官方邀请的人士(据说仅200个名额)进行内测,因此目前未受到邀请的人士只能使用破解版: •本破解版资源来自于网上,与本人无关,仅供技术开发人员研究之用: •由于尚属内测阶段,因此迭代更新非常快,后续很可能由于升级而导致暂时无法使用. 特别注意 •由于目前发布的0.9版本必须验证才能登录(估计是为了验证是否为内测人士),因此必须先

  • 微信小程序开发之组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为template使用,可以方便计算各种属性而不是在wxml引入wxs 在日常的小程序开发组件过程中,我一般会遵循如下几个规则: 1.样式独立 & 依赖独立 在组件开发过程中,组件可以依赖于全局样式,组件在引入时,使用该页面样式和全局样式共同渲染. options: { addGlobalClass: tru

  • 零基础入门篇之Linux及Arm-Linux程序开发笔记

    前言:本文记录了自己从一个完全不懂Linux的人如何一步步学会Linux程序开发的过程.当然也希望本文能够达到它的目的,让那些和我一样没有任何基础的人也能快速入门Linux程序开发. 一.Arm-Linux程序开发平台简要介绍 Arm-Linux程序的开发并不像我们以前接触的Windows程序开发那样,关于平台的搭建就繁琐很多,所以在正式进入程序开发之前先对这种开发模式进行简要介绍,让一个即使没有任何Linux开发经验的程序员也能够看懂后面的内容. 1.1程序开发所需系统及开发语言 开发arm-

随机推荐