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


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 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 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中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
Python正则表达式使用范例分享
2016/12/04 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
python sys.argv[]用法实例详解
2018/05/25 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
python中取绝对值简单方法总结
2020/07/24 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
高二生物教学反思
2014/01/27 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2014年个人售房协议书
2014/10/30 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
Python中文纠错的简单实现
2021/07/07 Python
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