taro 微信公众号_taro 微信H5跳转APP

使用"微信开放标签"可实现在微信内网页跳转APP的功能。

文档参考：

文档写的很简单，可能真的是因为代码量几乎为零吧~~but，网上参考资料也是几乎为零啊！！功能实现过程中遇到了很多坑。

最大的障碍就是：该开放标签内的文字不显示。

首先，我是基于taro框架开发的，文档主要代码如下：

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印

appId: '', // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: '', // 必填，生成签名的随机串

signature: '',// 必填，签名

jsApiList: [], // 必填，需要使用的JS接口列表

openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']

});复制代码

appid="your-appid" //注意，这里的appid指的是要跳转的APP的id，不是公众号的appId

extinfo="your-extinfo"

>

App内查看

复制代码

简单吧，实际上，如果你用原生框架写，这些代码差不多就能实现跳转功能了。

但是，在taro框架里，首先会遇到的问题就是跳转按钮的文字不显示，对于开放标签的使用，文档只有如下的使用说明。

所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。

如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。

插槽模版及样式均需要通过进行包裹。

对于Vue等视图框架，为了避免template标签冲突的问题，

可使用

来包裹插槽模版和样式。另外，对于具名插槽还需要通过slot属性声明插槽名称，

下文标签插槽中的default插槽为默认插槽，可不声明插槽名称。

对于标签事件，均可通过event.detail获得详细信息。

如果无特殊说明，下文标签事件说明中的返回值均指代event.detail中的内容。复制代码

然后我就按上述说明改写了对应的代码：

appid="your-appid" //注意，这里的appid指的是要跳转的APP的id，不是公众号的appId

extinfo="your-extinfo"

>

App内查看

复制代码

嗯，你很快就发现，在taro里不能像上面那样使用

搜搜搜，参考如下文章：

代码修改如下，总算不报错了：

App内查看

复制代码

然而，嗯~~~并没有生效。

最后，经过多次试验，终于跳出了这个大坑，代码如下：

appid={Config.clientAppId}

extinfo={}

>

style='font-size:14px;color: #ffffff;display:block;width:80px;border:0px;background:#F9482E;padding:0px;line-height:39px;height:39px;'

>立即打开

复制代码

要点总结：

1. 标签外面必须再包裹一个标签，并且该标签的样式只能采用内联样式。

2. 开放标签的文字必须使用button按钮，我试过div了，使用div文字会消失。

3. 文字的样式采用内联样式，样式才能生效。