H5唤醒微信小程序指定页面

最新推荐文章于 2024-05-06 10:58:13 发布
最新推荐文章于 2024-05-06 10:58:13 发布
阅读量1.3k 收藏 1
点赞数
文章标签： 微信小程序 小程序 html5 vue.js 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alonesupermen/article/details/127870925
版权

在IOS和Android网页内打开小程序指定页面

RT,废话不多说，直接上代码

前端参考链接

微信开发者文档，以及示列html
微信公众号文档

JAVA控制器

@Controller
@RequestMapping("/html")
public class HtmlController <{>
    @Autowired
    private AdminWeixinService adminWeixinService;

    /**
     * 分享小程序
     * @param path 小程序path
     * @param env_version 默认值"release"。要打开的小程序版本。正式版为"release"，体验版为"trial"，开发版为"develop"，仅在微信外打开时生效。
     * @param model model
     * @return String
     */
    @GetMapping("/share-link")
    public String shareLink(@RequestParam("path") String path, @RequestParam(value = "env_version",required = false) String env_version, Model model) throws UnsupportedEncodingException <{>
        //获取appid和secret
        WxAppConfigVo vo = adminWeixinService.byType(AppTypeEnum.BUYER.getCode());
        //请求微信TOKEN
        JSONObject param = new JSONObject();
        param.put("grant_type","client_credential");
        param.put("appid",vo.getAppid());
        param.put("secret",vo.getSecret());
        String token = HttpUtils.sendGet("https://api.weixin.qq.com/cgi-bin/token", param, new JSONObject(), JSONObject.class, JSONObject::parseObject).getString("access_token");

        JSONObject param1 = new JSONObject();
        JSONObject jump = new JSONObject();
        if (path.contains("?"))<{>
            String[] pathArray = path.split("\\?");
            jump.put("path",pathArray[0]);
            jump.put("query",pathArray[1]);
        <}>else <{>
            jump.put("path",path);
        <}>
        if (StringUtils.isNotBlank(env_version))<{>
            jump.put("env_version",env_version);
        <}>
        param1.put("jump_wxa",jump);
        param1.put("is_expire",true);
        param1.put("expire_type",0);
        param1.put("expire_interval",100);
        String openLink = HttpUtils.sendPost("https://api.weixin.qq.com/wxa/generatescheme?access_token=" + token,param1,new JSONObject(),JSONObject.class,JSONObject::parseObject).getString("openlink");

        model.addAttribute("openLink", openLink);
        return "shareLink";
    <}>
<}>

