AspNetCore + VUE - 跳转小程序wx-open-launch-weapp

1.页面使用Vue结合微信开放标签

注意事项：<script> 标签，使用 <div v-is="'script'" type="text/wxtag-template"> 标签代替

style样式，直接写在标签内

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "~/Views/Shared/_Layout_NutUI.cshtml";
}

@section styles{
<link href="~/js/SysManage/Account/UserHasRegisted.css" asp-append-version="true" rel="stylesheet" />
}
@section scripts{
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="~/js/SysManage/Account/UserHasRegisted.js" asp-append-version="true"></script>
}

<div class="login-container" id="app">
    <nut-cell>
        <div style="text-align:center; width:100%; font-weight:bold;">用户已经注册</div>
    </nut-cell>
    <nut-empty description="本公众号仅用于接收消息，所有业务功能在小程序中操作。"></nut-empty>
    <nut-row>
        <nut-col :span="24">
            <div style=" text-align: center;margin-top:20px;margin-top: 20px;display: flex;flex-direction: column;align-items: center;">
                <wx-open-launch-weapp id="launch-btn" style="width: 100%;display: block;"
                                      appid="wx3fc3411d6ddcc62e"
                                      username="gh_xxxxxxxx"
                                      path="pages/login/login">
                    <div v-is="'script'" type="text/wxtag-template">
                        <view style="width: 100%;
                                color: var(--nut-button-success-color, var(--nut-white, #fff));
                                background: var(--nut-button-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%));
                                border: var(--nut-button-border-width, 1px) solid transparent;
                                position: relative;
                                display: inline-block;
                                flex-shrink: 0;
                                height: var(--nut-button-default-height, 38px);
                                box-sizing: border-box;
                                margin: 0;
                                padding: 0;
                                line-height: var(--nut-button-default-line-height, 36px);
                                font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14px));
                                text-align: center;
                                cursor: pointer;
                                transition: opacity .2s;
                                appearance: none;
                                user-select: none;
                                touch-action: manipulation;
                                vertical-align: bottom;
                                -webkit-tap-highlight-color: rgba(0,0,0,0);
                                -webkit-tap-highlight-color: transparent;">
                            <view style=" height: 100%;
                                width: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: center;">
                                <view class="">去往小程序</view>
                            </view>
                        </view>
                    </div>
                </wx-open-launch-weapp>
            </div>
        </nut-col>
    </nut-row>
    <br />
    <nut-row style="margin-top:30px">
        <nut-col :span="24">
            <div style=" text-align: center;">
                <input type="hidden" id="hfWebOpenId" value="@ViewData["WebOpenId"]" />
                <nut-button style="width:100%;" shape="square" type="success" v-on:click="sendmeWxMessageTest">发送测试消息</nut-button>
            </div>
        </nut-col>
    </nut-row>
</div>

2.js文件，获取微信验证信息

var app = Vue.createApp({
    data: function () {
        return {
            formData: {
                regEnterprise: '',
                username: '',
                password: '',
                phoneNumber: '',
                roleRemark: '其他',
                deptId: '',
                webOpenId: '',
            },
        }
    },
    methods: {
        getWxconfig: function () {
            let _thisVue = this;
            let url = encodeURIComponent(location.href.split('#')[0]) //获取锚点之前的链接
            axios.post("/SysManage/Sys_Account/GetJsSdkData?url=" + url, null)
                .then(function (response) {
                    var rlt = response.data;
                    if (rlt.isSuccess) {
                        _thisVue.wxinit(rlt.model);
                    }
                });
        },
        wxinit: function (res) {
            wx.config({
                debug: false,
                appId: res.appid,
                timestamp: res.timestamp,
                nonceStr: res.nonceStr,
                signature: res.signature,
                jsApiList: ['closeWindow'],
                openTagList: ['wx-open-launch-weapp'],
            });
            wx.ready(function () {
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
                //config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
                //对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            });
            wx.error(function (err) {
                console.log(err)
            });
        },
        sendmeWxMessageTest: function () {
            let _thisVue = this;
            axios.post("/SysManage/Sys_Account/SendmeWxMessageTest?webOpenId=" + _thisVue.formData.webOpenId, null)
                .then(function (response) {
                    var rlt = response.data;
                    if (rlt.isSuccess) {
                        alert('已发送');
                    }
                    else {
                        nutui.showNotify.warn(rlt.errorMesg);
                    }
                });
        },
    },
    mounted: function () {
        let _thisVue = this;
        _thisVue.formData.webOpenId = document.getElementById("hfWebOpenId").value;
        _thisVue.getWxconfig();
    },
});

app.config.ignoredElements = ['wx-open-launch-weapp'];
app.use(nutui);
app.mount("#app");