<!--
* @Description:
* @Author: Southern Wind
* @Date: 2024-02-27 19:46:10
* @LastEditTime: 2024-04-08 11:34:49
* @FilePath: \h5\src\views\Index\Index.vue
-->
<script lang='ts' setup>
import wx from "weixin-js-sdk";
import { UserService } from "@/api/api";
import { onMounted, reactive, ref } from "vue";
onMounted(() => {
// login()
const load = async () => {
const res: any = await UserService.getjssign({ url: location.href });
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.data.signature, // 必填,签名
jsApiList: [],
openTagList: ["wx-open-subscribe"], // 必填,需要使用的JS接口列表
});
console.log(res);
let btn: any = document.getElementById("subscribe-btn");
wx.ready(function () {
btn.addEventListener("success", function (e: any) {
console.log("success", e.detail);
});
btn.addEventListener("error", function (e: any) {
console.log("fail", e.detail);
routerBtn()
});
});
};
load();
});
</script>
<template>
<div class="containers">
<wx-open-subscribe template="templateID" id="subscribe-btn" >
<component :is="'script'" type="text/wxtag-template">
<div class="btn" style=" text-align: center;
color: #664502;
line-height: 45px;
font-size: 16px;" >
点击进入
</div>
</component>
</wx-open-subscribe>
</div>
</template>
<style scoped lang='less'>
.containers {
width: 100%;
height: calc(100vh - 92px);
background: url(../../assets/image/bg1.jpg) no-repeat top center;
background-size: cover;
position: relative;
/* .cs {
width: 750px;
height: 30px;
background-color: black;
} */
#subscribe-btn {
position: absolute;
bottom: 153px;
left: 50%;
transform: translate(-50%, 0);
width: 360px;
height: 90px;
text-align: center;
line-height: 90px;
background: linear-gradient(-29deg, #ffaf03 22%, #ffde00 100%), #ffc600;
border-radius: 45px;
box-shadow: -15px 0px 9px 15px rgba(0, 53, 181, 0.19);
font-weight: 700;
}
}
</style>
注意以下几点:
- 使用
pnpm weuxub-js-jdk
安装微信依赖 - url需要传递完整路径,可以使用
location.href
- 标签部分需要后端给
templateID
wx-open-subscribe
标签中的样式需要用内联样式,或者在标签里面使用style进行包裹,不然无法更改自定义样式