shareLink.html,这个是放在服务器上

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>

    <script th:inline="javascript">
        const openLink = [[${openLink}]];
        function docReady(fn) {
            if (document.readyState === 'complete' || document.readyState === 'interactive') {
                fn()
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }
        docReady(async function() {
            var ua = navigator.userAgent.toLowerCase();
            var isWXWork = ua.match(/wxwork/i) == 'wxwork';
            var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger';
            var isMobile = false;
            var isDesktop = false;
            if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
                isMobile = true;
            } else {
                isDesktop = true;
            }

            if (isWeixin) {
                //是微信浏览器替换这里
                location.href = openLink;
            } else if (isDesktop) {
                // 在 pc 上则给提示引导到手机端打开
                var containerEl = document.getElementById('desktop-web-container')
                containerEl.classList.remove('hidden')
                containerEl.classList.add('full', 'desktop-web-container')
            }  else {
                var containerEl = document.getElementById('public-web-container')
                containerEl.classList.remove('hidden')
                containerEl.classList.add('full', 'public-web-container')
            }
        })

        function openWeapp() {
            location.href = 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>
<div class="page full">
    <div id="public-web-container" class="hidden">
        <img style="width: 100vw;height: 380px;display: block;"  src="https://cbte.obs.cn-south-1.myhuaweicloud.com/1/57/2022/07/27/20220727_0a0d3dc50df5e0429b0aa810456bc638fefb.png">
        <a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading" onclick="openWeapp()">
<!--            <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>-->
            打开小程序
        </a>
    </div>
    <div id="desktop-web-container" class="hidden">
        <p class="">请在手机打开网页链接</p>
    </div>
</div>
</body>
</html>


    /**
     * 分享小程序
     * @param path 小程序path
     * @param env_version 默认值"release"。要打开的小程序版本。正式版为"release"，体验版为"trial"，开发版为"develop"，仅在微信外打开时生效。
     * @param model model
     * @return String
     */
    @GetMapping("/share-link")
    public String shareLink(@RequestParam("path") String path, @RequestParam(value = "env_version",required = false) String env_version, Model model) throws UnsupportedEncodingException {
        //获取appid和secret
        WxAppConfigVo vo = commonRemoteAdminWeixinService.byType(AppTypeEnum.BUYER.getCode());
        //请求微信TOKEN
        JSONObject param = new JSONObject();
        param.put("grant_type","client_credential");
        param.put("appid",vo.getAppid());
        param.put("secret",vo.getSecret());
        String token = HttpUtils.sendGet("https://api.weixin.qq.com/cgi-bin/token", param, new JSONObject(), JSONObject.class, JSONObject::parseObject).getString("access_token");

        JSONObject param1 = new JSONObject();
        JSONObject jump = new JSONObject();
        if (path.contains("?")){
            String[] pathArray = path.split("\\?");
            jump.put("path",pathArray[0]);
            jump.put("query",pathArray[1]);
        }else {
            jump.put("path",path);
        }
        if (StringUtils.isNotBlank(env_version)){
            jump.put("env_version",env_version);
        }
        param1.put("jump_wxa",jump);
        param1.put("is_expire",true);
        param1.put("expire_type",0);
        param1.put("expire_interval",100);
        String openLink = HttpUtils.sendPost("https://api.weixin.qq.com/wxa/generatescheme?access_token=" + token,param1,new JSONObject(),JSONObject.class,JSONObject::parseObject).getString("openlink");

        model.addAttribute("openLink", openLink);
        return "shareLink";
    }

分享到朋友圈使用代码

			uni.share({
					provider: 'weixin',
					type: 0,
					scene: 'WXSenceTimeline',
					href: this.getWeAppHttps(),
					title: this.productInfo.productName || '',
					imageUrl: this.productInfo.productIndexImg,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
			});
			//生成小程序https链接
		getWeAppHttps() {
			const baseURL = 'https://xxxx.cn';
			const { sellerPrice, productId, skuId, productName } = this.productInfo;
			const appid = getApp().globalData.appId;
			const memberId = uni.getStorageSync('memberId');
			const query = {
				appid,
				path: `subPackages/goodDetails/productDetail?pid=${memberId}&productId=${productId}&skuId=${skuId}&share=true`,
				env_version: 'release' //默认值"release"。正式版为"release"，体验版为"trial"，开发版为"develop"，仅在微信外打开时生效。
			};
			const pathURI = encodeURIComponent(query.path);
			console.log(`${baseURL}/admin/html/share-link?path=${pathURI}&env_version=${query.env_version}`);
			return `${baseURL}/admin/html/share-link?path=${pathURI}`;
		},

完结撒花

alonesupermen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5页面跳转小程序的三种方式
qq_41939902的博客
02-10 2万+
H5跳转小程序的三种方法
H5页面打开微信小程序
m0_67401382的博客
08-01 7271
背景用于实现外部H5页面中实现打开微信小程序的功能(微信内打开请使用微信开放标签方式)，用户在网页中一键唤起小程序，能够给用户提供更好的体验。微信官方文档https//developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html。整体思路前端调用后端接口，后端调用微信接口生成UrlScheme返回给前端，前端得到UrlScheme后，打开该链接即可实现跳转。...
h5页面唤起微信小程序（vue）
weixin_40918145的博客
08-26 1万+
腾讯文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 前提 请确保小程序是已认证的非个人主体的小程序，或者已认证的服务号 · “JS接口安全域名” 已经绑定（登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名
微信h5网页跳转小程序，以及跳转内嵌h5小程序指定页面
最新发布
weixin_57286220的博客
05-06 568
1）首先是在index.html中引进微信sdk。2）在该h5的vue里，如果h5页面可能会存在多种环境里，那么首先还需要判断微信h5网页环境： `isWeixinH5`（如果确定该h5页面只会存在微信网页中，那么可以不用判断）
外部H5页面打开微信小程序最新流程
qq_33539839的博客
11-23 5362
当前时间2022年11月22日，记录一下外部H5如何打开指定微信小程序的指定页面最新流程。以上适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。建议这步由后端完成请求方式：POST(这个token后端根据微信接口可以生成，不做详细介绍，可参考)这里的即是微信小程序 scheme 码，注意：自 2022 年 4 月 11 日起，URL Scheme有效期最长 30 天，不再支持永久有效的URL Scheme、不再区分短期有效URL Scheme与长期有效URL Scheme。
h5跳转微信小程序 wx-open-launch-weapp
qzmlyshao的博客
06-06 3682
wx-open-launch-weapp 是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验。此文档面向网页开发者，介绍微信开放标签如何使用及相关注意事项。需要注意的是，微信开放标签有最低的微信版本要求，以及最低的系统版本要求。微信版本要求为：7.0.12及以上系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
H5页面跳转到小程序的几种实现方法
qq_42756356的博客
07-10 1万+
h5跳转小程序方法
H5页面跳转到小程序页面
ppxgf的博客
09-28 909
H5页面跳转到小程序页面
H5页面嵌入第三方微信小程序
xymxwz的博客
10-30 5613
一、背景 前段时间收到了这样一个需求，想做一个微信小程序来嵌到第三方小程序里。瞬间上头。。什么奇葩需求，一听就知道项目经理肯定把它和微信公众号混了，觉得都是微信肯定都行。我是觉得不行的，如果你们谁有实现过这个功能的请告诉我下。 二、解决方案 后来我去微信官方文档看了下，发现微信有一个 web-view的方法可以接入三方网页的。嗯我想这样应该可以满足他们嵌入三方小程序的需求。顾与项目经理三方技...
微信小程序-H5UI微信小程序
08-06
【微信小程序-H5UI微信小程序】是一个专为微信小程序开发设计的前端框架，它基于H5技术，旨在提供一套简洁、高效且易于使用的组件库，帮助开发者快速构建微信小程序的用户界面。H5UI微信小程序集成了丰富的UI元素，...
微信内h5跳转微信小程序
04-18
- `path`：小程序页面路径，最多50个字符，必须以`/`开头。 - `extraData`（可选）：传递给目标小程序的数据，会在`onLoad`函数中以`query`对象形式得到。 - `envVersion`（可选）：指定基础库版本，用于兼容旧...
h5页面跳转微信小程序（最简单的方法-URL Scheme）
12-21
H5页面跳转微信小程序的需求是普遍存在的。由于微信小程序是一种只能在微信内部访问的应用程序，而H5页面可以在任何浏览器中访问，因此需要通过跳转来实现两者之间的衔接。 对于用户来说，H5页面跳转微信小程序可以...
H5套壳微信小程序，实现付款功能
03-25
这部分代码会与H5页面进行交互，例如通过调用微信小程序的API来显示支付结果。 `apy`可能是“API”的拼写错误，它可能是一个PHP库或者一个包含支付接口调用的文件，用于处理与微信支付服务器的通信。 总的来说，这...
基于uniapp微信小程序我的钱包页面
03-26
而uniapp作为一款跨平台开发框架，能够帮助开发者快速构建H5、微信小程序、支付宝小程序等多个平台的应用。本教程将深入探讨如何使用uniapp来开发一个“我的钱包”页面，主要涉及以下几个关键知识点： 1. **uniapp...
uniapp h5跳转微信小程序（wx-open-launch-weapp）跳转
qq_37962440的博客
03-31 815
uniapp h5跳转微信小程序（wx-open-launch-weapp）跳转。
uniapp项目编译成H5后跳转到微信小程序（支持微信扫码、支付宝扫码）
weixin_51185283的博客
03-09 1642
H5跳转微信小程序
H5唤起微信小程序
热门推荐
前端阿皓
08-04 2万+
此文章讲述H5唤起微信小程序(可指定页面并携带参数) 一、H5微信外部浏览器唤起小程序(App里面嵌入的H5也可以唤起) 注意：生成URL Scheme的必要前提：小程序不能是个人的，小程序必须已经上线发布了 1、第一种：携带静态参数或者不携带参数生成URL Scheme 2、第二种：携带动态参数生成URL Scheme 通过调用后台接口生成URL Scheme，将要跳转的小程序路径及动态参数传过去，后台返回一个URL Scheme 调用demo 3、生成URL Scheme之后，就可以进行H5跳
在h5中调起微信打开指定链接 （不能实现，直接回怼）
weixin_49798182的博客
11-29 2503
其中，openWechatLink方法接受一个参数，即要打开的链接地址。在方法内部，先判断是否存在WeixinJSBridge对象，如果不存在则监听WeixinJSBridgeReady事件，等待微信JS桥接准备好后再调用openLink方法打开链接；如果存在则直接调用openLink方法打开链接。openLink方法内部使用WeixinJSBridge.invoke方法来调起微信打开链接。
uniapp h5跳转微信小程序（wx-open-launch-weapp）
qq_53590046的博客
01-04 1万+
h5使用wx-open-launch-weapp标签跳转微信小程序
h5 打开微信后跳转指定页面
05-23
要在 H5 页面中打开微信并跳转到指定页面，可以尝试以下代码： ```javascript // 判断是否在微信内置浏览器中打开 if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) { // 微信中打开，跳转到指定页面 window.location.href = 'weixin://dl/business/?ticket_id=123456789'; } else { // 非微信中打开，给出提示 alert('请使用微信打开此页面'); } ``` 其中，`weixin://dl/business/?ticket_id=123456789` 是一个微信的链接协议，可以在微信中打开特定的页面。具体的链接协议格式和参数可以根据实际场景进行调整。需要注意的是，该方法只在微信中有效，在其他浏览器中会给出提示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值