【实战】H5跳转到小程序

原创 已于 2024-04-26 10:57:39 修改 · 2.4k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

于 2024-04-24 16:45:41 首次发布

目录

前置

获取接口调用凭据 | 微信开放文档
获取加密scheme码 | 微信开放文档

代码

配置

wechat:
  AppID: 
  AppSecret:

核心代码

跳转到小程序主页
import com.alibaba.fastjson2.JSON;
import com.alibaba.fastjson2.JSONObject;
import com.higentec.common.domain.R;
import com.higentec.seedTraceability.common.utils.StringUtils;
import com.higentec.seedTraceability.common.utils.http.HttpUtils;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author hanyl
 * @apiNote
 * @date 2024/4/24 15:57
 */
@RestController
@RequestMapping("/wx")
@Api(tags = "微信")
public class WxController
{

    @Value("${wechat.AppID}")
    private String WECHAT_APPID;

    @Value("${wechat.AppSecret}")
    private String WECHAT_APPSECRET;
    
    /**
     * 获取接口调用凭据，跳转到小程序主页
     */
    @ApiOperation(value = "获取接口调用凭据")
    @GetMapping("/cgi-bin/token")
    public R<String> token()
    {
        // https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
        String tokenResult = HttpUtils.sendGet
                ("https://api.weixin.qq.com/cgi-bin/token?appid="
                        + WECHAT_APPID
                        + "&secret="
                        + WECHAT_APPSECRET
                        + "&grant_type=client_credential");
        JSONObject tokenMap = (JSONObject) JSON.parse(tokenResult);
        String access_token = tokenMap.getString("access_token");
        if (StringUtils.isEmpty(access_token)){
            return R.fail("获取接口调用凭据失败");
        }
        // https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-scheme/generateScheme.html#%E6%8E%A5%E5%8F%A3%E8%AF%B4%E6%98%8E
        String link = HttpUtils.sendPost(
                "https://api.weixin.qq.com/wxa/generatescheme?access_token=" + access_token, "");
        JSONObject linkMap = (JSONObject) JSON.parse(link);
        if ("ok".equals(linkMap.getString("errmsg"))){
            return R.ok(linkMap.getString("openlink"));
        }
        return R.fail("暂时无法跳转小程序");
    }
}

跳转到指定页面
import cn.hutool.http.HttpUtil;
import com.alibaba.fastjson2.JSON;
import com.alibaba.fastjson2.JSONObject;
import com.higentec.common.domain.R;
import com.higentec.seedTraceability.common.utils.StringUtils;
import com.higentec.seedTraceability.common.utils.http.HttpUtils;
import com.higentec.seedTraceability.system.domain.vo.JumpWxaVo;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

/**
 * @author hanyl
 * @apiNote
 * @date 2024/4/24 15:57
 */
@RestController
@RequestMapping("/wx")
@Api(tags = "微信")
public class WxController {

    @Value("${wechat.AppID}")
    private String WECHAT_APPID;

    @Value("${wechat.AppSecret}")
    private String WECHAT_APPSECRET;

    /**
     * 获取接口调用凭据,跳转到指定页面
     */
    @ApiOperation(value = "获取接口调用凭据")
    @GetMapping("/cgi-bin/token")
    public R<String> token() {
        String tokenResult = HttpUtils.sendGet
                ("https://api.weixin.qq.com/cgi-bin/token?appid="
                        + WECHAT_APPID
                        + "&secret="
                        + WECHAT_APPSECRET
                        + "&grant_type=client_credential");
        JSONObject tokenMap = (JSONObject) JSON.parse(tokenResult);
        String access_token = tokenMap.getString("access_token");
        if (StringUtils.isEmpty(access_token)) {
            return R.fail("获取接口调用凭据失败");
        }

        //  https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-scheme/generateScheme.html#%E6%8E%A5%E5%8F%A3%E8%AF%B4%E6%98%8E
        Map<String, JumpWxaVo> paramMap = new HashMap<>();
        JumpWxaVo jump_wxa = new JumpWxaVo();
        jump_wxa.setPath("跳转页面");
        jump_wxa.setQuery("a=a&b=b");
        jump_wxa.setEnv_version("trial");
        paramMap.put("jump_wxa",jump_wxa);
        System.out.println(JSON.toJSONString(paramMap));
        String link = HttpUtil.post(
                "https://api.weixin.qq.com/wxa/generatescheme?access_token=" + access_token, JSON.toJSONString(paramMap));
        JSONObject linkMap = (JSONObject) JSON.parse(link);

        if ("ok".equals(linkMap.getString("errmsg"))) {
            return R.ok(linkMap.getString("openlink"));
        }
        return R.fail("暂时无法跳转小程序");
    }
}

