当前栏目
【微信小程序】微信小程序跳转H5页面的实现思路与方案
需求简述
当前项目的主流程采用H5的方式编写。
在一些渠道的营销推广活动中,并不能直接跳转到网页,但可以跳转到微信小程序。
于是希望通过微信小程序,间接实现跳转H5页面的需求。
方法简述
有两种解决方案:
1.在微信小程序中打开H5页面,需要借助微信小程序web-view标签。
2.在微信小程序中保存链接,然后提醒用户在浏览器中打开。
具体途径
通过对两种方案的优化,我想到了六种具体的途径。
(一)微信小程序,首页为活动营销页面,页面中有一个按钮,点击进入含有web-view标签的H5具体功能页
(二)微信小程序,首页直接包含web-view标签
(三)微信小程序,进入首页时在onLoad中直接跳转到含有web-view功能页
(四)微信小程序,点击按钮,将链接保存到剪贴板中,并提示用户到浏览器中打开
(五)微信小程序,首页为web-view标签,进行打开方式判断,当打开方式为微信时,界面显示信息引导客户右上角选择用浏览器打开;当打开方式为浏览器时,正常访问
(六)微信小程序,点击按钮,跳转进入公众号,引导用户关注公众号后在公众号中继续业务
更多优化
在用户使用体验方面,值得注意的是,页面加载会需要一定的时间,可以通过增加加载动画、预置海报等方式优化。
在微信小程序体验方面,首屏可以通过预置海报或营销活动等方式,提高小程序的项目完整度,而不仅仅只是一个写了url的web-view标签。
其他功能方面,可以通过一些方法实现url中的传参,从而实现更加丰富的自定义功能。
六种方案中,我个人更建议的是第一种,体验较为完整。
具体代码
完整代码我就不写了,实在太简单了…
<view>
<web-view src="{{url}}"></web-view>
</view>
核心代码就这么一个标签而已
当然在此基础上,你还可以添加其他功能来实现参数传递,具体实现建议百度哦hh
如果需要通过页面跳转,navigatorTo和relaunch应注意根据业务需求选用
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件