评论

如何在微信内外部浏览器唤起小程序

如何使用h5唤起微信小程序

微信外部浏览器唤起微信小程序

目的:通过发送短信召回流失用户。

官方文档地址

步骤一

  • 该API我们主要用到的配置如下:
  • jump_wxa:跳转到的目标小程序信息。该对象内包含两个字段。
  • path:通过scheme码进入的小程序页面路径,必须是已经发布的小程序存在的页面,不可携带query
  • query:通过scheme码进入小程序时的query。

步骤二

  • 需要注意的是,query必传,然而如果我们需要跳转的页面不需要参数,也需要配置上query,默认我们填写的是from=sms, 用于统计是从浏览器渠道来的。

步骤三

  • 与后端约定access_token 通过前端传递appKey进行区分,传哪个微信小程序的appKey 就生成对应小程序的access_token。

步骤四

  • 支持设置scheme的过期时间,默认永久,我们的应用场景很少,暂不详说。

步骤五

  • 代码里操作如下,由后端聚合参数信息。
let postData = {
  appKey: 'QTSHE_MINI_APP',
  path: 'pages/partdetails/partdetails',
  query: 'partJobId=123456' || 'a=1'
}
this.$axios.post('/qtsWeChat/wechat/qrCode/scheme/info', postData).then((res) => {
  if (res.success) {
    const url = res.data.openlink
    // 将scheme转为我们平台的短链接,否则在安卓手机上无法打开微信小程序,会默认打开浏览器搜索。
    this.$axios.get(`/misc/shortLink/conversion`, {url}).then((res) => {
      if (res.success) {
        this.shortLink = res.data
      }
    })
  } else {
    this.$Message.error('获取失败,请稍后重试')
  }
}).catch((err) => {
  console.log(err)
})

注意点

  • 该链接只支持在外部浏览器打开,微信内部浏览器访问是无法打开的,微信内部浏览器打开需要使用微信的开放标签<wx-open-launch-weapp>,下面详说。

微信内部浏览器唤起小程序

官方文档地址

步骤一

  • 首先需要登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,该域名我们配置的是https://m.qtshe.com, 所以导致我们调试的时候需要每次都发布到线上看效果(大坑)。

步骤二

步骤三

  • 通过config接口注入权限验证配置并申请所需开放标签, 在wx.config里增加openTagList标签,内置两个开放标签 wx-open-launch-app 微信h5唤起本地已经安装的app,以及 wx-open-launch-weapp 微信h5唤起小程序,操作如下:
window.wx.config({
  debug: false,
  appId: window.g_info.wx_appid,
  timestamp: data.data.timestamp,
  nonceStr: data.data.nonceStr,
  signature: data.data.signature,
  jsApiList: [],
  openTagList: [
    'wx-open-launch-app',
    'wx-open-launch-weapp'
  ]
})

注意点

  • 对于Vue等视图框架,为了避免template标签冲突的问题,可使用<script type="text/wxtag-template"></script>进行代替,来包裹插槽模版和样式。
  • 页面中与布局和定位相关的样式,如position: fixed; top -100;等,尽量不要写在插槽模版的节点中,请声明在标签或其父节点上;
  • 对于有CSP要求的页面,需要添加白名单frame-src https://*.qq.com webcompt:,才能在页面中正常使用开放标签。
  • Vue里操作代码如下,如果需要写样式,最好是外部包一个div进行样式编写,内部的内容宽高100%即可,调试样式可使用微信开发者工具的网页模式:
<img src="https://qiniu-image.qtshe.com/20220317quick-apply.png" class="quick-apply" v-if="!isWeiXin" @click="jumpToPartJobDetail(item)">
  <div class="job-wx" v-else>
    <wx-open-launch-weapp id="launch-btn" username="gh_7c2bc00a6bf8" :path="'pages/partdetails/partdetails.html?partJobId=' + item">
      <script type="text/wxtag-template">
        <style>
          img {
            width: 100%;
            display: block;
          }
          </style>
          <img src="https://qiniu-image.qtshe.com/20220317quick-apply.png" alt="" />
      </script>
    </wx-open-launch-weapp>
  </div>

示例效果

扩展

// 各个端口跳转兼职详情页
jumpToPartJobDetail(partJobId) {
  util.isAliMiniApp().then((res) => {
    if (res) { // 如果是在支付宝小程序环境则打开小程序详情页
      my.navigateTo({
        url: `/pages/partdetails/partdetails?partJobId=${partJobId}`
      })
    } else {
      // 如果是在客户端app环境,则打开原生岗位详情页
      if (util.isAndroidApp() || util.isIosApp()) {
        jsBridge.evokeNormalPartJobDetailPage(partJobId)
      } else if (util.isMiniApp()) { // 微信小程序里则打开微信小程序岗位详情
        wx.miniProgram.navigateTo({
          url: `/pages/partdetails/partdetails?partJobId=${partJobId}`
        })
      } else if (util.isMobile()) {
        // 如果是在手机自带浏览器或者除微信外的app浏览器,统一打开支付宝小程序
        let url = `alipays://platformapi/startapp?appId=2018082861168647&page=pages/partdetails/partdetails&query=partJobId%3D${partJobId}`
        window.location.href = `https://ds.alipay.com/?scheme=${encodeURIComponent(url)}`
      } else { // pc端打开h5的兼职详情页
        window.location.href = `/app/partdetails?partJobId=${partJobId}`
      }
    }
  })
}


具体示例

为了方便运营同学,做了个工具给他们使用。


