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

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"字段如下:

javascript 复制代码
  "UniMP": {
    "description": "uni小程序"
  }

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

javascript 复制代码
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

javascript 复制代码
//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,//下载资源的 url
        success: 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

javascript 复制代码
<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>
相关推荐
00后程序员张5 小时前
tcpdump 抓包分析,命令、过滤技巧、常见症状定位与移动真机补充方案
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump
BumBle7 小时前
基于UniApp实现DeepSeek AI对话:流式数据传输与实时交互技术解析
前端·uni-app
会点法律的程序员7 小时前
小程序 地理位置授权怎么搞
前端·小程序·uni-app
重生之我是菜鸡程序员8 小时前
uniapp 顶部通知 上滑隐藏
前端·javascript·uni-app
FliPPeDround8 小时前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
2501_9159214311 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9159214311 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
anyup11 小时前
🔥开源零配置!10 分钟上手:create-uni + uView Pro 快速搭建企业级 uni-app 项目
前端·前端框架·uni-app
你真的可爱呀11 小时前
uniapp学习【vue3在uniapp中语法,使用element,使用uView UI】
学习·uni-app