关注公共号,搜索 "APP跳转小程序,小程序跳转APP",查看原文

前置条件:

  1. 开发环境:windows

  2. 开发框架:uni-app , H5+,nativeJS,mpvue

  3. 编辑器:HbuilderX

4. 兼容版本:安卓已作测试,IOS未测试

App开发用的是uni-app

小程序开发用的是mpvue

1.  APP 跳转小程序

文档地址:

https://uniapp.dcloud.io/api/plugins/share

相关错误代码:

https://ask.dcloud.net.cn/article/287

1.1 首先需要在微信开放者平台将APP和微信小程序关联起来

1.2 如果需要APP直接跳转小程序,小程序内无需其他操作和参数传递,建议调用示例代码中 toweChats 方法;如果从APP内跳转到小程序,需要做一些逻辑操作和传递参数,建议使用示例代码中 shareWeChats 方法

1.3 shareWeChats 里面的参数建议从后端获取,这样方便维护

1.4 使用 shareWeChats 方法跳转APP传参,如果小程序内没有接收到传递的参数,可以在miniProgram对象里面添加 query:"" 的属性,小程序那边成功接收到参数以后,就可删除 query 属性了

2. 在APP内:需要跳转到小程序的页面调用如下代码:

2.1 此处跳转到小程序的index页面,传递的参数是 pid=49&name=云上的日子

// APP 跳转小程序
var appToWtchats={
// 直接跳转跳转到微信小程序(直接跳转,小程序无法返回到APP)
toweChats:function(appId){
if(appId==undefined){
appId="gh_123456";
}
//获取当前显示的webview
var pages = getCurrentPages()
var page = pages[pages.length - 1]
var currentWebview = page.$getAppWebview()
//调用H5+APP的扩展API
var shares=null;
// let that = this
var pusher = plus.share.getServices(function(s){
shares={};
for(var i in s){
var t=s[i];
shares[t.id]=t;
}
var sweixin=shares['weixin'];
// 此处appId为小程序的原始id
sweixin.launchMiniProgram({
id:appId //要跳转小程序的原始ID
})
}, function(e){
console.log("获取分享服务列表失败:"+e.message);
});
//放入当前的webview
currentWebview.append(pusher);
},
// app 分享到小程序(小程序可以返回到APP)
shareWeChats:function(obj){
obj = obj || {}
uni.share({
provider:'weixin',
// 分享出去的场景 WXSceneSession、WXSenceTimeline
scene:obj.scene || "WXSceneSession",
/*
分享形式 0 图文 5小程序
仅支持分享微信小程序到微信聊天界面,想进入朋友圈需改为分享图片方式,在图片中包含小程序码。一般通过canvas绘制图片,插件市场有很多生成图片的插件
https://uniapp.dcloud.io/api/plugins/share
*/
type:obj.type || 5,
// 缩略图,小于20Kb的图片
imageUrl:obj.imageUrl || 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
// 分享标题
title:obj.title || '欢迎体验地毯汇小程序',
miniProgram: {
// 小程序原始ID
id:obj.miniProgram.id || 'gh_2bcfe97e74d5',
/*
小程序打开的页面,路径以pages/index开头
*/
path:obj.miniProgram.path || 'pages/index/main?pid=49&name=云上的日子',
// 微信小程序版本类型,可取值:0-正式版;1-测试版;2-体验版。默认值为0。
type:obj.miniProgram.type || 2,
query:"",
/*
兼容低版本的网页链接
微信公众平台里面配置的域名或者接口,webUrl必传,可以为空
webUrl 属性不存在,会无法分享
*/
webUrl:obj.miniProgram.webUrl || 'https://www.123456.net'
},
success: ret => {
console.log("分享到小程序成功",ret);
},
fail: err => {
console.log("分享到小程序失败",err);
}
});
}
}

3. 小程序跳转APP

3.1 在小程序页面周期函数,onLoad里面接收app内传递过来的参数

3.2 小程序跳转APP,必须是从APP分享出来的小程序页面,小程序无法直接跳转APP

文档地址:
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html

在小程序内:需要跳转到APP使用如下代码:

// 在小程序内
// index页面
<button open-type="launchApp" app-parameter="小程序传递过来的参数" @error="launchAppError">跳转APP</button>
// js
onLoad(e) {
console.log("app内传递到小程序的参数的参数", e)
},
methods: {
// 监听小程序跳转APP发生错误
launchAppError(e) {
console.log("打开APP", e)
}
}

4. app内获取小程序传递的参数,在onShow里面执行如下代码:

4.1 通过 plus.runtime.arguments 获取小程序内传递来的参数

文档地址:
https://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.arguments

相关博文:

https://ask.dcloud.net.cn/question/65322

// app内
// index页面
onShow() {
console.log("接收小程序传递过来的参数1",plus.runtime.arguments);
},

APP跳转小程序,小程序跳转APP的更多相关文章

  1. 从“跳一跳”来看微信小程序的未来

    从“跳一跳”来看微信小程序的未来   相信大家这两天都被微信新推出的小程序跳一跳刷爆了朋友圈,为了方便用户在使用过程中切换小程序,微信在这次6.6.1版本中加入了下拉可快速切换小程序的功能,而“跳一跳 ...

  2. 小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名

    小程序点击跳转外部页面 1.index.wxml  添加点击事件   标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitat ...

  3. 关于微信小程序的动态跳转

    最近在研究微信小程序.在做一个简单的购物小程序时,遇到一个问题:如何通过扫码实现动态的跳转页面功能, 通过研究终于找到了解决方法: 首先当然要实现扫码解析功能js的代码: click: functio ...

  4. 从A小程序跳转到B小程序

    从A小程序跳转到B小程序: A小程序 wxml: <navigator target="miniProgram" open-type="navigate" ...

  5. 微信小程序和微信小程序之间的跳转和传参示例代码附讲解

    一:微信小程序跳转 使用限制 需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序. 需要用户确认跳转 从 2.3.0 版本开始,在 ...

  6. 微信小程序开发-小程序之间的跳转

    前几天开发微信小程序,其中有个需要联动宣传的业务,就是正在开发的小程序跳转到别的小程序去, 然后去看了下大家的做法与看法,总结下这小程序跳转之间应该注意到的几个问题 首先是跳转的方法, https:/ ...

  7. 微信小程序中跳转另一个小程序

    wx.navigateToMiniProgram({ appId: 'xxxxxxxxxxxxxxxxxx', // 要跳转的小程序的appid path: 'page/index/index', / ...

  8. 浅析微信支付:微信支付简单介绍(小程序、公众号、App、H5)

    本文是[浅析微信支付]系列文章的第二篇,主要讲解一下普通商户接入的支付方式以及其中的不同之处. 上篇文章讲了本系列的大纲,没有看过的朋友们可以看一下. 浅析微信支付:前篇大纲 微信支付是集成在微信客户 ...

  9. 林兴爆料小程序很快可以支持各个 App 直接打开小程序

    在微信开放平台基础高级产品经理林兴演讲的当场,他爆料了微信小程序一个轰动性新能力:小程序很快可以支持各个 App 直接打开小程序!没错,你没有听错,简单来说,在不久以后,所有的 App 里面都可以看到 ...

  10. 小程序之程序构造器App()

    onLaunch / onShow / onHide 三个回调是App实例的生命周期函数 “小程序”指的是产品层面的程序,而“程序”指的是代码层面的程序实例,为了避免误解,下文采用App来代替代码层面 ...

随机推荐

  1. hdu5233 Gunner II

    Problem Description Long long ago, there was a gunner whose name is Jack. He likes to go hunting ver ...

  2. Codeforces Round #479 (Div. 3) F. Consecutive Subsequence (DP)

    题意:给你一个长度为\(n\)的序列,求一个最长的\({x,x+1,x+2,.....,x+k-1}\)的序列,输出它的长度以及每个数在原序列的位置. 题解:因为这题有个限定条件,最长序列是公差为\( ...

  3. ef学习记录

    EF Core (EntityFramework Core)是实体关系映射(O/RM)数据库访问框架.这个模式的好处就是让开发人员可以用对象模型来操作数据库,这是一种对开发人员较为友好的方式. O/R ...

  4. kubernetes进阶(三)服务发现-coredns

    服务发现,说白了就是服务(应用)之间相互定位的过程. 服务发现需要解决的问题: 1.服务动态性强--容器在k8s中ip变化或迁移 2.更新发布频繁--版本迭代快 3.支持自动伸缩--大促或流量高峰 我 ...

  5. Hive Tutorial 阅读记录

    Hive Tutorial 目录 Hive Tutorial 1.Concepts 1.1.What Is Hive 1.2.What Hive Is NOT 1.3.Getting Started ...

  6. 2020 Web 全栈面经

    2020 Web 全栈面经 1.简历 2. 技术 3. 项目 4. 架构 5. 沟通,协作 6.成长 7. 面试技巧 准备 电话确认,面试流程,五险一金缴纳情况 有无笔试,几轮,面试时间,答复时间 细 ...

  7. React Component All In One

    React Component All In One https://reactjs.org/docs/react-api.html#components React Class Component ...

  8. JS Object Deep Copy & 深拷贝

    JS Object Deep Copy & 深拷贝 针对深度拷贝,需要使用其他方法 JSON.parse(JSON.stringify(obj));,因为 Object.assign() 拷贝 ...

  9. js array contains All In One

    js array contains All In One includes & contains & has Array.prototype.contains "use st ...

  10. WebVR & CSS 3D & WebGL

    WebVR & CSS 3D & WebGL VR https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API https:/ ...