关注公共号,搜索 "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. 【洛谷 p3372】模板-线段树 1(数据结构--线段树)

    题目:已知一个数列,你需要进行下面两种操作:1.将某区间每一个数加上x:2.求出某区间每一个数的和. 解法:如题,模版题.需要加上 lazy 标记,也就是我的 upd.lazy 标记的思路就是对一个结 ...

  2. hdu5489 Removed Interval

    Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission ...

  3. 2020牛客暑期多校训练营(第二场) F.Fake Maxpooling (单调队列)

    题意:有一个\(n\)x\(m\)的矩阵,\(A_{i,j}=lcm(i,j)\),对于每个\(k\)x\(k\)的子矩阵,其最大元素贡献给答案,求答案的最大值. 题解:矩阵构成我们直接\(i*j/g ...

  4. SSM框架整合(Spring + SpringMVC + MyBatis)

    搭建环境 使用Spring(业务层)整合其他的框架SpringMVC(表现层)和MyBatis(持久层) Spring框架 创建数据库表 CREATE DATABASE ssm; USE ssm; C ...

  5. OpenStack Train版-9.安装neutron网络服务(计算节点)

    在计算节点安装neutron网络服务(computel01计算节点192.168.0.20)安装组件 yum install openstack-neutron-linuxbridge ebtable ...

  6. URAL 1132 Square Root(二次剩余定理)题解

    题意: 求\(x^2 \equiv a \mod p\) 的所有整数解 思路: 二次剩余定理求解. 参考: 二次剩余Cipolla's algorithm学习笔记 板子: //二次剩余,p是奇质数 l ...

  7. vue-cli emit webpack config

    vue-cli emit webpack config 如何暴漏出 vue-cli 的 webpack 配置文件 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章 ...

  8. vue & async mounted

    vue & async mounted refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  9. JavaScript string repeat methods All In One

    JavaScript string repeat methods All In One There are many ways in the ES-Next ways repeat ES2015 / ...

  10. js console API All In One

    js console API All In One const log = console.log; for(const key in console) { log(`navigator.${key} ...