【微信】h5跳转微信小程序_h5跳转小程序不开云服务-优快云博客

本文链接：https://blog.youkuaiyun.com/pompom86/article/details/126836558

h5静态页面跳转微信小程序

注意：只有发布过的小程序可以使用这个方案，不然无法获取 url schema

如果无法获取 url schema ，请检查小程序是否已发布

1 理论方案

主要有以下两种

1 云开发：静态页面在微信云上进行开发&托管（因为要收费，不采用）

2 小程序短链：向微信请求 url schema ，进行跳转

2 调用接口

小程序短链，主要有两个接口

1 获取微信小程序 token（GET）

https://api.weixin.qq.com/cgi-bin/token

params 中传参

appid（小程序开发管理后台获取）
secret（小程序开发管理后台获取）
grant_type = client_credential

2 获取 url schema（POST）

https://api.weixin.qq.com/wxa/generatescheme

params 中传参 access_token

body 中传参

{

"jump_wxa": {

"path": 小程序路径,

"query": 小程序传参

},

"expire_type": "0"

}

3 具体实现方案

1 token获取和页面配置写在服务器端

2 静态页面进行获取短链（从服务器）和跳转（调用微信能力）操作

一个静态页面展示，与服务器进行交互的接口需要自己开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳转页面</title>
</head>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

<body>
    <h1>跳转页面</h1>
    <button type="button" id="jump_wx">跳转小程序</button>
    
</body>

<script>

$("#jump_wx").click(function(){
    $.ajax({
        url : "todo", // 自定义地址
        type : "POST",
        dataType : 'json',
        data : {... , ...}, // 自定义传参
        success:function (data) {
            console.log(data);
            if(data.success){
                var openlink = data.data;
                window.location.href = openlink; // 跳转小程序
            }
        }
    })
});

</script>
</html>