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


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 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
微信小程序开发之获取用户手机号码(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校验ISBN码的函数代码
2011/01/17 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
jQuery 使用个人心得
2009/02/26 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Python通过socketserver处理多个链接
2020/03/18 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
如何执行一个shell程序
2012/11/23 面试题
求职信范文怎么写
2014/01/29 职场文书
软件项目实施计划书
2014/05/02 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
博士生导师推荐信
2014/07/08 职场文书
班主任寄语2015
2015/02/26 职场文书
大学生团日活动总结
2015/05/06 职场文书
商业计划书之服装
2019/09/09 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Redis唯一ID生成器的实现
2022/07/07 Redis
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers