h5跳转微信小程序

近期上线的项目中,添加了这样一个新需求:分享给微信好友链接之后,打开链接跳转到微信的小程序。于是乎我翻开了微信的开发文档:我调研到了两种方式,第一种是根据微信平台提供的接口生成openlink(通过获取url scheme码,可以实现“短信、邮件、外部网页、微信内等拉起小程序的业务场景”。),另外一种是使用微信提供的开放标签wx-open-launch-app

效果展示

pc端效果

image.png

手机端效果

image.png

跳转的链接参数固定或不携带

如果你进行跳转的链接不需要携带参数或者参数固定那么可以直接在微信公众平台下图示意的地方生成一个scheme,然后跳转(location.href)指向这个scheme就可以了。

image.png

关于实现跳转的两种方式

可惜啊没那么简单,我需要携带一个动态生成的参数key,上面提到了有两种方式可以获取这个我们需要的scheme,这两种方式各有优劣。

首先说一下我用第一种方式踩到的坑,第一种方式看别人说可能存在不支持安卓系统微信内部浏览器直接跳转的情况(缓存问题),这样的话我认为可以在链接的后面拼上一个时间戳参数然后生成一个scheme再进行跳转(没有实际尝试,一种不知道可行与否的解决方案)。不过,我用了很多安卓手机测试,都支持跳转,感觉可能是因为我生成的scheme码携带了动态参数。

关于第二种,我没有采用,一方面是因为开通微信的云开发服务需要付费,另一方面是过程麻烦!!
所以接下来就详细的说一下采用第一种方式,根据微信提供的接口,生成openlink跳转。

获取url scheme实现跳转

文档上面说的很清晰,首先需要根据参数access_token、jump_wxa生成我们需要的生成的小程序scheme码

image.png

image.png
大概了解之后,我把文档的链接发给了后端帮忙协助提供给我一个返回scheme参数的接口,然后获取到scheme url进行跳转。前端看着文档也可以轻轻松松处理~~~

前端代码

// 根据key以及分享页面path跳转小程序
			getScheme(key){
				getSchemeUrl({
					key: key,
					path: 'pages/companyHomePage/jobDetails/index'
				}).then(res => {
					this.schemeUrl = JSON.parse(res.data.scheme).openlink; //获取到的schemeUrl
					console.log(this.schemeUrl);
					location.href = this.schemeUrl;
					console.log(this.curKey);
				}).catch(err => {
					console.log(err);
				})
			},
复制代码

接口响应:
image.png

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享