> 服务器 >

微信半屏小程序的实现

来源:网络 文章列表 2023-03-15 8
微信半屏小程序的实现方法

微信小程序新出的 API,可以以半屏的形式,打开另一个小程序。
这种方式和之前的跳转小程序方式相比,优势是:

  • 不用弹框了,减少用户操作
  • 有主次解构,适合打开一些工具型的小程序。

那么如何使用呢?

实践

首页要在小程序后台配置:
设置 -> 第三方设置 -> 半屏小程序管理
点击添加输入另一个小程序的 appid 发送申请,另一个小程序管理员通过后这边状态会显示已通过,如图:

然后我们开始代码中调用,我这里简单封装了一个函数:

export const openHalfMini = () => {
  const platform = wx.getSystemInfoSync().platform
  if (platform !== 'android') {
    wx.showLoading({
      title: '打开小程序中',
      mask: true
    })
  }
  const token = wx.getStorageSync('token')
  wx.openEmbeddedMiniProgram({
  	// 要跳转的小程序的appid
    appId: 'wxcfxxxx',
    envVersion: __ENV__ !== 'production' ? 'trial' : 'release',
    path: `/pages/index/index?id=xxx`,
    success: () => {},
    fail: (error) => {
      console.log('跳转小程序失败', error)
    },
    complete: () => {
      wx.hideLoading()
    }
  })
}

  • 为什么加了 loading?
    因为打开这个 api 会有一些延时,比如点击触发后1s左右才能打开另一个小程序。
  • 为什么 android 下我没有加 loading?
    因为 android 触发这个 api 的时候系统自己有 loading,我加了会重复。

都是实践出来的坑啊~

对了,还有一个坑,有些手机会唤起失败,直接唤起了全屏的小程序,所以我们为了兼容,要在 app.json 中加上:

{
  "embeddedAppIdList": ["wxxxxxxxx"]
}

这里的 appid 是你要跳转到的小程序的 appid。

传给另一个小程序的参数,可以在另一个小程序接收(具体看文档),我是在另一个小程序做了一个通用页面来接收的。

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接