测试

image.png

工具类

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.ConnectException;
import java.net.SocketTimeoutException;
import java.net.URL;
import java.net.URLConnection;
import java.nio.charset.StandardCharsets;
import java.security.cert.X509Certificate;
import javax.net.ssl.HostnameVerifier;
import javax.net.ssl.HttpsURLConnection;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLSession;
import javax.net.ssl.TrustManager;
import javax.net.ssl.X509TrustManager;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.higentec.seedTraceability.common.constant.Constants;
import com.higentec.seedTraceability.common.utils.StringUtils;

/**
 * 通用http发送方法
 * 
 * @author ruoyi
 */
public class HttpUtils
{
    private static final Logger log = LoggerFactory.getLogger(HttpUtils.class);

    /**
     * 向指定 URL 发送GET方法的请求
     *
     * @param url 发送请求的 URL
     * @return 所代表远程资源的响应结果
     */
    public static String sendGet(String url)
    {
        return sendGet(url, StringUtils.EMPTY);
    }

    /**
     * 向指定 URL 发送GET方法的请求
     *
     * @param url 发送请求的 URL
     * @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。
     * @return 所代表远程资源的响应结果
     */
    public static String sendGet(String url, String param)
    {
        return sendGet(url, param, Constants.UTF8);
    }

    /**
     * 向指定 URL 发送GET方法的请求
     *
     * @param url 发送请求的 URL
     * @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。
     * @param contentType 编码类型
     * @return 所代表远程资源的响应结果
     */
    public static String sendGet(String url, String param, String contentType)
    {
        StringBuilder result = new StringBuilder();
        BufferedReader in = null;
        try
        {
            String urlNameString = StringUtils.isNotBlank(param) ? url + "?" + param : url;
            log.info("sendGet - {}", urlNameString);
            URL realUrl = new URL(urlNameString);
            URLConnection connection = realUrl.openConnection();
            connection.setRequestProperty("accept", "*/*");
            connection.setRequestProperty("connection", "Keep-Alive");
            connection.setRequestProperty("user-agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64)");
            connection.connect();
            in = new BufferedReader(new InputStreamReader(connection.getInputStream(), contentType));
            String line;
            while ((line = in.readLine()) != null)
            {
                result.append(line);
            }
            log.info("recv - {}", result);
        }
        catch (ConnectException e)
        {
            log.error("调用HttpUtils.sendGet ConnectException, url=" + url + ",param=" + param, e);
        }
        catch (SocketTimeoutException e)
        {
            log.error("调用HttpUtils.sendGet SocketTimeoutException, url=" + url + ",param=" + param, e);
        }
        catch (IOException e)
        {
            log.error("调用HttpUtils.sendGet IOException, url=" + url + ",param=" + param, e);
        }
        catch (Exception e)
        {
            log.error("调用HttpsUtil.sendGet Exception, url=" + url + ",param=" + param, e);
        }
        finally
        {
            try
            {
                if (in != null)
                {
                    in.close();
                }
            }
            catch (Exception ex)
            {
                log.error("调用in.close Exception, url=" + url + ",param=" + param, ex);
            }
        }
        return result.toString();
    }

