微信公众号开发之H5页面跳转到指定的小程序

本文涉及的产品
.cn 域名,1个 12个月
简介: 微信公众号开发之H5页面跳转到指定的小程序

前言:

  最近公司有一个这样的需要,需要从我们在现有的公众号H5页面中加一个跳转到第三方小程序的按钮。之前只知道小程序之间是可以相互跳转的,今天查阅了下微信开发文档原来现在H5网页也支持小程序之间的跳转了,下面就简单描述一下对接的流程。

微信公众号详细对接文档:

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

公众号关联小程序:

注意:在对接跳转之前我们需要在需要跳转的小程序关联到我们的公众号中。公众号可以关联同一主体的小程序10个,不同主体的3个。

1、进入公众号后台,路径:广告与服务——小程序—小程序管理—添加

1336199-20211014010043848-739634362.png

2、关联小程序—管理员微信扫码确认

1336199-20211014010156596-555172057.png

3、搜索小程序名称或APPID绑定

1336199-20211014010328673-2055959634.png

4、绑定成功等待小程序管理者同意

1336199-20211014010508700-1061264355.png

🚀回到顶部

查看小程序原始id:

小程序原始id,即小程序对应的以gh_开头的id

找到关联成功的小程序,鼠标放入其中找到详情查看小程序原始id

1336199-20211014010907209-356304797.png

1336199-20211014010922218-693307902.png

🚀回到顶部

绑定JS接口安全域名:

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

1336199-20211012001900843-270589454.png

1336199-20211012002006141-1002147130.png

微信JS-SDK的使用步骤,配置信息生成详细说明(.NET版):

https://www.cnblogs.com/Can-daydayup/p/11124092.html

跳转标签、前提条件和属性说明:

跳转小程序:wx-open-launch-weapp

用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167。

开放对象

  1. 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  2. 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

错误提示

若跳转时出现以下页面,表示网页绑定的服务号或小程序无权限,请检查是否符合上述开放对象条件。

AVNO5G9YvNvN45ZU0budE1Xv6i1NfyHD-DYJnDyLxv6yjFVhwD_SqdzWxEKAtaPs.png

属性

名称 必填 默认值 备注
username   所需跳转的小程序原始id,即小程序对应的以gh_开头的id
path   所需跳转的小程序内页面路径及参数(不填写的话默认跳转小程序首页)

代码实现:

注意:使用浏览器或者微信开发工具调试wx-open-launch-weapp开发标签都不会显示,只有在真机中才会有效果(前提还是config接口注入权限验证配置通过)。

<html>
<head>
    <title>H5打开小程序</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">
</head>
<body>
    <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?user=123&action=abc">
    <script type="text/wxtag-template">
      <style>.btn { padding: 12px }</style>
      <button class="btn">打开小程序</button>
    </script>
    </wx-open-launch-weapp>
    <!-- 公众号 JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!--js代码-->
    <script type="text/javascript">
        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
            console.log('success');
        });
        btn.addEventListener('error', function (e) {
            console.log('fail', e.detail);
        });
        wx.ready(function () {
            var ua = navigator.userAgent.toLowerCase()
            var isWXWork = ua.match(/wxwork/i) == 'wxwork'
            var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
            if (isWeixin) {
                wx.config({
                    //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
                    appId: 'ccccxxxx4354353453', // 必填,公众号的唯一标识
                    timestamp: 0123456, // 必填,生成签名的时间戳
                    nonceStr: 'nonceStr', // 必填,填任意非空字符串即可
                    signature: 'signature', // 必填,填任意非空字符串即可
                    jsApiList: ['showOptionMenu', 'chooseImage', 'previewImage'], // 必填,随意一个接口即可   
                    openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名  
                })
            }
            else {
                alert("请在微信中打开");
            }
        })
    </script>
</body>
</html>

实现效果:

1336199-20211012005002450-650540342.jpg

相关文章
|
10天前
|
小程序
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)
13 0
|
10天前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
12 0
|
10天前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
11 0
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
15 7
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
16 7
|
7天前
|
小程序 前端开发
微信综合购物商城小程序ui模板源码
微信电商小程序前端页面,综合购物商城ui界面模板。主要功能包含:电商主页、商品分类、购物车、购物车结算、我的个人中心管理、礼券、签到、新人专享、专栏、商品详情页、我的订单、我的余额、我的积分、我的收藏、我的地址、我的礼券等。这是一款非常齐全的电商小程序前端模板。
22 4
|
3天前
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
9 0
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的游戏账号交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的游戏账号交易微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信智能招聘小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信智能招聘小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
3天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信社团小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信社团小程序的详细设计和实现(源码+lw+部署文档+讲解等)