H5 跳转小程序

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、h5跳转小程序

1. 引入JS文件

   在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

   如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

二、使用步骤

代码如下（示例）：

<wx-open-launch-weapp
      class="weapp"
      id="launch-btn"
      username="" //填写原始ID
      path="pages/main/main"
       @launch="handleLaunchFn"
              @error="handleErrorFn"
    >
  <script type="text/wxtag-template">
       <div style="width: 100%; height: 76px;" v-if="showTrue">打开小程序</div>
    </script>
    <div v-is="script" type="text/wxtag-template" style="display: block" v-if="showTrue">
        <button class="btn">打开小程序</button>
      </div>
    </wx-open-launch-weapp> -->
  <button class="AccordionTitleL LEFTTEXT">打开小程序</button> 

```c
 this.$axios({
           method: "post",
           url: "http://gc.xintianye.cn/app/wechat/getRandom",
           data: {
             appid: "",//填写appid
             secret: "",//填写secret
             url: location.href.split('#')[0]
             ),
           }, //es6语法，相当于{id:id}
           dataType: "json",
         })
           .then(function (ret) {
			 
             _this.$wx.config({
               debug: false,
               appId: "",//填写APPid
               timestamp: ret.data.resData.timestamp, //生成签名的时间戳
               nonceStr: ret.data.resData.noncestr, //生成签名的随机串
               signature: ret.data.resData.signature, //签名
               jsApiList: ["chooseImage","getLocation","getLocalImgData"],
               openTagList: ["wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
             });
             _this.$wx.ready(function () {
               console.log('66666666')
               // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
               var btn = document.getElementById("launch-btn");
               btn.addEventListener("launch", function (e) {
                 console.log('eeeeee',e)

               });
               btn.addEventListener("error", function (e) {
                 console.log('error',e)

               });
             });
              _this.$wx.error(function(res){
                console.log(res,'error6666666666')
                     // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                 });
           })

该处使用的url网络请求的数据。

---

总结

例如：以上就是微信公众号跳转小程序的步骤，友情提示需要在线上才能看到获取wx-open-launch-weapp的权限，本地调试是看不到的。