【微信小程序】微信小程序跳转H5页面的实现思路与方案
创始人
2024-01-22 11:35:18
0

需求简述

当前项目的主流程采用H5的方式编写。
在一些渠道的营销推广活动中,并不能直接跳转到网页,但可以跳转到微信小程序。
于是希望通过微信小程序,间接实现跳转H5页面的需求。

方法简述

有两种解决方案:
1.在微信小程序中打开H5页面,需要借助微信小程序web-view标签。
2.在微信小程序中保存链接,然后提醒用户在浏览器中打开。

具体途径

通过对两种方案的优化,我想到了六种具体的途径。
(一)微信小程序,首页为活动营销页面,页面中有一个按钮,点击进入含有web-view标签的H5具体功能页
(二)微信小程序,首页直接包含web-view标签
(三)微信小程序,进入首页时在onLoad中直接跳转到含有web-view功能页
(四)微信小程序,点击按钮,将链接保存到剪贴板中,并提示用户到浏览器中打开
(五)微信小程序,首页为web-view标签,进行打开方式判断,当打开方式为微信时,界面显示信息引导客户右上角选择用浏览器打开;当打开方式为浏览器时,正常访问
(六)微信小程序,点击按钮,跳转进入公众号,引导用户关注公众号后在公众号中继续业务

更多优化

在用户使用体验方面,值得注意的是,页面加载会需要一定的时间,可以通过增加加载动画、预置海报等方式优化。
在微信小程序体验方面,首屏可以通过预置海报或营销活动等方式,提高小程序的项目完整度,而不仅仅只是一个写了url的web-view标签。
其他功能方面,可以通过一些方法实现url中的传参,从而实现更加丰富的自定义功能。

六种方案中,我个人更建议的是第一种,体验较为完整。

具体代码

完整代码我就不写了,实在太简单了…

{url}}">

核心代码就这么一个标签而已
当然在此基础上,你还可以添加其他功能来实现参数传递,具体实现建议百度哦hh
如果需要通过页面跳转,navigatorTo和relaunch应注意根据业务需求选用

相关内容

热门资讯

黎城县司法局着眼复议调解“小切... 2025年10月31日,黎城县司法局就一起因打架纠纷引发的行政处罚案件成功组织调解,得到申请人的肯定...
行云流水!当甲骨文遇上十五运会 当甲骨文遇上十五运会,体操、蹦床、射箭……样样精通!这波甲骨文也不含蓄了!
新征程·新蓝图|大力提振消费 ... 10月28日发布的《中共中央关于制定国民经济和社会发展第十五个五年规划的建议》提出“大力提振消费”,...
律师如何进行业务谈判?(六) 我有国内各地的律师好友,如果你要寻找外地律师合作,请加我微信(hzm5349),我帮你推荐;如果你想...
“园区通”宣讲走进惠城高新区,... “园区通”政策宣讲是打通社保服务“最后一公里”的重要举措。日前,惠城高新区联合惠城区社保分局成功举办...
锋线缺人!曼联冬窗引援目标大揭... 随着赛季的深入,曼联的锋线阵容正面临着前所未有的挑战。舍什科的伤病困扰以及姆伯莫即将参加非洲杯,使得...
美国旧金山联储主席Daly:美... 美国旧金山联储主席Daly:美联储在微调政策后处于不错的位置。
里德·谢泼德:火箭队的新星崛起 在休斯顿的丰田中心球馆里,年轻的里德·谢泼德正用他出色的表现悄然改变人们对他的看法。这位年仅21岁的...
“央行规定5万,建行加码到1万... 11月5日,律师周筱赟称前往建设银行山东东营支行取现,被要求必须说明资金用途,引发持续热议。 8日晚...