快捷導(dǎo)航

uniapp??微信跳轉(zhuǎn)至半屏的使用示例

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

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

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

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

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

而在代碼中的使用示例：

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

使用限制

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

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

在后臺(tái)的配置：
點(diǎn)擊進(jìn)入小程序管理后臺(tái)的登錄

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

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

// method.js
export function openEmbeddedMiniProgram(data) {
    let openMiniProgram = wx.navigateToMiniProgram;
     // canIUse檢查openEmbeddedMiniProgram在此場(chǎng)景是否可用
    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: '需要跳轉(zhuǎn)小程序的appid',
    path: '需要跳轉(zhuǎn)小程序的指定路徑/'
});

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