H5跳转微信小程序

这问题,很多情况,分几类:

一、微信内嵌H5跳转内部微信小程序页

1. 小程序页内
<!--pages/webview/webview.wxml-->
<web-view src="https://abc.com/#/home"></web-view>

Tips:

  • 微信页面 webview 组件
  • 个人小程序不支持
  • abc.com 域名要加到小程序合法域名中
  • 微信开发者工具中测试时,勾选不校验域名~
2. H5项目中引入SDK
// 引入微信SDK
http://res.wx.qq.com/open/js/jweixin-1.6.0.js
// 或https
https://res.wx.qq.com/open/js/jweixin-1.6.0.js
// console.log(window.wx)
3. 跳转
  • tabbar页面
wx.miniProgram.switchTab({
   url: '/pages/index/index'
})
  • 非tabbar页面
wx.miniProgram.navigateTo({
   url: '/pages/activity/index'
})

Tips:

  • 给一个按钮来触发,需要用户主动触发才行
  • 小程序路径最前面别忘了是 /

二、微信内嵌H5跳转外部微信小程序页

  • 第一种即微信小程序中创建一中间页,背景加按钮,用户再点一下,跳转其他小程序页。
  • 由于上述方案多了中间页,需要用户再点一次,转化率和用户体验都不如原生小程序页,如果页面上内容不多,可以考虑直接用小程序页开发。
  • 那如果小程序不是你负责的内容,你只有H5 权限,那还可以试试下面的方案
(1) 开放标签wx-open-launch-weapp
  • 引入微信SDK,绑定安全域名,看完 上面内容一 应该已经做好
  • 解除页面上对陌生标签的警告(让页面开发心情愉悦)

1、vue2中

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

2、vue3中,有vue.config.js 的 非vite 项目

module.exports = {
  //...其他配置
  chainWebpack: config => {
    config.module
    .rule('vue')
    .use('vue-loader')
    .tap(options => {
      options.compilerOptions = {
        isCustomElement: tag => tag.startsWith('wx-')
      }
      return options
    })
  }
}

3、vue3中,有 vite.config.js 的 vite 项目

export default defineConfig({
  root: process.cwd(),
  base: './', // 如果是根目录部署请配置为 /  isProduction ? "./" : "/"
  // mode: process.env.NODE_ENV,
  publicDir: 'public',
  plugins: [
    vue({
      template: {
        // 添加以下内容
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('wx-') // 微信相关标签不要警告
        }
      }
    })
  ],
})

4、让后台配合给一个接口,获取微信的config参数
比如node 后台 可参照 node 获取微信签名并使用jssdk
其它语言的随便搜搜都有~
Tips

  • 上述步骤会需要企业小程序的appId 和appSecret,而不是对方的这些信息,提供你外跳的能力,此外成事后,开放的api 你都可以调用,比如分享
getWxConfig({
    wxMiniId: 'gh_xxxxxx', // gh开头的原始id,并非appId
    signUrl: window.location.href
}).then(res => {
    const data = res.data.data
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
        appId: data.appId, // 必填,公众号的唯一标识
        timestamp: data.timestamp, // 必填,生成签名的时间戳
        nonceStr: data.nonceStr, // 必填,生成签名的随机串
        signature: data.signature, // 必填,签名
        jsApiList: ['updateTimelineShareData'], // 必填,按需写
        openTagList: ['wx-open-launch-weapp'] // 可选,需使用开放标签,如['wx-open-launch-app']
    })
})

5、使用开放标签
vue2 中

<div style="position: relative; width: 100%; height: 300px">
<img src="http://pic5.40017.cn/i/ori/ed500-18AAgY6YGhW.jpg"/>
   <wx-open-launch-weapp 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" 
    username="gh_72a4eb2d4324" path="sub_inner_pages/r2x/pages/task- 
    home/task-home.html">
     <script type="text/wxtag-template"> <div style="position: absolute; top: 0; left: 
    0; width: 100%; height: 100%; opacity: 0">
     </div></script>
   </wx-open-launch-weapp>
</div>

vue3 中

<!-- 跳转小程序的开放标签 文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
<!-- vue3中使用微信开放标签 文档  https://blog.csdn.net/qq_26834399/article/details/119544394 -->

<div style="position: relative; width: 100%; height: 300px">
<img src="http://pic5.40017.cn/i/ori/ed500-18AAgY6YGhW.jpg"/>
            <wx-open-launch-weapp
              id="launch-btn"
              username="gh_72a4eb2d4324"
              path="sub_inner_pages/r2x/pages/task-home/task-home.html"
              style="
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
              "
            >
              <div v-is="'script'" type="text/wxtag-template">
                 <div style="width: 100%; color: orangered; text-align: center">
                   跳转外部小程序
                 </div>
              </div>
            </wx-open-launch-weapp>
</div>

Tips

  • 一般思路就是把标签定位在元素上方,用户点击后跳走,里面不加任何东西,当然也可以定位个按钮在原来的图片上等,自由发挥即可~

三、短信跳转微信小程序页

由于短信引流成本低,很多公司都使用这样的方式去吸引流量,核心是获取URL Scheme
可查阅微信官方文档
太长不想看?
核心几点如下:

  • 自2022年04月11日起,URL Scheme\color{orangered}{有效期最长 30 天,不再支持永久有效}
  • iOS系统支持识别 URL Scheme,短信等应用场景中可直接使用,安卓需要h5中间页。
    h5中间页??
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>过渡h5页面</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
</style>
<body>
</body>
<script type="text/javascript" async defer>
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) { return pair[1]; }
    }
    return (false);
  }
  // console.log(getQueryVariable('type'))
  // type 为 0就是A中转页 1就是B中转页
  var currentType = getQueryVariable('type') || 0
  currentType = Number(currentType)
  var smallRoutineUrl = ['weixin://dl/business/?t=ikYzkt4gxCm', 'weixin://dl/business/?t= *TICKET*'][currentType]
  window.location.href = smallRoutineUrl
</script>
</html>

Tips
如果你这个模板只服务一个短信链接,完全可以写死跳转的url,但是你想搞成通用的,可以像我上面这样封装下,根据类型去不同的小程序。然后URL Scheme也可以向后台实时获取新的,确保这个中间页的链接是有效的。

  • 获取URL Scheme的方法较繁琐,我们可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme
  • 只能生成已发布的小程序的 URL Scheme

由于不再支持永久有效,IOS也走中间页,在中间页动态获取有效的URL Scheme实现跳转

缺点:
这样后台要开发接口配合你来获取该链接,且你的h5地址如果很长,最好能生成短链,这样放在短信中不至于太长。

四、云开发静态网站跳转小程序

无公众号直接使用小程序身份开发网页并免鉴权跳转小程序?可以吗?
可以参考 官方文档


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

推荐阅读更多精彩内容