如何实现从第三方APP直接跳转进入微信小程序

小程序已悄悄的开放了从外部跳转至小程序的入口,方便用户可以在微信外部浏览器或其他APP跳转至微信小程序。

大家先来体验一把 试一下爽不爽

外部直接跳转进入微信小程序的方法汇总

方法一:通过小程序scheme码跳转至小程序

优势:目前最优方案,所有场景都支持跳转至小程序,为你实现外部流量导入小程序

缺点:需要注册微信开放平台,申请第三方平台,然后利用接口获取URL Scheme,步骤比较多

通过服务端接口可以获取打开小程序任意页面的URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。通过URL

外部跳转至小程序的解决方案

· 1 播放

Scheme打开小程序的场景值为 1065。生成的URL Scheme如下所示:weixin://dl/business/?t= *TICKET*iOS系统支持识别URL Scheme,可在短信等应用场景中直接通过Scheme跳转小程序。Android系统不支持直接识别URL Scheme,用户无法通过Scheme正常打开小程序,开发者需要使用H5页面中转,再跳转到Scheme实现打开小程序,跳转代码示例如下:location.href = 'weixin://dl/business/?t= *TICKET*'该跳转方法可以在用户打开H5时立即调用,也可以在用户触发事件后调用。调用上限Scheme将根据是否为到期有效与失效时间参数,分为短期有效Scheme与长期有效Scheme:

单个小程序每日生成Scheme上限为50万个(包含短期有效Scheme与长期有效Scheme)

有效时间超过31天的Scheme或永久有效的Scheme为长期有效Scheme,单个小程序总共可生成长期有效Scheme上限为10万个,请谨慎调用

有效时间不超过31天的Scheme为短期有效Scheme,单个小程序生成短期有效Scheme不设上限

注意事项

生成的URL Scheme仅支持从微信外打开小程序。微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮,无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序,见云开发静态网站跳转小程序。符合开放范围的小程序可以下发支持打开小程序的短信

该功能基本覆盖当前用户正在使用的微信版本,开发者无需进行低版本兼容。

只能生成已发布的小程序的URL Scheme。

通过URL Scheme跳转到微信时,可能会触发系统弹框询问,若用户选择不跳转,则无法打开小程序。请开发者妥善处理用户选择不跳转的场景。

开放范围针对国内非个人主体小程序开放。VV直选IOS端就采用了URL Scheme跳转,大家可下载体验。示例使用了云开发静态网站托管搭建网页,无需公众号,只需准备好小程序和开通云开发。网页会判断所在的环境来觉得采用哪种跳转方式,如检测到微信客户端内,则免鉴权使用开放标签跳转,如检测到在外部浏览器或 App,则使用 URL Scheme 跳转小程序。示例网页地址:https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html详细代码示例和说明:云开发静态网站跳转小程序

方法二:云开发静态网页免鉴权跳转静态网站

优势:1、免去小程序业务域名的配置;2、云开发有免费的CDN额度;3、简单粗暴,开发起来简单、UI组件微信官方自带,体验好

缺点:一些排斥云开发的可能望而却步

H5 跳小程序非个人主体并且已认证的小程序,使用云开发静态网站托管的网页,可以免鉴权跳转任意合法合规的小程序。即可以在微信内部浏览器的 H5 跳转小程序,也可以在微信外部浏览器或其他部分 App (如企业微信、QQ 等)跳转微信小程序。静态网站网页在微信客户端打开时,wx.config 可以传入小程序 AppID 并且不需计算签名,也就是免鉴权即可使用跳转小程序的能力。点此体验(将会跳转到微信官方的 "小程序示例" 小程序):https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

注意,开通静态网站、绑定自定义域名,需要在「微信开发者工具 - 云开发 - 更多 - 静态网站」里进行,才能拥有免鉴权的能力。以下包含完整代码示例,包括 HTML 代码和云函数代码。示例无需准备公众号,只需准备好小程序和开通云开发以及云开发中的静态网站托管能力。网页会判断所在的环境来觉得采用哪种跳转方式,如检测到微信客户端内,则免鉴权使用开放标签跳转,如检测到在外部浏览器或 App,则使用 URL Scheme 跳转小程序。注意,以下代码中有以下内容必须替换,可以搜索 <!-- replace --> 查看到所有需要替换的地方:

小程序 AppID:填入你的小程序 AppID

云开发环境 ID:填入你的开通了静态网站托管的云开发环境 ID

小程序原始账号 ID:填入你的小程序原始账号 ID(gh_ 开头)

小程序页面路径:填入要跳转到的小程序的页面路径

小程序名称:填入要跳转到的小程序名称

HTML: 点击下载

<html>  <head>    <title>打开小程序</title>    <meta http-equiv="Content-Type"content="text/html; charset=utf-8">    <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">    <script>      window.onerror=e=> {        console.error(e)        alert('发生错误'+ e)      }    </script>    <!-- weui 样式 -->    <link rel="stylesheet"href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>    <!-- 调试用的移动端 console -->    <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->    <!-- <script>eruda.init();</script> -->    <!-- 公众号 JSSDK -->    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>    <!-- 云开发 Web SDK -->    <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>    <script>      functiondocReady(fn) {        if (document.readyState ==='complete'|| document.readyState ==='interactive') {          fn()        } else {          document.addEventListener('DOMContentLoaded', fn);        }      }      docReady(asyncfunction() {        var ua = navigator.userAgent.toLowerCase()        varisWXWork=ua.match(/wxwork/i)=='wxwork'varisWeixin=!isWXWork&&ua.match(/micromessenger/i)=='micromessenger'varisMobile=falsevarisDesktop=falseif(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {          isMobile=true      }else{          isDesktop=true      }        if(isWeixin) {          varcontainerEl=document.getElementById('wechat-web-container')          containerEl.classList.remove('hidden')          containerEl.classList.add('full','wechat-web-container')          varlaunchBtn=document.getElementById('launch-btn')          launchBtn.addEventListener('ready',function(e) {            console.log('开放标签 ready')          })          launchBtn.addEventListener('launch',function(e) {            console.log('开放标签 success')          })          launchBtn.addEventListener('error',function(e) {            console.log('开放标签 fail', e.detail)          })          wx.config({            // debug: true, // 调试时可开启          appId:'小程序 AppID',// <!-- replace -->          timestamp:0,// 必填,填任意数字即可          nonceStr:'nonceStr',// 必填,填任意非空字符串即可          signature:'signature',// 必填,填任意非空字符串即可          jsApiList: ['chooseImage'],// 必填,随意一个接口即可          openTagList:['wx-open-launch-weapp'],// 填入打开小程序的开放标签名        })        }elseif(isDesktop) {          // 在 pc 上则给提示引导到手机端打开varcontainerEl=document.getElementById('desktop-web-container')          containerEl.classList.remove('hidden')          containerEl.classList.add('full','desktop-web-container')        }  else{          varcontainerEl=document.getElementById('public-web-container')          containerEl.classList.remove('hidden')          containerEl.classList.add('full','public-web-container')          varc=newcloud.Cloud({            // 必填,表示是未登录模式          identityless:true,            // 资源方 AppID          resourceAppid:'小程序 AppID',// <!-- replace -->// 资源方环境 ID          resourceEnv:'云开发环境 ID',// <!-- replace -->        })          awaitc.init()          window.c=c          varbuttonEl=document.getElementById('public-web-jump-button')          varbuttonLoadingEl=document.getElementById('public-web-jump-button-loading')          try{            awaitopenWeapp(()=>{              buttonEl.classList.remove('weui-btn_loading')              buttonLoadingEl.classList.add('hidden')            })          }catch(e) {            buttonEl.classList.remove('weui-btn_loading')            buttonLoadingEl.classList.add('hidden')            throwe          }        }      })      asyncfunctionopenWeapp(onBeforeJump) {        varc=window.c        constres=awaitc.callFunction({          name:'public',          data: {            action:'getUrlScheme',          },        })        console.warn(res)        if(onBeforeJump) {          onBeforeJump()        }        location.href=res.result.openlink      }    </script>    <style>      .hidden{        display: none;      }      .full{        position: absolute;        top: 0;        bottom: 0;        left: 0;        right: 0;      }      .public-web-container{        display: flex;        flex-direction: column;        align-items: center;      }      .public-web-container p{        position: absolute;        top: 40%;      }      .public-web-container a{        position: absolute;        bottom: 40%;      }      .wechat-web-container{        display: flex;        flex-direction: column;        align-items: center;      }      .wechat-web-container p{        position: absolute;        top: 40%;      }      .wechat-web-container wx-open-launch-weapp{        position: absolute;        bottom: 40%;        left: 0;        right: 0;        display: flex;        flex-direction: column;        align-items: center;      }      .desktop-web-container{        display: flex;        flex-direction: column;        align-items: center;      }      .desktop-web-container p{        position: absolute;        top: 40%;      }    </style>  </head>  <body>    <divclass="page full">      <divid="public-web-container"class="hidden">        <pclass="">正在打开 “填入你的小程序名称”...</p><!-- replace -->      <aid="public-web-jump-button"href="javascript:"class="weui-btn weui-btn_primary weui-btn_loading"onclick="openWeapp()">          <spanid="public-web-jump-button-loading"class="weui-primary-loading weui-primary-loading_transparent"><iclass="weui-primary-loading__dot"></i></span>          打开小程序        </a>      </div>      <divid="wechat-web-container"class="hidden">        <pclass="">点击以下按钮打开 “填入你的小程序名称”</p><!-- replace --><!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->      <wx-open-launch-weappid="launch-btn"username="小程序原始账号 ID(gh_ 开头的)"path="要跳转到的页面路径"><!-- replace -->        <template>            <buttonstyle="width: 200px;height: 45px;text-align: center;font-size: 17px;display: block;margin: 0 auto;padding: 8px 24px;border: none;border-radius: 4px;background-color: #07c160;color:#fff;">打开小程序</button>          </template>        </wx-open-launch-weapp>      </div>      <divid="desktop-web-container"class="hidden">        <pclass="">请在手机打开网页链接</p>      </div>    </div>  </body> </html>云函数 public: 点击下载