    /**
     * 向指定 URL 发送POST方法的请求
     *
     * @param url 发送请求的 URL
     * @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。
     * @return 所代表远程资源的响应结果
     */
    public static String sendPost(String url, String param)
    {
        PrintWriter out = null;
        BufferedReader in = null;
        StringBuilder result = new StringBuilder();
        try
        {
            log.info("sendPost - {}", url);
            URL realUrl = new URL(url);
            URLConnection conn = realUrl.openConnection();
            conn.setRequestProperty("accept", "*/*");
            conn.setRequestProperty("connection", "Keep-Alive");
            conn.setRequestProperty("user-agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64)");
            conn.setRequestProperty("Accept-Charset", "utf-8");
            conn.setRequestProperty("contentType", "utf-8");
            conn.setDoOutput(true);
            conn.setDoInput(true);
            out = new PrintWriter(conn.getOutputStream());
            out.print(param);
            out.flush();
            in = new BufferedReader(new InputStreamReader(conn.getInputStream(), StandardCharsets.UTF_8));
            String line;
            while ((line = in.readLine()) != null)
            {
                result.append(line);
            }
            log.info("recv - {}", result);
        }
        catch (ConnectException e)
        {
            log.error("调用HttpUtils.sendPost ConnectException, url=" + url + ",param=" + param, e);
        }
        catch (SocketTimeoutException e)
        {
            log.error("调用HttpUtils.sendPost SocketTimeoutException, url=" + url + ",param=" + param, e);
        }
        catch (IOException e)
        {
            log.error("调用HttpUtils.sendPost IOException, url=" + url + ",param=" + param, e);
        }
        catch (Exception e)
        {
            log.error("调用HttpsUtil.sendPost Exception, url=" + url + ",param=" + param, e);
        }
        finally
        {
            try
            {
                if (out != null)
                {
                    out.close();
                }
                if (in != null)
                {
                    in.close();
                }
            }
            catch (IOException ex)
            {
                log.error("调用in.close Exception, url=" + url + ",param=" + param, ex);
            }
        }
        return result.toString();
    }

    public static String sendSSLPost(String url, String param)
    {
        StringBuilder result = new StringBuilder();
        String urlNameString = url + "?" + param;
        try
        {
            log.info("sendSSLPost - {}", urlNameString);
            SSLContext sc = SSLContext.getInstance("SSL");
            sc.init(null, new TrustManager[] { new TrustAnyTrustManager() }, new java.security.SecureRandom());
            URL console = new URL(urlNameString);
            HttpsURLConnection conn = (HttpsURLConnection) console.openConnection();
            conn.setRequestProperty("accept", "*/*");
            conn.setRequestProperty("connection", "Keep-Alive");
            conn.setRequestProperty("user-agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64)");
            conn.setRequestProperty("Accept-Charset", "utf-8");
            conn.setRequestProperty("contentType", "utf-8");
            conn.setDoOutput(true);
            conn.setDoInput(true);

            conn.setSSLSocketFactory(sc.getSocketFactory());
            conn.setHostnameVerifier(new TrustAnyHostnameVerifier());
            conn.connect();
            InputStream is = conn.getInputStream();
            BufferedReader br = new BufferedReader(new InputStreamReader(is));
            String ret = "";
            while ((ret = br.readLine()) != null)
            {
                if (ret != null && !"".equals(ret.trim()))
                {
                    result.append(new String(ret.getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8));
                }
            }
            log.info("recv - {}", result);
            conn.disconnect();
            br.close();
        }
        catch (ConnectException e)
        {
            log.error("调用HttpUtils.sendSSLPost ConnectException, url=" + url + ",param=" + param, e);
        }
        catch (SocketTimeoutException e)
        {
            log.error("调用HttpUtils.sendSSLPost SocketTimeoutException, url=" + url + ",param=" + param, e);
        }
        catch (IOException e)
        {
            log.error("调用HttpUtils.sendSSLPost IOException, url=" + url + ",param=" + param, e);
        }
        catch (Exception e)
        {
            log.error("调用HttpsUtil.sendSSLPost Exception, url=" + url + ",param=" + param, e);
        }
        return result.toString();
    }

    private static class TrustAnyTrustManager implements X509TrustManager
    {
        @Override
        public void checkClientTrusted(X509Certificate[] chain, String authType)
        {
        }

