当前位置：首页 > news >正文

uniapp开发 APP嵌入另一个APP打包的wgt文件，实现点击携带参数跳转到wgtAPP的某一个页面

news 2025/10/11 11:35:07

1. uniapp开发 APP嵌入另一个APP打包的wgt文件，实现点击携带参数跳转到wgtAPP的某一个页面

1.1. 开发背景

需求描述：原本需求是app中点击跳转到甲方提供的H5页面，但是甲方的功能已经有一个app了不想提供H5页面，甲方提供了app热更新打包的wgt包，希望我们app嵌入wgt实现跳转。

1.2. 实现方案

uni-app项目中使用uni小程序教程
uni小程序API

1.3. uni-app项目中使用uni小程序教程

（1）在HBuilderX中打开宿主App项目的manifest.json文件，切换到源码视图，在 “app-plus” -> “modules” 下添加 "UniMP"字段如下：

  "UniMP": {"description": "uni小程序"}

（2）将甲方提供的小程序wgt文件拷贝到宿主App项目目录下的"static"目录中(实际上要把wgt放到服务器上下载下来，因为甲方后续可能会更新wgt包)，在宿主App中安装小程序wgt，示例代码如下：

installMP(){//通过获取小程序版本API来判断是否已经安装mp.getUniMPVersion('小程序的appid', (ret) => {if(0!=ret.code){//获取失败可以认为没有安装此小程序//安装小程序mp.installUniMP({appid:'小程序的appid',wgtFile:'小程序wgt文件路径'  //放在static目录路径为'/static/{$appid}.wgt'，如果小程序wgt在服务器，需要先下载到本地再安装}, (r)=>{if(0==r.code){// openUniMP打开wgt页面，默认跳到首页，可跳过argument配置跳转页面和参数mp.openUniMP({appid: '小程序的appid',path:'/pages/xxx/xxx?queryParams=xxxx'}, (ret)=>{if(0!=ret.code){console.log('启动失败: '+JSON.stringify(ret));}});}else{console.log('安装失败: '+JSON.stringify(r));}});}});
}

具体的API描述可参考上面的官网地址。

1.4. 完整代码

（1）pageHelper

//pageHelper
/*** 设置标题*/
const setTitleBar = (title) => {//设置标题uni.setNavigationBarTitle({title: title})//设置标题背景uni.setNavigationBarColor({frontColor: '#ffffff',backgroundColor: '#007AFF'})
};/*** 跳转到web页面*/
const openWeb = (itemParams) => {uni.navigateTo({url: `/pages/myWeb/myWeb?itemObj=${JSON.stringify(itemParams)}`,});
};/*** 跳转到微信小程序*/
const openWxProgram = (wxAppId) => {plus.share.getServices(res => {let sweixin = null;for (let i in res) {if (res[i].id == 'weixin') {sweixin = res[i];}}//唤醒微信小程序if (sweixin) {uni.hideLoading()sweixin.launchMiniProgram({id: wxAppId, //需要跳转到的小程序的原始id，这是特别要注意的，type: 0,// path:'https://jingyan.baidu.com/article/XXXX.html' //跳转指定小程序的页面});}})
};/*** 跳转到微信小程序(wgt文件)*/
const openUniMP = (itemObj) => {// 文件下载uni.downloadFile({url: itemObj.detailUrl,//下载资源的 urlsuccess: res => {console.log(res);if (res.statusCode === 200) {console.log('下载成功');}console.log(res.tempFilePath);//文件保存到本地uni.saveFile({tempFilePath: res.tempFilePath, //临时路径success: function(res) {console.log(res);// uni.showToast({//     icon: 'none',//     mask: true,//     title: '文件已保存：' + res.savedFilePath, //保存路径//     duration: 3000// });const mp = uni.requireNativePlugin('uniMP');//通过获取小程序版本API来判断是否已经安装mp.getUniMPVersion( itemObj.appId, //'小程序的appid'(ret) => {console.log("qwrwer",ret.code);// if(0!=ret.code){//获取失败可以认为没有安装此小程序//安装小程序mp.installUniMP({appid: itemObj.appId,//'小程序的appid'wgtFile:res.savedFilePath  //放在static目录路径为'/static/{$appid}.wgt'，如果小程序wgt在服务器，需要先下载到本地再安装}, (r)=>{if(0==r.code){// openUniMP打开wgt页面，默认跳到首页，可跳过argument配置跳转页面和参数mp.openUniMP({appid: itemObj.appId,//'小程序的appid'path:'/pages/xxx/xxx?queryParams=xxxx'}, (ret)=>{if(0!=ret.code){console.log('启动失败: '+JSON.stringify(ret));}});}else{console.log('安装失败: '+JSON.stringify(r));}});// }});setTimeout(() => {//打开文档查看// uni.openDocument({//     filePath: res.savedFilePath,//     success: function(res) {//         console.log('打开文档成功');//     },//     fail: function() {//         console.log('打开失败');//     }// });}, 3000);},fail: function() {console.log('保存失败');}});},fail: function() {console.log('下载失败');uni.showToast({icon: 'none',mask: true,title: '失败请重新下载'});}});// const mp = uni.requireNativePlugin('uniMP');// //通过获取小程序版本API来判断是否已经安装// mp.getUniMPVersion( itemObj.appId, //'小程序的appid'//     (ret) => {//         console.log("qwrwer",ret.code);//         // if(0!=ret.code){//获取失败可以认为没有安装此小程序//         //安装小程序//         mp.installUniMP({//             appid: itemObj.appId,//'小程序的appid'//             wgtFile:'/static/wgt/7947484196810655488.wgt'  //放在static目录路径为'/static/{$appid}.wgt'，如果小程序wgt在服务器，需要先下载到本地再安装//         }, (r)=>{//             if(0==r.code){//                 // openUniMP打开wgt页面，默认跳到首页，可跳过argument配置跳转页面和参数//                 mp.openUniMP({//                     appid: itemObj.appId,//'小程序的appid'//                     path:'/pages/xxx/xxx?queryParams=xxxx'//                 }, (ret)=>{//                     if(0!=ret.code){//                         console.log('启动失败: '+JSON.stringify(ret));//                     }//                 });//             }else{//                 console.log('安装失败: '+JSON.stringify(r));//             }//         });//         // }//     });
};export default {setTitleBar: setTitleBar,openWeb: openWeb,openWxProgram: openWxProgram,openUniMP: openUniMP,}

（2）wgt.bue

<template><view class="base-btn-layout"><view class="base-btn-txt"@click="wgtClick()">wgtClick</view></view>
</template>
<script>
import pageHelper from "../../../helper/pageHelper";export default {data() {return {name1: "",name2: "",}},onLoad: function (option) {var that = this;pageHelper.setTitleBar("wgt");},methods: {wgtClick: function () {let itemObj =  {"detailUrl": "https://os/upload/cServ/csrv/7947410655488.wgt","appId": "__UNI__AE923235D9","bindCode": "xshrtrty",}pageHelper.openUniMP(itemObj)}},
}
</script><style></style>