关注公共号,搜索 "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. CF-1354 E. Graph Coloring(二分图,背包,背包方案输出)

    E. Graph Coloring 链接 n个点m条边的无向图,不保证联通,给每个点标号1,2,3.1号点个数n1,2号点个数n2,3号点个数n3.且每条边的两点,标号之差绝对值为1.如果有合法方案, ...

  2. POJ-2411 Mondriann's Dream (状压DP)

    求把\(N*M(1\le N,M \le 11)\) 的棋盘分割成若干个\(1\times 2\) 的长方形,有多少种方案.例如当 \(N=2,M=4\)时,共有5种方案.当\(N=2,M=3\)时, ...

  3. UVALive 7146

    Long long ago there is a strong tribe living on the earth. They always have wars and eonquer others. ...

  4. 牛客的两道dfs

    1.传送门:牛客13594-选择困难症 题意:给你k类物品,每类物品有a[i]个每个物品都有一个value,每类物品最多选一个,要求有多少种选法使得总value>m(没要求每类物品都必须选) 题 ...

  5. Round Numbers POJ - 3252

    题意: 如果你个数的二进制中1的个数要小于等于0的个数,那么这个数就符合题意.现在要你找出来区间[li,ri]这个区间内有多少这样的数 题解: 题意很明显了,是要用二进制,所以我们也把给的区间边界转化 ...

  6. leetcode29 两数相除 int 与移位

    难受啊 考虑越界 考虑dividend为-2^31,用负数移位运算 class Solution { public: int divide(int dividend, int divisor) { i ...

  7. 基于用户的协同过滤的电影推荐算法(tensorflow)

    数据集: https://grouplens.org/datasets/movielens/ ml-latest-small 协同过滤算法理论基础 https://blog.csdn.net/u012 ...

  8. free ebooks all in one

    free ebooks all in one pdf / ppt mobi / epub free programming ebooks free IT ebooks open free ebooks ...

  9. how to group date array by month in javascript

    how to group date array by month in javascript https://stackoverflow.com/questions/14446511/most-eff ...

  10. c++ 使用PID获取顶级窗口句柄和标题

    #include <iostream> #include <Windows.h> using namespace std; BOOL CALLBACK EnumWindowsP ...