vue uniapp wx-open-launch-weapp开放标签的使用

未央627

已于 2024-03-05 16:11:57 修改

阅读量1.5k

点赞数 8

文章标签：微信 uni-app 前端

于 2024-03-04 16:49:51 首次发布

本文链接：https://blog.csdn.net/Weiyang627/article/details/136445899

版权

本文详细介绍了如何在Vue、React和uniapp中使用微信SDK的wx.open-launch-weapp功能，包括安装、配置、页面导入以及不同版本的使用方法和注意事项，特别关注了Vue3与uniapp3.0中的差异和小程序web-view的兼容性问题。

摘要由CSDN通过智能技术生成

1.官方文档：目录 | 微信开放文档

在Vue、React等框架中使用文档：目录 | 微信开放文档

2.wx.config配置方式参考上篇：uniapp开发h5 调用微信sdk 全网最全指南！！！！血泪史！！!_前端微信环境识别不了路径参数 h5可以-CSDN博客

3.使用方式

1-1: 安装：npm install weixin-js-sdk --save

1-2: 页面使用

import jweixin from 'weixin-js-sdk'

uniapp vue2.0

需要在main.js中引入：Vue.config.ignoredElements.push('wx-open-launch-weapp')

uniapp vue3.0

需要在main.js中引入

app.config.compilerOptions.isCustomElement = (tag) => { return tag.startsWith('wx-open-launch-weapp') }

1-3: config接口注入权限验证配置

    jweixin.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: obj.appId, // 必填，公众号的唯一标识
        timestamp: obj.timestamp, // 必填，生成签名的时间戳
        nonceStr: obj.noncestr, // 必填，生成签名的随机串
        signature: obj.signature,// 必填，签名
        jsApiList: ['wx-open-launch-weapp'],// 必填，需要使用的JS接口列表，这个地方必须至少写一个
        openTagList: ['wx-open-launch-weapp'],// 可选，需要使用的开放标签列表
    });
    jweixin.ready((e) => {
        this.dialog= true;
        console.log(e, '成功验证')
    })
    jweixin.error((e) => {
        console.log(e, '失败信息')
    })

1-4：wx-open-launch-weapp 标签使用

uniapp vue2.0

<wx-open-launch-weapp id="launch-btn" appid="wxa57bbff6c3505830" :path="path"
        >
            <script type='text/wxtag-template' style="display: block;">
                <style>
                    .u-button-primary{
                    background-color: #507FFF;
                    border: 1px solid #507FFF;
                    color: #fff;
                    font-size: 16px;
                    text-align: center;
                    line-height: 2.4;
                    border-radius: 4px;
                    }
                </style>
                <div class="u-button-primary">打开小程序</div>
            </script>
        </wx-open-launch-weapp>

uniapp vue3.0

在vue3中，html里面不支持查询<script>或<style>这种标签，写script标签报错，编译通不过，然后你需要用到特殊attribute is ，需要用vue3.0新增指令 v-is 。

<wx-open-launch-weapp id="launch-btn" appid="wxa57bbff6c3505830" :path="path"
        >
            <div v-is="'script'" type='text/wxtag-template' style="display: block;">
                <div v-is="'style'">
                    .u-button-primary{
                    background-color: #507FFF;
                    border: 1px solid #507FFF;
                    color: #fff;
                    font-size: 16px;
                    text-align: center;
                    line-height: 2.4;
                    border-radius: 4px;
                    }
                </div>
                <div class="u-button-primary">打开小程序</div>
            </div>
        </wx-open-launch-weapp>

注：开放标签按钮不显示

1.微信开发者工具、真机才能渲染该标签；真机才能跳转小程序，微信开发者工具不可以

2.开放标签默认是display:none隐藏的，设置设置成display:block才能显示按钮

3.小程序的 web-view 不支持 wx-open-launch-weapp