评论

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

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

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

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

官方文档地址

步骤一

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

步骤二

  • 需要注意的是,query必传,然而如果我们需要跳转的页面不需要参数,也需要配置上query,默认我们填写的是a=1。

步骤三

  • 与后端约定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进行样式编写:


示例效果

扩展

// 各个端口跳转兼职详情页
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}`
      }
    }
  })
}


具体示例

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

最后一次编辑于  9小时前  
点赞 3
收藏
评论

6 个评论

  • A新媒体_营销工作室QQ904999988
    A新媒体_营销工作室QQ904999988
    04-07

    跳转小程序 可实现点击链接跳转到微信小程序,目前支持短信、邮件、百度、知乎、抖音、快手、QQ、微信、B站、今日头条、浏览器、自己开发的APP以及几乎所有的APP。大家可以试试

    04-07
    赞同
    回复
  • A新媒体_营销工作室QQ904999988
    A新媒体_营销工作室QQ904999988
    04-06

    h5跳转小程序后台一键生成参考http://m.jumpwx.com/

    04-06
    赞同
    回复 1
  • 孑然
    孑然
    03-30

    大神 求vue源码 急求 跳转的小程序 是否必须发布??

    03-30
    赞同
    回复
  • 孑然
    孑然
    03-30

    你好 我页面按钮不出来 要么出来了按钮点击无反应,copy你的html代码 放上去 发现也不显示按钮 大神能帮忙吗 急坏了

    03-30
    赞同
    回复 2
    • 贩卖焦虑
      贩卖焦虑
      03-31
      先来几个操作:
      1. 服务号已认证截图
      2. 服务号后台js安全域名截图。
      3. 你该页面可访问的链接贴出来。
      03-31
      回复
    • 孑然
      孑然
      03-31回复贩卖焦虑
      服务号还没审核通过 可能是这个原因
      03-31
      回复
  • 贩卖焦虑
    贩卖焦虑
    03-30

    开放标签注意点:

    1. 必须是已认证的服务号
    2. 必须是已配置了js安全域名
    3. 开发的功能需要部署到该域名上访问,边写边调试是不行的、
    4. openTagList需存在需要使用的开放标签。
    03-30
    赞同
    回复 8
    • 孑然
      孑然
      03-30
      跳转的小程序 是否必须发布 ?
      开发的功能需要部署到该域名上访问 请教下 这个什么意思?开发的功能是开放标签吗?
      03-30
      回复
    • 孑然
      孑然
      03-30
      大神 救救我把
      03-30
      回复
    • 贩卖焦虑
      贩卖焦虑
      03-30回复孑然
      小程序 比如是已发布的,配置的js安全域名比如我们配置的是https://m.qtshe.com 那么测试就得把我们的代码发到 https://m.qtshe.com域名下。
      03-30
      回复
    • 贩卖焦虑
      贩卖焦虑
      03-30回复孑然
      确定服务号已认证?
      03-30
      回复
    • 孑然
      孑然
      03-31回复贩卖焦虑
      好  等认证通过我试下 谢谢
      03-31
      回复
    查看更多(3)
  • Mr.Zhao
    Mr.Zhao
    发表于移动端
    03-30
    青团郝帅
    03-30
    赞同
    回复
登录 后发表内容