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


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 this指针
Jul 30 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
基于vue.js组件实现分页效果
Dec 29 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的宝库目录--PEAR
2006/10/09 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
python简单猜数游戏实例
2015/07/09 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
python如何写try语句
2020/07/14 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
社区志愿者培训方案
2014/06/10 职场文书
校园安全广播稿范文
2014/09/25 职场文书
入党政审材料范文
2014/12/24 职场文书