uniapp - 微信跳转至半屏的使用

微信小程序之间的半屏跳转 - uni.openEmbeddedMiniProgram(OBJECT)

点击uniapp跳转半屏使用的文档说明

在uniapp的开发项目中,开发者需要在全局配置manifest.json-->mp-weixin节点下添加embeddedAppIdList字段并声明需要半屏跳转的小程序,若不配置将切换为普通的小程序跳转小程序;(半屏的兼容性,如果不符合条件则自动转换为全屏的形式跳转)

配置示例:

javascript 复制代码
// manifest.json
{
		"mp-weixin" : {
		   "embeddedAppIdList": ["wxe5f52902cf4de896"]//需要半屏跳转的小程序appid
		}
	}

而在代码中的使用示例:

javascript 复制代码
uni.openEmbeddedMiniProgram({
	appId: '',
	path: 'pages/index/index?id=123',
	extraData: {
		'data1': 'test'
	},
	success(res) {
    // 打开成功
	}
})

使用限制

使用过程有以下限制,若不符合以下所有条件将被自动切换为普通的(全屏)小程序跳转小程序,不影响用户使用:

  1. 被半屏跳转的小程序需要通过来源小程序的调用申请,开发者可在 小程序管理后台「设置」-「第三方设置」-「半屏小程序管理」板块发起申请,最多可以申请10个小程序
  2. 3.1版本以下基础库,被半屏打开的小程序需要在app.json的embeddedAppIdList字段中声明;
  3. 当前小程序需为竖屏;
  4. 被半屏跳转的小程序需为非个人主体小程序(不含小游戏)。

在后台的配置:
点击进入小程序管理后台的登录

在以上的配置中,即可使用跳转半屏api的调用;

在此基础上也可封装一个方法的使用,在api可调用,但配置未完成的情况下,调用openEmbeddedMiniProgram的半屏的不生效,并自动转换为全屏的形式;

注:半屏跳转必须是事件的@tap/@click的跳转,不能是模态框(uni.showModal的确认/取消事件)的点击事件调用,模态框的事件调用半屏则默认是全屏的跳转

javascript 复制代码
// 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: '需要跳转小程序的指定路径/'
});

官方的呈现效果

相关推荐
尘浮生15 分钟前
Java项目实战II基于SpringBoot前后端分离的网吧管理系统(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·后端·微信小程序·小程序
anyup_前端梦工厂30 分钟前
uni-app 玩转条件编译:自定义平台的条件编译实战详解
前端·vue.js·uni-app
Mr.Liu64 小时前
小程序-使用 iconfont 图标库报错:Failed to load font
前端·微信小程序·小程序
计算机徐师兄4 小时前
Java基于SSM框架的校园综合服务小程序【附源码、文档】
java·微信小程序·小程序·校园综合服务小程序·java校园综合服务小程序·校园综合服务微信小程序
Mr.Liu64 小时前
小程序25- iconfont 字体图标的使用
前端·微信小程序·小程序
anyup5 小时前
【附源码】微信公众号 h5 网页授权开发
前端·微信·uni-app
破z晓7 小时前
uni-app集成使用SQLite数据库
数据库·uni-app
尘浮生11 小时前
Java项目实战II基于SpringBoot的客户关系管理系统(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·后端·微信小程序·小程序
五秒法则11 小时前
从搭建uni-app+vue3工程开始
前端·vue.js·uni-app
dr李四维13 小时前
应用商店双弹窗“APP在向用户申请权限时未同步告知用户申请此权限的理由”驳回uni-app应用上线的解决方法
前端·javascript·笔记·uni-app·产品运营·bug·产品经理