阅读 5588

公众号跳转H5

前言

一转眼我又已经两个月没更新了,进来真得是太忙了,而且现在换了大概的方向现在在写微信小程序,新的领域,学习的东西好多呀,今天分享一个这两个月以来遇到的难解决的一些问题吧~

微信开放标签

微信开放标签相信大家都很熟悉,是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签,网页开发者可安全便捷地使用微信或系统的能力,为微信用户提供更优质的网页体验。

此文档面向网页开发者,介绍微信开放标签如何使用及相关注意事项。需要注意的是,微信开放标签有最低的微信版本要求,一定要注意版本哦!

微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

<wx-open-launch-weapp> 标签到底怎么用

先贴官方文档,什么都没有官方专业(虽然这个官方写的也是很坑!🙄)

第一步:

简单来说就是把你要用这个标签的地址添加到微信公众平台

1、在浏览器中打开微信公众平台登录界面并登录到公众号管理后台。如下图所示

2、在公众号后台管理界面中将鼠标移动到右上角公众号图标上,在弹出的菜单中点击功能设置。如下图所示

3、在功能设置界面中点击JS接口安全域名,后面对应的设置按钮。如下图所示

4、然后在输入框中填写公众号后台服务器的域名,这个域名就是你要写的跳转H5页面的域名,并点击下方保存按钮。如下图所示

5、最后再次打开设置界面将验证文件下载下来上传到安全域名对应的服务器文件夹根目录下。如下图所示

到这里我们就完成了安全域名的设置。!!注意<wx-open-launch-weapp>标签一定要部署到服务器上,才会有作用!!

第二步和第三步

这两步放在一起来说,简单来说就是页面引进需要的js文件和openTagList列表的配置

1.根据官方文档【步骤2】提示,在页面加载时引进js文件

2.与使用JS-SDK配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过openTagList字段申请所需要的开放标签,否则将无法使用(同一个url仅需调用一次)。开放标签的申请和JS接口的申请相互独立,因此是可以同时申请的。

JS-SDK配置链接在这,此处有个注意!!配置的是wx-open-launch-weapp,要跳转APP是wx-open-launch-app,别踩雷!

第四步

先来看官方写法

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

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

- 深思
此时,我陷入了深思,此刻我想到了React.Fragment。在Vue里,我们会用template标签来包裹一些不能有父容器的复数同级标签。在React里近似的只有[React.Fragment](https://zh-hans.reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html),但是此刻我还不知道,我又进入到了另一个坑里,哈哈哈哈~试了下也是不管用的~😫  
复制代码

冷静下来,再来看官方文档!

虽然说得是Vue的冲突,但是我觉得React也有冲突啊!最后我还是经过了好多次实验才确定了用这个Script标签是正确的,因为我样式写错了!到这里真得是无奈的很想哭!🤣所以到这里我以为我结束了,可是接下来还有一处就是样式!

第五步

通过官方文档的描述,我们就清晰两点

  • 1.script内部创建的标签的样式和外面完全隔离,没有一丝关系
  • 2.只能用行内方式style的方式添加样式,className不可以

最后一大坑点!单位转换问题,项目用的是Taro所以是以1:1的方式进行转换,可是template标签内部是不会跟整体一样以1:1的方式转换,他是1.5:1的比例转化的。这是个px和rem的转化问题,可以细细继续研究下,我是试验出来的🤣 所以在写样式的时候注意数值要是1.5倍(屏幕750px的宽度,我要设置的高度实际是96px,radius是48px)

- Tips
为什么会是1.5倍,和同事讨论过,进行初步猜想,屏幕宽度375px,把屏幕化成10等份,每份就是37.5,根节点Taro转换之后的font-size是23.4375,所以算出基准值是37.5/23.4375=1.6,所以结论可能1.6倍值比1.5倍值可能更接近。初步猜测,有待证实😜  
复制代码

整体流程注意点

  • 首先,如果出现按钮无法跳转的情况,一定先是去确定wx.config是ok的,如果报错,那就根据相应的错误码,来找寻你的错误点。然后配置ok情况下,再去确认按钮问题,按钮样式是否过小,跳转的页面一定是.html的文件结尾等细节问题。
  • 其次要注意,此项功能的测试一定是部署到服务器并且真机的情况下,才能进项调试。不是真机按钮会不显示,这是正常现象。
  • 最后,注意样式问题。

结束

这个测试流程是很麻烦,所以解决本次问题也提交了很多次,麻烦了很多人,还在解决bug的路上遇见了很多人!心里感激!
当然,不只有这一种解决方式,还有很多种🤣🤣🤣可以解决,慢慢探索 ~

文章分类
前端
文章标签