微信开放标签

微信开放标签相信大家都很熟悉，是微信公众平台面向网页开发者提供的扩展标签集合。 通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验 。此文档面向网页开发者，介绍微信开放标签如何使用及相关注意事项。 需要注意的是，微信开放标签有最低的微信版本要求，一定要注意版本哦！ #微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。

第一步：

第二步

在公众号设置里面找到功能设置里面填写你的域名，如果你的项目没有下载过文档上的文件，那么下载它放在你域名的根目录下面就可以了
复制代码

第三步：

在你的项目中引入wx的js res.wx.qq.com/open/js/jwe… 此处第一个坑来了，在安卓和ios上不同的是。如果你的页面启用了https，那么你在必须引入res.wx.qq.com/open/js/jwe… 否则会在ios9.0以上系统中成功使用jssdk。 接下来你需要后端配合你配置一些wx.config需要的参数，直接上代码

此处有个注意！！配置的是wx-open-launch-weapp，要跳转APP是wx-open-launch-app，别踩坑。

第四步 先看一下官方的代码

此处踩雷是我踩的最多的！

首先template标签，在这里肯定是不好用的，所以我们先来了解一下HTML5的，template标签看完这里，我们应该想到我们项目用到的是React，react是通过扩展语言jsx来书写Html页面的，
也是通过babel转译成普通js代码来让浏览器识别的。jsx渲染大家都知道特使通过大小写的方式来识别组件和正常标签的，
所以template标签会被转化为原生元素，浏览器是没有这个原生元素的，所以就产生了问题。
复制代码

接下来我们在看一下官方文档

虽然说得是vue，但是我感觉react也是一样的。所以接下看在看代码

这里注意一下script标签，script内部创建的标签的样式和外面完全隔离，没有一丝关系,所以只能用行内方式style的方式添加样式，className不可以。

结束

基本上上述描述应该可以满足大家的开发需求，也是记一次自己走过的路。测试的时候还是很麻烦的，因为只能跳转线上小程序，但愿上线的是没有问题。