vue3项目跳转到微信小程序_vue3如何跳转小程序页面

首先我们要认证公众号

然后给后端发起请求,请求一下代码

// 引入wxsdk
import wx from "weixin-js-sdk";
const isWxReady = ref(false)
const wxAppletData = ref({})//保存数据后端返回的数据
const getSign = async () => {
      let url = encodeURIComponent(location.href.split("#")[0])
      
      let  data  = await getShareSignNewApi(url);//这是我封装的请求接口方法 你们自己用自己封装的请求就好了
      if(data.code == 200){
        wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appid, // 必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr:data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature,// 必填，签名
              jsApiList: [
                    "updateAppMessageShareData", //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） 新接口
                    "updateTimelineShareData", //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
                  ],
              openTagList: ['wx-open-launch-app','wx-open-launch-weapp'],
            });
          wx.ready(function () {
            isWxReady.value = true
       
          });
          wx.error(function (res) {
            
          });
      }else{
          
      }
    };

然后我们在做一个最重要的步骤,没有它根本实现不了

在main.ts里面配置一下代码,不然按钮不会显示
app.isCustomElement = (tag) => tag.startsWith('wx-open-launch-weapp')

然后我们在template 部分引入一下代码

             <div class="navigateTowx-con">
              <wx-open-launch-weapp class="wx-open" id="launch-btn" appid="小程序AppId"  path="跳转的路径">
                  <div   v-is="'script'" type="text/wxtag-template" class="divSpan">
                      <span class="span span1">跳转</span>
                      <span class="span span2">我也唱一首</span>
                  </div>
              </wx-open-launch-weapp> 
             </div>
 
 v-is="'script'" //这个是vue3独有的配置

这个我琢磨了一天才实现的确实有点麻烦,建议看微信js-sdk文档

这是js-sdk地址
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html