H5页面跳转微信小程序

最新推荐文章于 2024-07-30 17:02:47 发布

天空是蓝的

最新推荐文章于 2024-07-30 17:02:47 发布

阅读量9.5k

点赞数 3

文章标签： h5跳转小程序

本文链接：https://blog.csdn.net/tianchengwei09/article/details/108399901

版权

简要

    首先非常开心，微信终于支持H5 HTML页面可以跳转到小程序。又多个一个扩展功能。

开始你的表演

官方API地址

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

一、配置“JS接口域名”公众号开发肯定需要配置安全域名的，必须

二、直接上html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <title>小程序跳转测试</title>
</head>
<body style="text-aligin:center;">
<wx-open-launch-weapp
        id="launch-btn"
        username="gh_e16de8f****" <!-- 这里填写小程序的原始ID -->
        path="/pages/index/index.html"> <!-- 这里填写跳转对于小程序的页面 注意这里的 .html -->
    <template>
        <style>.btn { padding: 12px width:200px;height:50px;}</style>
        <button class="btn">打开小程序</button>
    </template>
</wx-open-launch-weapp>

<script src="/js/jquery-1.12.4.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 至少必须是1.6版本 -->

<script>
    
    $(function () {
    
        // config 的参数以及签名=
        var url = location.href;
        $.get("url", function(response){
            if(response.status == 0) {
                var info = response.data;
                wx.config({
                    debug: false,
                    appId: info.appId,
                    timestamp: info.timestamp,
                    nonceStr: info.nonceStr,
                    signature: info.signature,
                    jsApiList: ["startRecord", "stopRecord", "onVoiceRecordEnd", "playVoice", "pauseVoice", "stopVoice", "onVoicePlayEnd", "uploadVoice", "downloadVoice", "chooseImage", "previewImage", "uploadImage", "downloadImage", "translateVoice", "getNetworkType", "openLocation", "getLocation"],//必须要不调用小程序标签渲染不出来
                    openTagList: ['wx-open-launch-weapp']//必须必须要不调用小程序标签渲染不出来
                });
            }
        });
        //=== 获取 config 的参数以及签名=== end
        
        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
            console.log('success');
        });
        btn.addEventListener('error', function (e) {
            console.log('fail', e.detail);
        });
    });


</script>
</body>
</html>

完活！

总结
1、H5调用小程序开放标签<wx-open-launch-weapp>,weapp代表是H5调用标签，wx-open-launch-app是带有APP的
2、HTML中使用对应<wx-open-launch-weapp>

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
  //在这里单独添加设计样式
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>
</wx-open-launch-weapp>

3、path:页面路径一定要加后缀.html,username：是小程序原始ID
4、config配置中一定要加入openTagList: [’wx-open-launch-weapp’]
5、微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上。