记一次vue静态页面跳转微信小程序

最新推荐文章于 2024-07-03 13:46:16 发布

九族高兴的摸不到头脑

最新推荐文章于 2024-07-03 13:46:16 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue 微信小程序

本文链接：https://blog.csdn.net/XXCJLRC/article/details/124433406

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

功能

1.普通图片点击跳转小程序

2.轮播图跳转小程序

实现

1.普通图片跳转微信小程序十分简单,官网有教程，在这里展示一下我的代码

//标签代码          
  <wx-open-launch-weapp
              id="launch-btn"
              username="小程序原始idf"
              :path="目标小程序页面地址"
            >
               <script type="text/wxtag-template">
                <style>.btn {width: 414px; height: 200px;opacity:0;}</style>
                <img :src="item.ad_image" class="btn"/>//这一段根据自己的需求随便写，但是必须要有内容必须有大小。
              </script>
            </wx-open-launch-weapp> 

//JS代码
axios({
      method: "POST",
      url: 接口地址,
      data: { url: href },
    }).then(function (res) {
      console.log(res);
      if (res.status == 200) {
        console.log(res.data.sign);
        wx.config({
          debug: false,
          appId: res.data.appid,
          timestamp: res.data.timestamp,
          nonceStr: res.data.nonce_str,
          signature: res.data.sign,
          jsApiList: ["scanQRCode"],
          openTagList: ["wx-open-launch-weapp"], // 可选，需要使用的开放标签列表，例如[‘wx-open-launch-weapp’]
        });
        wx.error(function (res) {
          console.log(res);
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
      }
    });

这个接口是专门用来获取wx.config中参数的，我之前脑子一抽自己就写了，后边还得改回来。

wx.config中的代码是用来向wx官网获取微信开放标签的使用权限，注意！！！！必须是将项目部署到服务器上，把这个域名交给后台，让他把你的域名添加到小程序安全域名里边。

2.轮播图跳转小程序我轮播图用的element ui

<el-carousel :interval="5000" arrow="always" >
    <el-carousel-item v-for="(item,index) in mainImg" :key="index" >

      <!-- <div style="height:200px" v-for="(item1,index) in canshu" :key="index"> -->
        <div>
          <div
            style="
              width: 414px;
              height: 200px;
              opacity: 0;
              position: absolute;
              z-index: 7777;
             
            "
          >
            <wx-open-launch-weapp
              id="launch-btn"
              username="原始id"
              :path="地址"
            >
               <script type="text/wxtag-template">
                <style>.btn {width: 414px; height: 200px;opacity:0;}</style>
                <img :src="item.ad_image" class="btn"/>
              </script>
            </wx-open-launch-weapp> 
          </div>
          <img :src="item.ad_image" style="position: relative; z-index: 1;width: 414px;height:200px;" >
        </div>
    </el-carousel-item>
  </el-carousel>

另外，我在使用时，发现在手机上轮播图左右滑动与轮播图跳转小程序是不能一起实现的，在网上也没有找到解决办法，各位大佬如果有解决的思路还请在下方留言。

第一次写文章，有什么表述不清楚的，可以留言问我呦。