4.11号新版本后的改版方案:

首先做一个落地页:https://b.qtshe.com/1DF43E

代码如下:

<script>
import toast from 'toast'
export default {
  created() {
    this.init()
  },
  methods: {
    // 获取微信scheme地址,并且主动跳转一次
    init() {
      this.$axios.post(`https://xxx/你们的接口地址/user/device/scheme`, this.$route.query).then(res => {
        if (res.success) {
          window.location.href = res.data
        } else {
          toast(res.msg)
        }
      }).catch(() => {
        toast('服务器错误,请稍后重试')
      })
    }
  }
}
</script>


原理:通过地址栏配置需要跳转的参数,h5页面拿到参数后通过接口转换为weixin://xxxx 开头的scheme协议地址,并且主动location.href一次。这样能保证用户每次打开都是新的scheme地址,针对一天50w数量上限的问题,可尝试同一个用户在固定时间内相同的参数,返回相同的scheme地址。

以上限制只存在于除微信外的外部浏览器,微信容器里没有以上的限制



最后一次编辑于  04-28  
点赞 14
收藏
评论

17 个评论

  • RealizeInnerSelf丶
    RealizeInnerSelf丶
    2021-08-30

    感谢分享,给你点赞~

    2021-08-30
    赞同 1
    回复
  • Steven Zhang💤
    Steven Zhang💤
    2021-06-04

    请问大佬 微信外部浏览器打开小程序 jumpWxa下的query参数 这样传的话 hid=123, 已经在对应的页面的onLoad方法中通过options.hid做了处理,还需要针对这个跳转做特殊处理么?

    2021-06-04
    赞同 1
    回复 1
    • Stern
      Stern
      2021-06-04
      不需要了。官方自己做了一层encode
      2021-06-04
      1
      回复
  • 一遇泓
    一遇泓
    2021-04-29

    老哥,太厉害了啊,同一个scheme  url,我用安卓系统,无论是浏览器还是h5页面,死活打不开小程序,在苹果下直接就可以打开。一直纳闷,没人说问题所在,直到老哥你这句“需要注意的是,query必传”,然后就随便传了个“a=1”,果然就可以了。。。。多谢老哥!!

    2021-04-29
    赞同 1
    回复 1
    • Stern
      Stern
      2021-04-30
      666
      2021-04-30
      回复
  • 七月旅人
    七月旅人
    06-27

    4.11后如此完整的解决方案,快赞👍

    06-27
    赞同
    回复
  • 幻想家阿桂
    幻想家阿桂
    04-16

    云端生成scheme后直接跳转,就不会过期了~一天可以跳50W次,够用了~

    04-16
    赞同
    回复
  • ༨ꫛꪝᝰ෴程序猿
    ༨ꫛꪝᝰ෴程序猿
    03-29

    微信内部唤起小程序

    1、引入微信jssdk1.6

    2、微信初始化调用微信config

    3、使用wx-open-launch-weapp标签

    4、结果:按钮出不来。。

    03-29
    赞同
    回复 7
    • Stern
      Stern
      03-29
      生成二维码方式再次访问下。
      03-29
      回复
    • Stern
      Stern
      03-29
      js域名是否已配置
      03-29
      回复
    • ༨ꫛꪝᝰ෴程序猿
      ༨ꫛꪝᝰ෴程序猿
      03-29回复Stern
      没明白您的意思??生成二维码方式????
      03-29
      回复
    • ༨ꫛꪝᝰ෴程序猿
      ༨ꫛꪝᝰ෴程序猿
      03-29回复Stern
      安全域名已配置好
      03-29
      回复
    • ༨ꫛꪝᝰ෴程序猿
      ༨ꫛꪝᝰ෴程序猿
      03-29回复Stern
      大佬可看出代码有什么问题吗
      03-29
      回复
    查看更多(2)
  • 黄锦程
    黄锦程
    03-09
    呵呵
    03-09
    赞同
    回复
  • 何金
    何金
    01-05

    请问一下 ,第一种方式 确定在微信浏览器打不开吗? 为什么我的只能在微信浏览器打开?

    01-05
    赞同
    回复 1
    • Stern
      Stern
      01-05
      第一种方式可以了。微信更新了。之前打开提示参数错误。
      01-05
      1
      回复
  • 坤坤坤坤坤
    坤坤坤坤坤
    2021-10-27

    你这个小程序确实可以用,我是公众号认证了,域名也加了,但是opentag死活不出来,一直显示空,支付功能jsspi都调用成功了,openTagList死活为空,不知道还有没有其他的办法了

    2021-10-27
    赞同
    回复 1
    • Stern
      Stern
      2021-10-27
      代码贴下。顺便贴个可访问的链接
      2021-10-27
      回复
  • 遥望sola
    遥望sola
    2021-09-09

    你好,请问我这边是企业号能调用开放标签吗,企业号的话config里的appId会和服务号有所不同

    2021-09-09
    赞同
    回复 4
    • Stern
      Stern
      2021-09-09
      企业号是指?企业的服务号?还是企业微信?
      2021-09-09
      回复
    • 晨曦
      晨曦
      03-25回复Stern
      企业微信,可以使用开放标签吗
      03-25
      回复
    • Stern
      Stern
      03-28回复晨曦
      不行。
      03-28
      回复
    • Stern
      Stern
      03-28回复晨曦
      新做了个页面 放到微信可以。企业微信不显示 按钮 https://m.qtshe.com/app/spermDonation
      03-28
      回复

正在加载...

登录 后发表内容