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


Posted in Javascript onMay 17, 2020

微信小程序打开另一个小程序,有两种方法: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. 开发者工具上支持被跳转的小程序处理接收参数的调试。

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

Javascript 相关文章推荐
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
js实现音乐播放控制条
Sep 09 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 #Javascript
关于AngularJS中几种Providers的区别总结
May 17 #Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 #Javascript
JavaScript链式调用原理与实现方法详解
May 16 #Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 #Javascript
JavaScript接口实现方法实例分析
May 16 #Javascript
JavaScript 类的封装操作示例详解
May 16 #Javascript
You might like
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
浅谈php的优缺点
2015/07/14 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
总结js函数相关知识点
2018/02/27 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
Python封装shell命令实例分析
2015/05/05 Python
简单谈谈Python流程控制语句
2016/12/04 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
美国保健品专家:Life Extension
2018/05/04 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
应届生.NET方向面试题
2015/05/23 面试题
春节联欢晚会主持词
2014/03/24 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
商铺门前三包责任书
2014/07/25 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
童年读书笔记
2015/06/26 职场文书
朋友离别感言
2015/08/04 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle