实战h5页面跳转到小程序

实战h5页面跳转到小程序

摘要：微信团队开放了h5页面点击跳转到授权的小程序，以下是我实战后的成果，还是挺实用的。这个功能又大大提升了小程序的能力，未来肯定大部分网页都会往小程序靠拢。

前提：
1、微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。（这个要求大部分用户都满足的了）
2、已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
3、已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

页面代码：

<wx-open-launch-weapp
            id="launch-btn"
            username="小程序原始id"
            path="pages/index/index.html"
    >
        <template>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                .weui-cell {
                    padding: 0px 15px;
                    position: relative;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                }
                .weui-cells {
                    margin-top: 1.17647059em;
                    background-color: #fff;
                    line-height: 1.47058824;
                    font-size: 17px;
                    overflow: hidden;
                    position: relative;
                }
                .weui-cell:before {
                    content: " ";
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 1px;
                    border-top: 1px solid #e5e5e5;
                    color: #e5e5e5;
                    -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
                    -webkit-transform: scaleY(.5);
                    transform: scaleY(.5);
                    left: 15px;
                    z-index: 2;
                }
                .weui-cell_access .weui-cell__ft:after {
                    content: " ";
                    display: inline-block;
                    height: 6px;
                    width: 6px;
                    border-width: 2px 2px 0 0;
                    border-color: #c8c8cd;
                    border-style: solid;
                    -webkit-transform: matrix(.71,.71,-.71,.71,0,0);
                    transform: matrix(.71,.71,-.71,.71,0,0);
                    position: absolute;
                    top: 50%;
                    margin-top: -4px;
                    right: 2px;
                }
                .weui-cell_access .weui-cell__ft {
                    padding-right: 13px;
                    position: relative;
                }
                .weui-cell__ft {
                    text-align: right;
                    color: #999;
                }
                .weui-cell_access {
                    -webkit-tap-highlight-color: rgba(0,0,0,0);
                    color: inherit;
                }
                p{
                    display: block;
                    margin-block-start: 1em;
                    margin-block-end: 1em;
                    margin-inline-start: 0px;
                    margin-inline-end: 0px;
                }
                .weui-cell__bd {
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                }
            </style>
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>
                        跳转到小程序
                    </p>
                </div>
                <!--<div class="weui-cell__ft">-->
                <!--</div>-->
            </a>
        </template>
    </wx-open-launch-weapp>

js代码:

<script>
    wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
			appId: '', // 必填，公众号的唯一标识
			timestamp: , // 必填，生成签名的时间戳
			nonceStr: '', // 必填，生成签名的随机串
			signature: '',// 必填，签名
            jsApiList:[],
            openTagList:['wx-open-launch-weapp']
        });
    wx.ready(function () {
        console.log('ready');
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
    });
    wx.error(function (res) {
        console.log(res);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
    });
    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>

热爱编程的您可复制链接交流：【小程序+云开发】(非技术勿扰）
分享不易，点赞关注给作者一点点鼓励，谢谢您！