uniapp 微信跳转至半屏的使用示例
更新时间：2024年08月20日 11:46:39 作者：wendyTan10
这篇文章主要介绍了uniapp 微信跳转至半屏的使用示例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
微信小程序之间的半屏跳转 - uni.openEmbeddedMiniProgram(OBJECT)
在uniapp的开发项目中，开发者需要在全局配置manifest.json–>mp-weixin节点下添加embeddedAppIdList字段并声明需要半屏跳转的小程序，若不配置将切换为普通的小程序跳转小程序；(半屏的兼容性，如果不符合条件则自动转换为全屏的形式跳转)
配置示例：
// manifest.json
{
"mp-weixin" : {
"embeddedAppIdList": ["wxe5f52902cf4de896"]//需要半屏跳转的小程序appid
}
}而在代码中的使用示例：
uni.openEmbeddedMiniProgram({
appId: '',
path: 'pages/index/index?id=123',
extraData: {
'data1': 'test'
},
success(res) {
// 打开成功
}
})使用限制
使用过程有以下限制，若不符合以下所有条件将被自动切换为普通的(全屏)小程序跳转小程序，不影响用户使用：
- 被半屏跳转的小程序需要通过来源小程序的调用申请，
开发者可在 小程序管理后台「设置」-「第三方设置」-「半屏小程序管理」板块发起申请，最多可以申请10个小程序； - 3.1版本以下基础库，被半屏打开的小程序需要在app.json的embeddedAppIdList字段中声明；
- 当前小程序需为竖屏；
- 被半屏跳转的小程序需为非个人主体小程序（不含小游戏）。
在后台的配置：
点击进入小程序管理后台的登录
在以上的配置中，即可使用跳转半屏api的调用；
在此基础上也可封装一个方法的使用，在api可调用，但配置未完成的情况下，调用openEmbeddedMiniProgram的半屏的不生效，并自动转换为全屏的形式；
注：半屏跳转必须是事件的@tap/@click的跳转，不能是模态框（
uni.showModal的确认/取消事件）的点击事件调用，模态框的事件调用半屏则默认是全屏的跳转
// method.js
export function openEmbeddedMiniProgram(data) {
let openMiniProgram = wx.navigateToMiniProgram;
// canIUse检查openEmbeddedMiniProgram在此场景是否可用
if (uni.canIUse('openEmbeddedMiniProgram')) {
openMiniProgram = wx.openEmbeddedMiniProgram;
}
openMiniProgram(data);
}
// main.js
import Vue from 'vue';
import { openEmbeddedMiniProgram } from './method.js';
Vue.prototype.$openEmbeddedMiniProgram = openEmbeddedMiniProgram;
// 调用的事件
this.$openEmbeddedMiniProgram({
appId: '需要跳转小程序的appid',
path: '需要跳转小程序的指定路径/'
});官方的呈现效果
到此这篇关于uniapp - 微信跳转至半屏的使用的文章就介绍到这了,更多相关uniapp微信半屏跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要给大家介绍了关于ECharts数据可视化基本使用之常用图表类型的相关资料,echarts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了js原生瀑布流插件制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了javascript组合使用构造函数模式和原型模式的方法,通过一个简单实例分析了javascript构造函数模式与原型模式的使用方法,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了js控制网页背景音乐播放与停止的方法,实例分析了javascript控制背景音乐的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了js 计算月/周的第一天和最后一天代码,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了JavaScript中数组去重的5种方法，文中讲解非常详细，实例代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
document.all与getElementById、getElementsByName、getElementsByT
Document.all[]是文档中所有标签组成的一个数组变量，包括了文档对象中所有元素2008-12-12
这篇文章主要给大家介绍了关于echarts横向柱状图简单实现的相关资料,ECharts是百度前端开发部开发的一个开源可视化库,它可以帮助开发者轻松的实现各种数据可视化,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了ES6中的箭头函数,结合实例形式详细分析了ES6中箭头函数的基本语法、特性、使用方法与相关注意事项,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了如何基于HTML5 Canvas和jQuery实现的简单网页版绘图编辑器,文中的示例代码讲解详细,需要的小伙伴可以了解下2024-10-10
最新评论