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>
相关推荐
小徐_233311 小时前
uni-app 项目别再从零搭了!3 个 Wot UI 起手模板怎么选?
前端·uni-app
蜡台11 小时前
uniapp pdf文件预览组件
pdf·uni-app·合同·pdfh5
凡泰AI16 小时前
如何借助MCP打通企业APP内部服务:从统一调用到小程序承接
小程序·uni-app·app·mpaas·mcp·小程序容器
华玥作者17 小时前
uniapp 万条数据不卡顿:我写了个虚拟列表组件 hy-list,原生支持瀑布流
数据结构·uni-app·list·vue3
这是个栗子17 小时前
uni-app 微信小程序开发:常用函数总结(一)
微信小程序·小程序·uni-app·getcurrentpages
程序猿乐锅2 天前
【苍穹外卖 day11|统计报表接口与 Apache ECharts 图表展示】
前端·apache·echarts
宠友信息2 天前
消息序号如何保证即时通讯源码聊天记录稳定加载
java·spring boot·redis·python·mysql·uni-app
2501_916008893 天前
苹果上架工具怎么选 不用 Mac 上架 App Store 的几种方案
android·macos·ios·小程序·uni-app·iphone·webview
宠友信息3 天前
MySQL复合索引与Druid优化仿小红书源码个人主页查询链路
数据库·spring boot·websocket·mysql·uni-app
硬核科技牛3 天前
AI生成的小程序,数据能导出换平台吗
小程序·apache