H5跳转微信小程序

Famous 2023-03-28 原文

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

一、微信内嵌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 看世界 ~

跳转微信小程序 strong gt code

有关H5跳转微信小程序的更多相关文章

微信小程序通过字典表匹配对应数据 - 2
前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
微信小程序开发入门与实战（Behaviors使用） - 2
@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中，用于实现
Ubuntu20.04系统WineHQ7.0安装微信 - 2
提供3种Ubuntu系统安装微信的方法，在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信：ubuntu20.04安装最新版微信--可以支持微信最新版，但是适配的不是特别好；比如WeChartOCR.exe报错。2.原生微信安装：linux系统下的微信安装(ubuntu20.04)--微信适配的最好，反应最快，但是微信版本只到2.1.1，版本太老，很多功能都没有。3.深度deepin-wine6安装微信：ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好，当前个人使用此种方法1个月，微信版本3.4；没什么大问题，尚可。一、WineHQ7.0安装微信
微信小程序订餐系统 - 2
对传统的餐饮商家来说，小程序很好地解决了餐厅线下线上连接的问题，在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序，商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式：1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同
最新版人脸识别小程序图片识别生成二维码签到地图上选点进行位置签到计算签到距离课程会议活动打卡日常考勤上课签到打卡考勤口令签到 - 2
技术选型1，前端小程序原生MINA框架cssJavaScriptWxml2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云开发数据库（基于MongoDB）云存储4，人脸识别算法基于百度智能云实现人脸识别一，用户端效果图预览老规矩我们先来看效果图，如果效果图符合你的需求，就继续往下看，如果不符合你的需求，可以跳过。1-1，登录注册页可以看到登录页有注册入口，注册页如下我们的注册，需要管理员审核，审核通过后才可以正常登录使用小程序1-2，个人中心页登录成功以后，我们会进入个人中心页我们在个人中心页可以注册人脸，因为我们做人脸识别签到，需要先注册人脸才可以进行人脸比对，进
ruby - 在 Vim 中使用 Ctags 跳转到 Ruby bang 方法 - 2
我在使用ExhuberantCtags跳转到Rubybang方法时遇到问题。我已经搜索过其他有类似问题的人，但找不到任何东西。可以使用以下小型Ruby类显示该问题的示例:classHellodefstartmethod!enddefmethod#Blahenddefmethod!#Blahendend当ctags-R.在此文件上运行时，生成的tags文件包含以下两行，表明这两种方法都是在生成时发现的:methodtest.rb/^defmethod$/;"fclass:Hellomethod!test.rb/^defmethod!$/;"fclass:Hello但是，如果我将光标放
微信小程序切换云环境 - 2
在开发微信小程序的时候，我们可能需要开发环境和测试环境，或者其他环境，下面是切换环境的方法。首先需要明确的是：前端的页面代码是不区分环境的，环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud，这个改完是没有用的，因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下，但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表，这里把test-cloud加到这个列表里，需要填写envId和alias，参照cloud1写就行。3、更
Spring Boot中的微信支付（小程序） - 2
前言微信支付是企业级项目中经常使用到的功能，作为后端开发人员，完整地掌握该技术是十分有必要的。一、申请流程和步骤图1-1注册微信支付账号获取微信小程序APPID获取微信商家的商户ID获取微信商家的API私钥配置微信支付回调地址绑定微信小程序和微信支付的关系搭建SpringBoot工程编写后台支付接口发布部署接口服务项目使用微信小程序或者UniAPP调用微信支付功能支付接口的封装配置jwt或者openid的token派发原生微信小程序完成支付对接二、注册商家2.1商户平台商家或者企业想要通过微信支付来进行商品的销售，必须先通过微信平台（pay.weixin.qq.com）去将商家进行注册。注册成
微信小程序顶部标题栏与胶囊对齐 - 2
介绍最近在做微信小程序时，顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了，在另外一款手机差很多。我在查阅资料后，提出了一种方法解决这个问题，即：在页面onLoad或组件created时，利用微信小程序提供的API，获取系统状态栏高度和胶囊信息，进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证，能做到精准对齐。理论胶囊样式应该是垂直居中，有1px的border，border-radius为18px。若要使顶部标题栏与胶囊对齐，则其高度必须是导航栏高度，标题栏内容也要垂直居中，顶部标题栏的外边距或内边距必须是状态栏高度。如果顶部