前言
在日常开发小程序中,使用原生编写小程序的项目并不多,其中大部分的小程序都是使用uniapp进行小程序开发,一端开发,多端适配,便捷好用,极大的减省我们在开发小程序中效率和时间,而uniapp不只可以编译小程序,还可以编译成安卓和IOS,应用场景极为广泛。而我们在用uniapp开发微信小程序时,有时需要在自己的小程序内拉起第三方的小程序,但是小程序跳来跳去的很影响用户的体验,后来微信官方开发出可以在自己的小程序内打开半屏小程序,这样在用户体验方面做到极大提升,而使用uniapp框架怎么拉取半屏小程序呢?接下来我就为大家分享一点小心得,uniapp中拉起半屏微信小程序,主要涉及到几个关键步骤,包括配置、代码编写和申请审核。以下是一个详细的教程:
一、准备工作
-
确保基础库版本:
- 小程序基础库版本需要不低于一定版本(如2.26.2或更高,具体以微信官方文档为准),以确保支持半屏跳转功能。
- 详情见官方的文档
-
获取目标小程序的AppID:
- 需要知道你想要半屏拉起的小程序的AppID。
- 拉起小程序的页面
- 跳转到第三方小程序的是否携带参数
二、配置manifest.json
- 添加embeddedAppIdList:
- 在uniapp项目的
manifest.json
文件中,找到mp-weixin
节点,并添加embeddedAppIdList
字段,将你想要半屏拉起的小程序的AppID放入该数组中,若是存在多个半屏小程序,则依次。例如:{ "mp-weixin": { "embeddedAppIdList": ["目标小程序的AppID"] } }
- 注意:这个配置是必需的,否则可能无法成功实现半屏跳转。
- 在uniapp项目的
三、申请半屏小程序权限
-
进入小程序管理后台:
- 登录微信小程序管理后台。
-
设置半屏小程序管理:
- 进入“设置”->“第三方设置”->“半屏小程序管理”。
- 在“我调用的”或“调用的我”部分,添加你需要半屏拉起的小程序的AppID,并提交审核。
- 等待审核通过后,即可开始编写代码。
四、编写代码
- 使用wx.openEmbeddedMiniProgram:
- 在uniapp中,你可以使用
wx.openEmbeddedMiniProgram
方法来实现半屏跳转。但是,请注意,在uniapp中直接使用wx
对象可能不是最佳实践,因为uniapp提供了自己的跨平台API。不过,对于微信小程序平台,你可以通过条件编译来直接使用微信小程序的API。 - 示例代码(假设在微信小程序平台):
let openMiniProgram = uni.navigateToMiniProgram // canIUse检查openEmbeddedMiniProgram在此场景是否可用 if (uni.canIUse('openEmbeddedMiniProgram')) { openMiniProgram = uni.openEmbeddedMiniProgram } // 拉起药惠通支付 openMiniProgram({ appId: '第三方小程序Appid', path: `第三方小程序的页面地址,为空这默认首页`, extraData: { ...jsPayStr, backPath: ``, originAppid: '自己的Appid,便宜完成后跳回,', }, success: result => { console.log("完成") }, fail () { console.log('点击取消') } }) }
- 注意:在实际开发中,你可能需要根据具体场景调整上述代码,并确保在合适的时机调用此方法。
- 在uniapp中,你可以使用
五、注意事项
-
版本兼容性:
- 确保你的小程序基础库版本和uniapp框架版本都支持半屏跳转功能。
-
权限申请:
- 必须先在微信小程序管理后台申请并审核通过半屏小程序权限,才能成功实现半屏跳转。
-
条件编译:
- 如果你的项目需要同时支持多个平台,请注意使用条件编译来确保只在微信小程序平台下使用
wx.openEmbeddedMiniProgram
方法。
- 如果你的项目需要同时支持多个平台,请注意使用条件编译来确保只在微信小程序平台下使用
-
用户体验:
- 半屏跳转可能会影响用户体验,特别是在某些场景下。因此,在使用前请仔细评估其必要性和影响。
总结
微信官方默认半屏设置有问题,则默认全屏跳转,在微信开发者工具中,是不允许直接打开第三方小程序,会有提示是否打开小程序
,所以在调试时,最好能够用手机进行调试是否可以正常拉起半屏还是全屏,避免上线后出现问题。好了,通过以上步骤,你应该能够在uniapp项目中成功实现拉起半屏微信小程序的功能。