uni-app开发的app作为宿主app集成uni-app开发的uni小程序

uni-app开发的app作为宿主app集成uni-app开发的uni小程序
# uni小程序开发文档

一直有需求，想做uniapp开发的宿主app的小程序，但是，官网上没有找到相关的文档，但官方确实也有提供该功能，功能不是十分完善，但是也几乎足够用了。当时找相关文档很辛苦，以下是官方提供的各api的相关文档介绍，为了大家不至于很难找，现整理下贴出来。

用法其实十分简单，在Hbuilder x中，目前已经集成了相关api，直接调用即可（配置后需提交云端打包后才能生效，真机运行时推荐使用自定义调试基座）。

关于宿主app使用的api

宿主App是通过uniMP模块管理uni小程序，云端打包时需要在宿主App项目的manifest.json中配置使用uni小程序模块。在"app-plus"->"modules"节点下添加"UniMP"模块，示例如下：

"app-plus" : {  
    "modules" : {  
        "UniMP": {  
            "description": "uni小程序"  
        }  
    },  
    //...  
}

加载uniMP模块

在调用uni小程序API时需先调用uni.requireNativePlugin方法加载uni小程序管理模块。如果返回的mp为undefined，说明当前环境不支持uni小程序。

示例如下：

const mp = uni.requireNativePlugin('uniMP');  
//通过mp可调用方法操作uni小程序  
mp.openUniMP({  
    appid: '小程序的appid'  
});

installUniMP(options, callback)

通过wgt安装uni小程序到宿主App中，示例如下：

mp.installUniMP({  
    appid: 'uni小程序的appid',  
    wgtFile: 'uni小程序的wgt文件路径'  
}, (ret) => {  
    console.log('installUniMP: ' + JSON.stringify(ret));  
});

options参数说明

callback回调参数说明

openUniMP(options, callback)

打开uni小程序，示例如下：

mp.openUniMP({  
    appid: 'uni小程序的appid'  
}, (ret) => {  
    console.log('openUniMP: ' + JSON.stringify(ret));  
});

options参数说明

callback回调参数说明

closeUniMP(appid, callback)

关闭已经运行的uni小程序，示例如下：

mp.closeUniMP('uni小程序的appid', (ret) => {  
    console.log('closeUniMP: ' + JSON.stringify(ret));  
});

参数说明

callback回调参数说明

hideUniMP(appid, callback)

隐藏运行在前台的uni小程序，示例如下：

mp.hideUniMP('uni小程序的appid', (ret) => {  
    console.log('hideUniMP: ' + JSON.stringify(ret));  
});

参数说明

callback回调参数说明

showUniMP(appid, callback)

将运行在后台的uni小程序切换到前台显示，示例如下：

mp.showUniMP('uni小程序的appid', (ret) => {  
    console.log('showUniMP: ' + JSON.stringify(ret));  
});

参数说明

callback回调参数说明

getUniMPVersion(appid, callback)

获取安装的uni小程序版本信息，示例如下：

mp.getUniMPVersion('uni小程序的appid', (ret) => {  
    console.log('getUniMPVersion: ' + JSON.stringify(ret));  
});

参数说明

callback回调参数说明

versionInfo参数说明

onUniMPEventReceive(callback)

监听uni小程序发送的event事件，建议在宿主App的应用生命周期onLaunch中进行监听。在uni小程序中调用uni.sendHostEvent发送event事件后触发。

示例如下：

export default {  
    onLaunch: function() {  
        console.log('Host App Launch');  

        //监听uni小程序发送的事件  
        mp.onUniMPEventReceive(ret => {  
            console.log('Receive event from MP: ' + JSON.stringify(ret));  
        });  
    },  
    //...  
}

callback回调参数说明

sendUniMPEvent(appid, event, data, callback)

注：uni小程序必须处于运行状态，否则会发送失败

宿主App向uni小程序发送event事件，在uni小程序中调用uni.onHostEventReceive监听。

示例如下：

mp.sendUniMPEvent('uni小程序的appid', 'event事件名称', '要传递的数据', (ret) => {  
    //发送消息成功回调  
    console.log('Send event to MP: ' + JSON.stringify(ret));  
});

参数说明

setDefaultMenuItems(options, callback)

设置胶囊按钮菜单 ActionSheet 项

示例如下：

mp.setDefaultMenuItems({  
    items: [{  
        title: "关于",  
        id: "about"  
    }, {  
        title: "分享",  
        id: "share"  
    }]  
}, ret => {  
    if (ret.id == "about") {  
        console.log("点击了 关于")  
    }  
})

参数说明

options 参数说明

actionSheetItem 参数说明

callback回调参数说明

uni小程序使用的API

获取启动参数

宿主App启动uni小程序传入的extraData参数可在小程序项目App.vue的应用生命周期onLaunch、onShow中获取。

示例如下：

//首次启动
onLaunch: function(info) {  
    console.log('App Launch:', info);  
}

//从后台切换到前台
onShow: function(info) {  
    console.log('App Launch:', info);  
}

info参数说明

uni.sendHostEvent(event, data, ret, callback)

uni小程序向宿主App发送event事件，在宿主App中可调用onUniMPEventReceive监听接收event事件。

示例如下：

uni.sendHostEvent(event, data, (ret) => {  
    //发送消息成功回调  
    console.log('Send event to Host: ' + JSON.stringify(ret));  
});

参数说明

callback回调参数说明

uni.onHostEventReceive(callback)

uni小程序监听宿主App发送的event事件，建议在uni小程序应用生命周期onLaunch中监听。在uni宿主App中调用sendUniMPEvent发送event事件后触发。

示例如下：

export default {  
    onLaunch: function() {  
        console.log('App Launch');  

        //监听宿主App通讯数据  
        uni.onHostEventReceive((event, data) => {  
            console.log('Receive event(' + event + ') from HOST: ' + JSON.stringify(data));  
        });  
    },  
    //...  
}

callback回调参数说明

如何打包小程序

选中需要打包的项目

发行-原生APP制作应用wgt包，确定即可。

将wgt包放置到宿主项目中，mp.installUniMP中，wgtFile直接引用(以下是放到static文件夹下的applet文件夹示例)

mp.installUniMP({  
    appid: this.TRAIN_APPLET_APPID,  
    wgtFile: '/static/applet/ceshi.wgt',  
},