vue3跳转到微信小程序成功案例,报错分析

首先我之前出了一个,那是我成功跳转了以后的结果,但是第二天改样式的时候就失效了报错,报了两天的错误,回到正题.

我们首先把我们请求的函数放到onMounted外面,这样我们签名的速度很快.用户体验更好.

然后我们要签名,请求,请求数据以后给微信发我们请求过来的一些参数.

签名请求和wx.config,wx,ready,实现有一下代码

import {ref,onMounted,} from "vue";
import{getCEshiQingqiudeHanshu,getShareSignNewApi}  from "@/api/http"
// 引入wxsdk
import wx from "weixin-js-sdk";
const wxAppletData = ref({})//保存数据后端返回的数据
import {  isWeixin } from "@/main"
const isWxReady = ref(false)
console.log("外面的isWeixin:",isWeixin)
console.log("外面的isWxReady:",isWxReady)
const getSign = async () => {
      console.log("isWxReady:",isWxReady)
      let url = encodeURIComponent(location.href.split("#")[0])
      let  data  = await getShareSignNewApi(url);//这是我封装的请求接口方法 你们自己用自己封装的请求就好了
      console.log("签名返回的data:",data)
      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
              console.log("wx.ready里面的:isWeixin:",isWeixin)
              console.log("wx.ready里面的:isWxReady:",isWxReady.value)
              console.log("wx.ready执行成功.....,会跳转:::::::")
              console.log("2024-1-4-12点:")
          });
        wx.error(function (res) {
            console.log("wx.error:执行了:",JSON.stringify(res))
          });
      }else{
          console.log("data.code不等于200......,,签名失败......")
      }
    };

然后在template里面写一下代码,这个部分非常重要,而且需要不懈式

         <!-- 跳转到微信小程序 -->
         <div class="navigateTowx ug-font" v-if=" isWxReady && isWeixin ">
              <wx-open-launch-weapp 
              id="launch-btn" 
              appid="appId" 
              path="这里写你的微信小程序跳转路径"
              @ready='ready'  // 这是跳转前准备
              @launch='launch', //跳转成功以后
              @error='error' ,   // 跳转不成功执行
               style="width: 200px;height:50px;display: flex;flex-direction: row;justify-content: center;">

      
                  这里非常非常重要,如果这里commponent不行你可以换div,然后加上v-is="'script'"
 
                <component v-bind:is="'script'" type="text/wxtag-template" style="display: block;width: 100%;height: 100%;text-align: center;">
                  <button class="btn" style=" outline: none;border: none;background: transparent;height: 50px;">
                      <img src="https://oss.edu.izdax.cn/izdax/static/nmt/sing_btn.png" alt="" style="width: 200px;text-align: center;height: 50px;">
                  </button>
                </component>
              </wx-open-launch-weapp>
         </div>

然后我们在vite.config.ts 

       template:{
        compilerOptions:{
          isCustomElement: (tag) => tag.includes('wx-open-launch-weapp')
        }
       }

然后在main.ts里面写一下代码

// 是做忽略微信标签的
app.config.compilerOptions.isCustomElement = (tag) => {
	  return tag.startsWith('wx-open-launch-weapp')
}