赞
踩
首先我之前出了一个,那是我成功跳转了以后的结果,但是第二天改样式的时候就失效了报错,报了两天的错误,回到正题.
我们首先把我们请求的函数放到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')
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。