1. uniapp开发 APP嵌入另一个APP打包的wgt文件,实现点击携带参数跳转到wgtAPP的某一个页面
1.1. 开发背景
需求描述:原本需求是app中点击跳转到甲方提供的H5页面,但是甲方的功能已经有一个app了不想提供H5页面,甲方提供了app热更新打包的wgt包,希望我们app嵌入wgt实现跳转。
1.2. 实现方案
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>