uniapp打开半屏微信小程序教程

前言

在日常开发小程序中，使用原生编写小程序的项目并不多，其中大部分的小程序都是使用uniapp进行小程序开发，一端开发，多端适配，便捷好用，极大的减省我们在开发小程序中效率和时间，而uniapp不只可以编译小程序，还可以编译成安卓和IOS，应用场景极为广泛。而我们在用uniapp开发微信小程序时，有时需要在自己的小程序内拉起第三方的小程序，但是小程序跳来跳去的很影响用户的体验，后来微信官方开发出可以在自己的小程序内打开半屏小程序，这样在用户体验方面做到极大提升，而使用uniapp框架怎么拉取半屏小程序呢？接下来我就为大家分享一点小心得，uniapp中拉起半屏微信小程序，主要涉及到几个关键步骤，包括配置、代码编写和申请审核。以下是一个详细的教程：

一、准备工作

1. 确保基础库版本：

   • 小程序基础库版本需要不低于一定版本（如2.26.2或更高，具体以微信官方文档为准），以确保支持半屏跳转功能。
   • 详情见官方的文档

2. 获取目标小程序的AppID：

   • 需要知道你想要半屏拉起的小程序的AppID。
   • 拉起小程序的页面
   • 跳转到第三方小程序的是否携带参数
     

二、配置manifest.json

1. 添加embeddedAppIdList：
   • 在uniapp项目的manifest.json文件中，找到mp-weixin节点，并添加embeddedAppIdList字段，将你想要半屏拉起的小程序的AppID放入该数组中，若是存在多个半屏小程序，则依次。例如：

     {
       "mp-weixin": {
         "embeddedAppIdList": ["目标小程序的AppID"]
       }
     }
     

   • 注意：这个配置是必需的，否则可能无法成功实现半屏跳转。

三、申请半屏小程序权限

1. 进入小程序管理后台：

   • 登录微信小程序管理后台。

2. 设置半屏小程序管理：

   • 进入“设置”->“第三方设置”->“半屏小程序管理”。
   • 在“我调用的”或“调用的我”部分，添加你需要半屏拉起的小程序的AppID，并提交审核。
   • 等待审核通过后，即可开始编写代码。
     

四、编写代码

1. 使用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('点击取消')
        }
      })
     }
     

   • 注意：在实际开发中，你可能需要根据具体场景调整上述代码，并确保在合适的时机调用此方法。

五、注意事项

1. 版本兼容性：

   • 确保你的小程序基础库版本和uniapp框架版本都支持半屏跳转功能。

2. 权限申请：

   • 必须先在微信小程序管理后台申请并审核通过半屏小程序权限，才能成功实现半屏跳转。

3. 条件编译：

   • 如果你的项目需要同时支持多个平台，请注意使用条件编译来确保只在微信小程序平台下使用wx.openEmbeddedMiniProgram方法。

4. 用户体验：

   • 半屏跳转可能会影响用户体验，特别是在某些场景下。因此，在使用前请仔细评估其必要性和影响。

总结

微信官方默认半屏设置有问题，则默认全屏跳转，在微信开发者工具中，是不允许直接打开第三方小程序，会有提示是否打开小程序，所以在调试时，最好能够用手机进行调试是否可以正常拉起半屏还是全屏，避免上线后出现问题。好了，通过以上步骤，你应该能够在uniapp项目中成功实现拉起半屏微信小程序的功能。