        @Override
        public void checkServerTrusted(X509Certificate[] chain, String authType)
        {
        }

        @Override
        public X509Certificate[] getAcceptedIssuers()
        {
            return new X509Certificate[] {};
        }
    }

    private static class TrustAnyHostnameVerifier implements HostnameVerifier
    {
        @Override
        public boolean verify(String hostname, SSLSession session)
        {
            return true;
        }
    }
}

统一返回实体类

import com.higentec.common.constant.Constants;
import java.io.Serializable;

public class R<T> implements Serializable {
    private static final long serialVersionUID = 1L;
    public static final int SUCCESS;
    public static final int FAIL;
    private int code;
    private String msg;
    private T data;

    public R() {
    }

    public static <T> R<T> ok() {
        return restResult((Object)null, SUCCESS, (String)null);
    }

    public static <T> R<T> ok(T data) {
        return restResult(data, SUCCESS, (String)null);
    }

    public static <T> R<T> ok(T data, String msg) {
        return restResult(data, SUCCESS, msg);
    }

    public static <T> R<T> fail() {
        return restResult((Object)null, FAIL, (String)null);
    }

    public static <T> R<T> fail(String msg) {
        return restResult((Object)null, FAIL, msg);
    }

    public static <T> R<T> fail(T data) {
        return restResult(data, FAIL, (String)null);
    }

    public static <T> R<T> fail(T data, String msg) {
        return restResult(data, FAIL, msg);
    }

    public static <T> R<T> fail(int code, String msg) {
        return restResult((Object)null, code, msg);
    }

    private static <T> R<T> restResult(T data, int code, String msg) {
        R<T> apiResult = new R();
        apiResult.setCode(code);
        apiResult.setData(data);
        apiResult.setMsg(msg);
        return apiResult;
    }

    public int getCode() {
        return this.code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return this.msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return this.data;
    }

    public void setData(T data) {
        this.data = data;
    }

    static {
        SUCCESS = Constants.SUCCESS;
        FAIL = Constants.FAIL;
    }
}

生活的闲言碎语
最近打算加上生成二维码，然后下载。想做并发处理，一直没成功，ε=(´ο｀*)))唉。。。。
最近也比较忙，肩膀痛死了
又是发疯的一天

