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

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

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

在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) {// 打开成功}
})

使用限制

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

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

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

在以上的配置中，即可使用跳转半屏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: '需要跳转小程序的指定路径/'
});

官方的呈现效果