时间:2021-05-18
微信小程序打开另一个小程序,有两种方法: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. 开发者工具上支持被跳转的小程序处理接收参数的调试。
到此这篇关于微信小程序开发打开另一个小程序的实现方法的文章就介绍到这了,更多相关小程序打开另一个小程序内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序的开发可以直接交给开发人员,但是微信推广却难倒了许多的门外汉,那么微信小程序有哪些推广方式呢?一、小程序跳转小程序跳转就是从一个小程序跳转到另一个小程
微信小程序出来之前,二维码已经进入我们的生活,被我们所熟知、接纳。而微信小程序的诞生,势必将扫码的服务推到另一个高潮。微信小程序则在尝试着:以二维码为桥梁完成线
相关文章阅读:微信小程序怎么打开微信小程序在哪里进入怎么安装微信小程序开发微信小程序开发安装教程微信小程序怎么申请注册微信小程序官方注册图文流程首先,我们必须先
现在提到小程序,做的较好的大概只有两个,一个是游戏,另一是电商,因为小程序先由微信开发的,捣鼓来捣鼓去,微信小程序的游戏让小程序达到了高潮;电商小程序的崛起,是
外卖小程序开发制作的方法是(以微信小程序为例): 1、打开微信小程序开发工具,开始制作小程序。首先需要搭建小程序的框架,一般外卖小程序的框架分为招牌菜的轮播图