@liyucan/wx-open-tag NPM

二次封装的微信开放标签

支持框架

vue 2.x

封装背景

官方组件使用复杂，样式代码写在自定义组件中使得模板混乱并且不能被lint。
官方组件不支持vue响应式更新。
官方组件不支持在插槽中引用vue组件，图标等内容无法实现。
官方组件不支持vue的模板事件。
官方组件不支持通过代码button.click触发授权（受限于web-component技术，二次封装后也无法实现）。

支持程度

服务号订阅通知按钮：wx-open-subscribe
跳转小程序：wx-open-launch-weapp
跳转APP：wx-open-launch-app
音频播放：wx-open-audio

实现原理

将表现按钮覆盖在开放按钮上，利用点击穿透效果间接点击订阅按钮

注意事项

使用此包前需要引入并初始化微信JS-SDK，参考文档的步骤1~步骤5。
开放标签属于自定义标签，Vue会给予未知标签的警告，可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。

使用方式

使用npm安装此包

npm install --save @liyucan/wx-open-tag

在Vue文件中引入并注册

<template>
    <wx-open-tag
        tag="wx-open-subscribe"
        width="106px"
        height="56px"
        template="TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I"
        @success="handleSuccess"
        @error="handleError"
    >
        <button class="button">订阅公众号</button>
    </wx-open-tag>
</template>

<script>
import WxOpenTag from '@liyucan/wx-open-tag'
export default {
    name: 'subscribeBtn',
    components: { WxOpenTag },
    methods: {
        handleSuccess(data) {},
        handleError(error) {}
    }
}
</script>

<style lang="scss" scoped>
    .button {
        width: 100%;
        height: 100%;
    }
</style>

API 说明

具体说明请移步阅读官方文档

Props

通用Props

Name	Description	Type	Required	Default
tag	开放标签类型，默认订阅按钮，可选值有'wx-open-subscribe'(服务号订阅通知按钮)，'wx-open-launch-weapp'(跳转小程序按钮)，'wx-open-launch-app'(跳转APP按钮)	`String`	`false`	wx-open-subscribe
width	宽度	—	`true`	-
height	高度	—	`true`	-

tag值为wx-open-subscribe时有以下Props

Name	Description	Type	Required	Default
template	模版id，多个模版id以逗号隔开	`String`	`false`	-

tag值为wx-open-launch-weapp时有以下Props

Name	Description	Type	Required	Default
username	所需跳转的小程序原始id，即小程序对应的以gh_开头的id	`String`	`false`	-
path	所需跳转的小程序内页面路径及参数	`String`	`false`	-

tag值为wx-open-launch-app时有以下Props

Name	Description	Type	Required	Default
appid	所需跳转的AppID	`String`	`false`	-
extinfo	跳转所需额外信息	—	`false`	-

Events

tag值为wx-open-subscribe时有以下Events

Event Name	Description	Parameters
success	订阅成功事件	{errMsg: 'subscribe:ok', subscribeDetails: string}
error	订阅失败事件	{errMsg: string, errCode: string}

success返回值说明

Name	Type	Description
errMsg	string	按钮操作成功时errMsg值为'subscribe:ok'
subscribeDetails	string	TEMPLATE_ID是动态的键，即模版id，值包括：'accept'、'reject'、'cancel'、'filter'，'accept'表示用户同意订阅该条id对应的模版消息，'reject'表示用户拒绝订阅该条id对应的模版消息，'cancel'表示用户取消订阅该条id对应的模版消息，'filter'表示该模版应该标题同名被后台过滤。例如：{ errMsg: "subscribe:ok", subscribeDetails: "{"TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I":"{\"status\":\"accept\"}"}"表示用户同意订阅TenvU22BA1jCp4YHfYEpRuESXYReQyDuhs4vbdWA99I这条消息。

error返回值说明

Name	Type	Description
errMsg	string	订阅按钮调用失败错误信息
errCode	string	订阅按钮调用失败错误码，详细错误码需查阅官方文档

tag值为wx-open-launch-weapp时有以下Events

Event Name	Description	Parameters
ready	标签初始化完毕，可以进行点击操作	-
launch	用户点击跳转按钮并对确认弹窗进行操作后触发	{ userName: string, path: string }
error	用户点击跳转按钮后出现错误	{ errMsg: string, userName: string, path: string }

error返回值说明

Name	Type	Description
errMsg	string	"launch:fail"表示跳转失败

tag值为wx-open-launch-app时有以下Events

Event Name	Description	Parameters
ready	标签初始化完毕，可以进行点击操作	-
launch	用户点击跳转按钮并对确认弹窗进行操作后触发	{ appId: string, extInfo: string }
error	用户点击跳转按钮后出现错误	{ errMsg: string, appId: string, extInfo: string }

error返回值说明

Name	Type	Description
errMsg	string	"launch:fail"表示调⽤失败，或安卓上该应用未安装，或iOS上用户在弹窗上点击确认但该应⽤未安装；"launch:fail_check fail"表示校验App跳转权限失败，请确认是否正确绑定AppID

Slots

Name	Description	Default Slot Content
default	默认插槽实际展示的按钮	-

wx-open-tag 微信开放标签

@everything-registry/sub-chunk-554

1.0.0

3 years ago