uniapp??微信跳轉至半屏的使用示例

更新時間：2024年08月20日 11:46:39 作者：wendyTan10

這篇文章主要介紹了uniapp??微信跳轉至半屏的使用示例,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

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

在uniapp的開發(fā)項目中，開發(fā)者需要在全局配置manifest.json–>mp-weixin節(jié)點下添加embeddedAppIdList字段并聲明需要半屏跳轉的小程序，若不配置將切換為普通的小程序跳轉小程序；(半屏的兼容性，如果不符合條件則自動轉換為全屏的形式跳轉)
配置示例：

// manifest.json
{
		"mp-weixin" : {
		   "embeddedAppIdList": ["wxe5f52902cf4de896"]//需要半屏跳轉的小程序appid
		}
	}

而在代碼中的使用示例：

uni.openEmbeddedMiniProgram({
	appId: '',
	path: 'pages/index/index?id=123',
	extraData: {
		'data1': 'test'
	},
	success(res) {
    // 打開成功
	}
})

使用限制

使用過程有以下限制，若不符合以下所有條件將被自動切換為普通的(全屏)小程序跳轉小程序，不影響用戶使用：

被半屏跳轉的小程序需要通過來源小程序的調(diào)用申請，開發(fā)者可在小程序管理后臺「設置」-「第三方設置」-「半屏小程序管理」板塊發(fā)起申請，最多可以申請10個小程序；
3.1版本以下基礎庫，被半屏打開的小程序需要在app.json的embeddedAppIdList字段中聲明；
當前小程序需為豎屏；
被半屏跳轉的小程序需為非個人主體小程序（不含小游戲）。

在后臺的配置：
點擊進入小程序管理后臺的登錄

在以上的配置中，即可使用跳轉半屏api的調(diào)用；
在此基礎上也可封裝一個方法的使用，在api可調(diào)用，但配置未完成的情況下，調(diào)用openEmbeddedMiniProgram的半屏的不生效，并自動轉換為全屏的形式；

注：半屏跳轉必須是事件的@tap/@click的跳轉，不能是模態(tài)框（uni.showModal的確認/取消事件）的點擊事件調(diào)用，模態(tài)框的事件調(diào)用半屏則默認是全屏的跳轉

// 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;
// 調(diào)用的事件
this.$openEmbeddedMiniProgram({
    appId: '需要跳轉小程序的appid',
    path: '需要跳轉小程序的指定路徑/'
});

官方的呈現(xiàn)效果