APP跳转小程序,小程序跳转APP
关注公共号,搜索 "APP跳转小程序,小程序跳转APP",查看原文
前置条件:
开发环境:windows
开发框架:uni-app , H5+,nativeJS,mpvue
编辑器: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的更多相关文章
- 从“跳一跳”来看微信小程序的未来
从“跳一跳”来看微信小程序的未来 相信大家这两天都被微信新推出的小程序跳一跳刷爆了朋友圈,为了方便用户在使用过程中切换小程序,微信在这次6.6.1版本中加入了下拉可快速切换小程序的功能,而“跳一跳 ...
- 小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名
小程序点击跳转外部页面 1.index.wxml 添加点击事件 标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitat ...
- 关于微信小程序的动态跳转
最近在研究微信小程序.在做一个简单的购物小程序时,遇到一个问题:如何通过扫码实现动态的跳转页面功能, 通过研究终于找到了解决方法: 首先当然要实现扫码解析功能js的代码: click: functio ...
- 从A小程序跳转到B小程序
从A小程序跳转到B小程序: A小程序 wxml: <navigator target="miniProgram" open-type="navigate" ...
- 微信小程序和微信小程序之间的跳转和传参示例代码附讲解
一:微信小程序跳转 使用限制 需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序. 需要用户确认跳转 从 2.3.0 版本开始,在 ...
- 微信小程序开发-小程序之间的跳转
前几天开发微信小程序,其中有个需要联动宣传的业务,就是正在开发的小程序跳转到别的小程序去, 然后去看了下大家的做法与看法,总结下这小程序跳转之间应该注意到的几个问题 首先是跳转的方法, https:/ ...
- 微信小程序中跳转另一个小程序
wx.navigateToMiniProgram({ appId: 'xxxxxxxxxxxxxxxxxx', // 要跳转的小程序的appid path: 'page/index/index', / ...
- 浅析微信支付:微信支付简单介绍(小程序、公众号、App、H5)
本文是[浅析微信支付]系列文章的第二篇,主要讲解一下普通商户接入的支付方式以及其中的不同之处. 上篇文章讲了本系列的大纲,没有看过的朋友们可以看一下. 浅析微信支付:前篇大纲 微信支付是集成在微信客户 ...
- 林兴爆料小程序很快可以支持各个 App 直接打开小程序
在微信开放平台基础高级产品经理林兴演讲的当场,他爆料了微信小程序一个轰动性新能力:小程序很快可以支持各个 App 直接打开小程序!没错,你没有听错,简单来说,在不久以后,所有的 App 里面都可以看到 ...
- 小程序之程序构造器App()
onLaunch / onShow / onHide 三个回调是App实例的生命周期函数 “小程序”指的是产品层面的程序,而“程序”指的是代码层面的程序实例,为了避免误解,下文采用App来代替代码层面 ...
随机推荐
- 树链剖分(附带LCA和换根)——基于dfs序的树上优化
.... 有点懒: 需要先理解几个概念: 1. LCA 2. 线段树(熟练,要不代码能调一天) 3. 图论的基本知识(dfs序的性质) 这大概就好了: 定义: 1.重儿子:一个点所连点树size最大的 ...
- poj3083 Children of the Candy Cor
Description The cornfield maze is a popular Halloween treat. Visitors are shown the entrance and mus ...
- Find a multiple POJ - 2356 容斥原理(鸠巢原理)
1 /* 2 这道题用到了鸠巢原理又名容斥原理,我的参考链接:https://blog.csdn.net/guoyangfan_/article/details/102559097 3 4 题意: 5 ...
- 牛客算法周周练20 F.紫魔法师 (二分图染色)
题意:给你一张图,对其染色,使得相连的点的颜色两两不同求,最少使用多少种颜色. 题解:首先,若\(n=1\),只需要一种.然后我们再去判断是否是二分图,对于二分图,两种颜色就够了,若不是二分图,也就是 ...
- 【ybt金牌导航1-2-5】【luogu P3287】优美玉米 / 方伯伯的玉米田
优美玉米 / 方伯伯的玉米田 题目链接:ybt金牌导航1-2-5 / luogu P3287 题目大意 有一个数组,你可以每次给一个区间里面的值加一,要你使得最后剩下的最长单调不下降子序列最长. 思路 ...
- MiniSMB 网络性能测试 免费版本安装指南
1) 烧录Image至USB 在Linux环境下可以运行以下命令(假设usb设备符号为/dev/sdb): root# tar -Jxf minismb-free-edition.img.tar.xz ...
- 关于优先队列的总结II
优先队列这个数据结构还是很有用的,可以帮我们解决很多棘手的排序的问题,所以再来细细看一下, priority_queue<Type, Container, Functional> Type ...
- Java之大数相加
之前参加某公司笔试,机试题目是大数相加,两大数是字符串形式,求和. 当时讨巧用的是BigDecimal类,但是发迷糊了,以为b1.add(b2)后,和就加到b1上了,结果一直输出不对. 其实应该是这样 ...
- redis持久化-AOF
1.aof文件写入与同步 2.aof重写 重写的目的是为了减小aof文件的体积,redis服务器可以创建一个新的aof文件来代替现有的aof文件,新文件不会有冗余的命令. BGREWRITEAOF:遍 ...
- JavaScript常见笔试题分析
1.Javascript的typeof可能返回的结果有哪些? 答:共6种,具体为number ,boolean,string,undefined,function,object(对象或者null返 ...