H5页面跳转到微信小程序页面

跳转微信小程序，这么写为什么不行呢

<div class="hktshare">
            <div>小程序</div> 
        </div>
            <div class="del_mask" id="hktshare_pop" style="display: none;">
                <div class="del_block">
                  <div class="del_content">即将打开"智能"小程序</div>
                  <div>
                     <div class="del_cancel" onclick="delhkt()">取消</div>
                     <!-- <div class="del_sure" v-on:click="surehkt()">确定</div> -->
                     <div class="wx_open_box">
                        <wx-open-launch-weapp id="launch-btn" username=" wxfe7a30139d06a90e" path="pages/index/index">
                            <template>
                                <button class="del_sure">确定</button>
                            </template>
                            <!-- <div class="del_sure" v-on:click="surehkt()">确定</div> -->
                        </wx-open-launch-weapp>
                  </div>
                  </div>
                </div>
             </div>


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


.hktshare{
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: #029dff;
    position: absolute;
    right: 1.5rem;
    top: 18rem;
    z-index: 99999999999999;
    color: white;
}
.hktshare div{
    margin: auto;
    text-align: center;
    line-height: 2.2rem;
}

.del_mask {
    /* position: fixed; */
    /* top: 15rem; */
    /* left: 10rem; */
    z-index: 20;
    /* width: 5rem; */
    /* height: 5rem; */
    background-color: rgba(0, 0, 0, 0.4);
    /* display: none; */
}

.del_block {
    top: 6.67rem;
    position: absolute;
    border-radius: 0.2rem;
    background-color: white;
    width: 85%;
    text-align: center;
    margin: 0 7.5%;
}

.del_content {
    /*border-radius: 0.2rem;*/
    padding: 2rem 0.5rem;
    /* border-bottom: 1px solid #bbb; */
    color: #212121;
    font-size: 0.6rem;
    font-weight: 600;
}

.del_cancel {
    float: left;
    line-height: 1.6rem;
    width: 49%;
    color: #212121;
    font-weight: 600;
}

.del_sure {
    float: left;
    line-height: 1.6rem;
    width: 49%;
    color: #4f7b97;
    font-weight: 600;
    /* border-left: 1px solid #bbb; */
}