H5 静态页面跳转微信小程序
且听风吟的博客
03-03 2452
H5 静态页面跳转微信小程序
实现h5和微信小程序互相跳转
JavaScritp
12-30 5438
这个只需要用web-view标签即可，可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。
h5页面跳转微信小程序（最简单的方法|URL Scheme）
肥晨开发的学习之路
12-21 2万+
用户可以在H5页面中浏览和选择商品、服务等内容，然后直接跳转到微信小程序中进行购买、支付等操作，避免了在不同平台之间的切换和跳转，提高了使用效率和便捷性。微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮，无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序，见云开发静态网站跳转小程序。开发者无需调用平台接口，在MP平台->设置->隐私与安全->明文Scheme拉起此小程序声明后，可自行根据如下格式拼接appid和path等参数，作为明文 URL Scheme 链接。行业内幕，洞察先机。
如何实现网页一键跳转至微信小程序？超简单教程
最新发布
程序员飞云的博客
06-30 1394
本文介绍了微信H5跳转小程序的两种主流方案：基于云开发静态网站托管的跳转方式（需企业认证并付费），适用于微信内外各种浏览器环境；以及基于URL Scheme的跳转方式（适合已发布小程序），无需云服务但受跳转次数限制。第一种方案通过配置云函数和静态网页实现全平台跳转，第二种则通过生成特定链接直接在移动端唤起小程序。两种方法各有优劣，开发者可根据项目需求（如预算、用户场景等）选择合适方案。文中还提供了详细的操作步骤图示和代码示例。
H5网页跳转微信小程序
Qys1017的博客
10-14 8679
H5网页跳转微信小程序的需求普遍存在，因为微信小程序只能在微信内部访问，而H5页面可以在任何浏览器中访问，因此需要通过跳转来实现两者之间的衔接。
微信公众号开发之H5页面跳转到指定的小程序
zls365365的博客
02-15 4528
前言：　　最近公司有一个这样的需要，需要从我们在现有的公众号H5页面中加一个跳转到第三方小程序的按钮。之前只知道小程序之间是可以相互跳转的，今天查阅了下微信开发文档原来现在H5网页也支持小...
微信h5网页跳转小程序，以及跳转内嵌h5小程序指定页面
weixin_57286220的博客
05-06 5336
1）首先是在index.html中引进微信sdk。2）在该h5的vue里，如果h5页面可能会存在多种环境里，那么首先还需要判断微信h5网页环境： `isWeixinH5`（如果确定该h5页面只会存在微信网页中，那么可以不用判断）
微信小程序跳转到H5页面实战篇.pdf
02-22
.
小程序接入h5页面_微信小程序跳转到H5页面实战篇
weixin_39551993的博客
12-19 3179
有些场景需要从微信小程序跳转到H5页面，通常网上的教程会告诉你使用web-view组件就可以了，但实际开发中还有很多需要注意的地方，尤其是很多概念往往会把初学者弄糊涂了，下面就让我们从概念开始吧！微信小程序：虽然开发方法类似网页，但实际上是一种只能运行在微信自己开发的浏览器中的特殊网页，它所能够使用的所有功能都必须由微信浏览器提供；H5页面：这是真正的网页应用，运行在通用浏览器中，各种浏览器虽然在...
微信小11程序跳转到H5页面实战篇.docx
11-24
。。微信小11程序跳转到H5页面实战篇.docx
微信内h5跳转微信小程序
04-18
微信内打开H5页面，选择跳转任意微信小程序
微信小11程序跳转到H5页面实战篇.pdf
11-19
。。微信小11程序跳转到H5页面实战篇.pdf
H5页面跳转微信小程序
weixin_44074543的博客
05-05 1万+
H5页面跳转微信小程序
H5页面跳转小程序的三种方式
热门推荐
qq_41939902的博客
02-10 3万+
H5跳转小程序的三种方法
静态h5页面跳转到微信小程序
二豆不要二豆
11-06 2926
需要在「微信开发者工具 - 云开发 - 更多 - 静态网站」里进行，才能拥有免鉴权的能力。
【全方位指南】H5 无缝跳转微信小程序：打通用户体验的关键技术
毛毛的博客
05-19 3700
URL Scheme 技术为微信小程序提供了强大的外部连接能力，打通了小程序与外部环境的壁垒。通过本文的详细指南，开发者可以轻松实现从 H5 到微信小程序的无缝跳转，为用户提供更加流畅的使用体验，同时为企业带来更高的业务转化率。随着微信生态的不断完善，我们期待未来会有更多便捷的跨平台连接方案出现，进一步优化用户体验和业务流程。📢开发者提示：请务必注意 URL Scheme 的使用限制和安全策略，合理规划业务实现方案，避免因频率限制影响正常业务。如有更多技术问题，可参考微信官方文档。
Html5页面跳转小程序的三种方式
云加速
06-06 3288
首先需要在微信开放平台获取相应的权限和配置，然后在页面中引入微信JS-SDK，并在合适的时机调用跳转方法。： 如果条件允许，可以让用户在微信内嵌浏览器中打开HTML5页面，然后通过内嵌浏览器的跳转逻辑实现跳转。： 通过微信分享功能，将HTML5页面分享到微信会话或朋友圈，用户点击分享链接后，可以跳转到小程序。用户扫描小程序码后，可以进入小程序。这需要在HTML5页面中实现微信分享的逻辑，并在分享内容中嵌入小程序的跳转链接。这种方式需要用户在微信中打开HTML5页面，然后页面内部实现跳转逻辑。
Taro框架搭建小程序项目实战教程
该框架特别适合于开发微信小程序、H5、React Native等平台的应用。 ### 标题知识点 1. **Taro框架**: Taro是一个将React技术栈抽象出来的一种多端统一框架，使用它，开发者可以编写一套代码，然后Taro将其编译成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值