新建一个云函数,名为 public,然后将其 index.js 设为以下内容:

在云开发控制台中的设置 -> 权限设置中,将对应开通了静态网站的云环境开启未登录模式访问

在云开发控制台中的云函数 -> 权限设置中,配置安全规则,选择 “允许所有用户访问” 的模板并确认。如果需要更安全的控制,即只让 public 函数开启未登录访问,可参见底部安全规则模板

// 云函数入口文件constcloud=require('wx-server-sdk') cloud.init()// 云函数入口函数exports.main=async(event,context)=>{  constwxContext=cloud.getWXContext()  switch(event.action) {    case'getUrlScheme': {      returngetUrlScheme(event.options)    }  }  return'action not found'}asyncfunctiongetUrlScheme(options) {  returncloud.openapi.urlscheme.generate({    jumpWxa: {      path:'/page/component/index',// <!-- replace -->    query:'',    },    // 如果想不过期则置为 false,并可以存到数据库  isExpire:true,    // 一分钟有效期  expireTime:parseInt(Date.now()/1000+60),  }) }可选的进阶的云函数安全规则模板(只放开了让 public 云函数支持未登录访问):{  "*":{    "invoke":"auth != null" },  "public":{    "invoke":true } }

外部跳转至小程序的解决方案

小太阳的视频

方法三:通过同一开放平台绑定的APP拉起小程序

优势:只要绑定在同一开发账号下,无需再配置

缺点:仅对绑定的app才可实现微信外部跳转,网页及其他app暂不不支持

大家可以申请认证微信开放平台,将app、小程序、网页进行统一绑定。考虑到部分场景下 APP 需要通过小程序来承载服务,为此 OpenSDK 提供了移动应用(APP)拉起小程序功能。

移动应用(APP)接入此功能后,用户可以在 APP 中跳转至微信某一小程序的指定页面,完成服务后再跳回至原 APP 。移动应用拉起小程序功能已向全体开发者开放,开发者在微信开放平台帐号下申请移动应用并通过审核后,即可获得移动应用拉起小程序功能权限。

跳转规则:1、对于已通过认证的开放平台账号,其移动应用可以跳转至任何合法的小程序,且不限制跳转的小程序数量。2、对于未通过认证的开放平台账号,其移动应用仅可以跳转至同一开放平台账号下小程序。注意:若移动应用未上架,则最多只能跳转小程序100次/天,用于满足调试需求。优点:无需前两个方法的各种配置缺点:只适合同一个开放平台的app跳转至小程序,未绑定的其他app无法实现跳转,简单地讲,需要白名单APP才可跳转。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容