收藏
回答

如何通过打开普通URL跳转小程序?

目前可以扫普通二维码跳转小程序,可否通过直接打开二维码的地址打开小程序,而不通过扫码的形式

回答关注问题邀请回答
收藏

6 个回答

  • 睡前原谅一切
    睡前原谅一切
    2021-03-30

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

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

    官方文档地址

    步骤一

    • 该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进行样式编写:
    <wx-open-launch-weapp id="launch-btn" username="gh_7c2bc00a6bf8" path="pages/partdetails/partdetails.html?partJobId=1013456">
      <script type="text/wxtag-template">
        <style>
            img {
                width: 100%;
                display: block;
                animation: free_download 0.9s linear alternate infinite;
                will-change: transform;
            }
            @keyframes free_download {
                0% {
                   transform: scale(0.9);
                }
    
                100% {
                    transform: scale(1);
                }
            }
        </style>
        <img src="https://qiniu-image.qtshe.com/202103179.png" alt="" />
      </script>
    </wx-open-launch-weapp>
    

    示例效果

    扩展

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


    具体示例


    2021-03-30
    有用 1
    回复 2
    • 邢晓凤
      邢晓凤
      2021-03-31
      可否不用弹提示的框,默认允许打开小程序呢?
      2021-03-31
      回复
    • 睡前原谅一切
      睡前原谅一切
      2021-03-31回复邢晓凤
      不可以哦~
      2021-03-31
      回复
  • 张硕勋
    张硕勋
    2021-06-21

    微信内部环境 可通过urlLink方式打开非个人小程序,相关文档:

    https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-link.html

    2021-06-21
    有用 1
    回复
  • Sarah 📿
    Sarah 📿
    2021-04-01

    外部h5任意外链跳转微信打开小程序,参考案例 http://m.jumpwx.com/wx/?i=170

    2021-04-01
    有用
    回复 1
    • 五角钱
      五角钱
      2023-03-20
      这个是怎么实现的呢
      2023-03-20
      回复
  • 有棱角的胖子
    有棱角的胖子
    2021-03-30

    微信内用开放标签wx-open-launch-weapp

    https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

    微信外浏览器用urlscheme.generate:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

    2021-03-30
    有用
    回复
  • 2021-03-30

    你说的是 url scheme?

    https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

    2021-03-30
    有用
    回复
  • this
    this
    2021-03-30

    自己试一下很难吗

    2021-03-30
    有用
    回复
登录 后发表内容
问题标签