查看: 2927|回复: 1

[UI模板] 静态网站H5跳小程序,URL Scheme,可从静态网页跳转小程序

[复制链接]
发表于 2021-3-25 09:55:24 | 显示全部楼层 |阅读模式
最近小程序上线了一个超级流量的新入口 URL Scheme。通过小程序页面的URL Scheme,可以在短信、邮件或微信外部的网页中打开小程序。

那么如何实现呢?官方文档已经写的很清楚啦,这里简单介绍一下。

首先,获取URL Scheme,通过服务端接口可以获取打开小程序任意页面的URL Scheme,支持生成到期失效和永久有效的URL Scheme。


  1. <script>
  2.         /*
  3.             微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。
  4.             参考文档
  5.             https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E5%BC%80%E6%94%BE%E6%A0%87%E7%AD%BE%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3
  6.             https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html

  7.         */
  8.         // 获取URLScheme,这里是固定死的,你需要后端开发人员为你准备个接口或云函数返回URLScheme
  9.         const getURLScheme=(path,query)=>{
  10.             return new Promise((resolve,reject)=>{
  11.                 setTimeout(() => {
  12.                     resolve("weixin://dl/business/?ticket=l259dfcade2d3996caf26803cf90b0dfe")
  13.                 }, 10);
  14.             })
  15.         }
  16.         // 外部手机浏览器打开URL Scheme,一般会有提示,接受打开即可
  17.         const openWeapp = async (onBeforeJump) => {
  18.             //获取url scheme
  19.             const openlink = await getURLScheme()
  20.             
  21.             if (onBeforeJump) {
  22.                 onBeforeJump()
  23.             }
  24.             location.href = openlink
  25.         }
  26.         // 使用开放标签打开小程序时调用,注入wx.config的配置信息,使用小程序云开发静态网站托管的网页可以绕过鉴权,公众号需要后端接口配合返回鉴权参数
  27.         const getWXConfig=async()=>{
  28.             const config={
  29.                 appId: 'wx8a3858382f37bce0', // 已认证的小程序appid或已认证的服务号appid
  30.                 timestamp: 0, // 必填,使用小程序云开发静态网站托管的网页填任意数字即可,无须鉴权
  31.                 nonceStr: 'nonceStr', // 必填,使用小程序云开发静态网站托管的网页填任意非空字符串即可,无须鉴权
  32.                 signature: 'signature', // 必填,使用小程序云开发静态网站托管的网页填任意非空字符串即可,无须鉴权
  33.             }
  34.    
  35.             return config
  36.         }
  37.         const start =async () => {
  38.             const ua = navigator.userAgent.toLowerCase()
  39.             // 企业微信
  40.             const isWXWork = ua.match(/wxwork/i) == 'wxwork'
  41.             // 微信浏览器
  42.             const isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'
  43.             let isMobile = false
  44.             let isDesktop = false
  45.             if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
  46.                 isMobile = true
  47.             } else {
  48.                 isDesktop = true
  49.             }
  50.    
  51.             if (isDesktop) {
  52.                 // 在 pc 上则给提示引导到手机端打开
  53.                 const containerEl = document.getElementById('desktop-web-container')
  54.                 containerEl.classList.remove('hidden')
  55.                 containerEl.classList.add('full', 'desktop-web-container')
  56.                 // 生成当前页面二维码
  57.                 new QRCode('qrcode', {
  58.                     text: document.URL,
  59.                     width: 200,
  60.                     height: 200,
  61.                     colorDark: '#000000',
  62.                     colorLight: '#ffffff',
  63.                     correctLevel: QRCode.CorrectLevel.H
  64.                 });
  65.             } else if (isWeixin) {
  66.                 //如果微信浏览器,通过开放标签打开小程序
  67.                 const containerEl = document.getElementById('wechat-web-container')
  68.                 containerEl.classList.remove('hidden')
  69.                 containerEl.classList.add('full', 'wechat-web-container')

  70.                 const launchBtn=document.getElementById('launch-btn')
  71.                 launchBtn.addEventListener('error', function (e) {
  72.                     console.log('用户拒绝跳转或跳转异常', e.detail)
  73.                 })
  74.                 const config=await getWXConfig()
  75.                 wx.config({
  76.                     ...config,
  77.                     jsApiList: ['chooseImage'], // 安卓上必填一个,随机即可
  78.                     openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
  79.                 })
  80.             } else {
  81.                 // 在非微信的外部手机浏览器使用URLScheme打开小程序
  82.                 const containerEl = document.getElementById('public-web-container')
  83.                 containerEl.classList.remove('hidden')
  84.                 containerEl.classList.add('full', 'public-web-container')
  85.                
  86.                 const buttonEl = document.getElementById('public-web-jump-button')
  87.                 const buttonLoadingIcon = document.getElementById('public-web-jump-button-loading-icon')
  88.                 const buttonLoadingText = document.getElementById('public-web-jump-button-loading-text')
  89.                 try {
  90.                     // 自动执行,打开URLScheme
  91.                     await openWeapp(() => {
  92.                         buttonEl.classList.remove('weui-btn_loading')
  93.                         buttonLoadingIcon.classList.add('hidden')
  94.                         buttonLoadingText.classList.add('hidden')
  95.                     })
  96.                 } catch (e) {}
  97.             }
  98.         }
  99.         start()
  100.     </script>
复制代码


然后,通过短信群发平台将获取的URL Scheme + 营销文案发送到用户的手机上。

最后,用户收到短信后,直接点击URL Scheme唤起微信,跳转到对应小程序页面,就是这么简单。

除此之外,还可以通过邮件或外部浏览器打开跳转小程序。

由于部分操作系统仍不支持直接识别URL Scheme,因此直接将Scheme发送给用户可能存在无法打开小程序的情况。

为此,我们可以先准备一个H5页面,再从H5页面跳转到URL Scheme实现打开小程序。

  1. location.href = 'weixin://dl/business/?ticket= *TICKET*'
复制代码
H5的示例代码【演示地址】可以直接下载,可以复用起来,基于官方的案例做了些改动,增加PC端打开时生成二维码方便手机扫码使用。

这次新能力的更新将使微信小程序不再局限于微信内部的流量,天花板被掀开啦。

而且短信和邮件营销的触达成本非常低,营销成本的压低也会催生出很多新的流量玩法,我们敬请期待吧。


jump.zip (3.02 KB, 下载次数: 4, 售价: 3 蚂蚁币)
回复

使用道具 举报

发表于 2021-4-1 19:55:13 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



快速回复 返回顶部 返回列表