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来代替代码层面 ...
随机推荐
- hdu5233 Gunner II
Problem Description Long long ago, there was a gunner whose name is Jack. He likes to go hunting ver ...
- Codeforces Round #479 (Div. 3) F. Consecutive Subsequence (DP)
题意:给你一个长度为\(n\)的序列,求一个最长的\({x,x+1,x+2,.....,x+k-1}\)的序列,输出它的长度以及每个数在原序列的位置. 题解:因为这题有个限定条件,最长序列是公差为\( ...
- ef学习记录
EF Core (EntityFramework Core)是实体关系映射(O/RM)数据库访问框架.这个模式的好处就是让开发人员可以用对象模型来操作数据库,这是一种对开发人员较为友好的方式. O/R ...
- kubernetes进阶(三)服务发现-coredns
服务发现,说白了就是服务(应用)之间相互定位的过程. 服务发现需要解决的问题: 1.服务动态性强--容器在k8s中ip变化或迁移 2.更新发布频繁--版本迭代快 3.支持自动伸缩--大促或流量高峰 我 ...
- Hive Tutorial 阅读记录
Hive Tutorial 目录 Hive Tutorial 1.Concepts 1.1.What Is Hive 1.2.What Hive Is NOT 1.3.Getting Started ...
- 2020 Web 全栈面经
2020 Web 全栈面经 1.简历 2. 技术 3. 项目 4. 架构 5. 沟通,协作 6.成长 7. 面试技巧 准备 电话确认,面试流程,五险一金缴纳情况 有无笔试,几轮,面试时间,答复时间 细 ...
- React Component All In One
React Component All In One https://reactjs.org/docs/react-api.html#components React Class Component ...
- JS Object Deep Copy & 深拷贝
JS Object Deep Copy & 深拷贝 针对深度拷贝,需要使用其他方法 JSON.parse(JSON.stringify(obj));,因为 Object.assign() 拷贝 ...
- js array contains All In One
js array contains All In One includes & contains & has Array.prototype.contains "use st ...
- WebVR & CSS 3D & WebGL
WebVR & CSS 3D & WebGL VR https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API https:/ ...
