微信小程序之间的半屏跳转 - uni.openEmbeddedMiniProgram(OBJECT)
在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) {
// 打开成功
}
})
使用限制
使用过程有以下限制,若不符合以下所有条件将被自动切换为普通的(全屏)小程序跳转小程序,不影响用户使用:
- 被半屏跳转的小程序需要通过来源小程序的调用申请,
开发者可在 小程序管理后台「设置」-「第三方设置」-「半屏小程序管理」板块发起申请,最多可以申请10个小程序
; - 3.1版本以下基础库,被半屏打开的小程序需要在app.json的embeddedAppIdList字段中声明;
- 当前小程序需为竖屏;
- 被半屏跳转的小程序需为非个人主体小程序(不含小游戏)。
在后台的配置:
点击进入小程序管理后台的登录
在以上的配置中,即可使用跳转半屏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: '需要跳转小程序的指定路径/'
});
官方的呈现效果