本文介绍了如何在微信小程序中嵌入H5页面，包括使用web-view功能，创建不同目录如index、out和share，以及在app.json中配置首页，通过onload方法设置路径并传递参数。在实际开发中，需处理H5页面与小程序的交互，以及由此带来的逻辑挑战。
最近公司又筹备了一个新的项目，产品要求在微信小程序中嵌入h5页面并进行交互。
我的第一反应WTF？，你们产品能不能尊重下技术、了解下前端开发再胡乱提需求，小程序本身就是为了解决h5用户体验不流畅以及兼容性不强的问题才出现的，你现在让我用小程序重新嵌回体验那么差甚至自己都不想用的h5页面，心中一万个草拟马奔腾而过，更何况这两者交互才是最难得重头戏。
吐槽完了，但产品终归是产品，还是人家说了算，接下来回归重点。
查看过官方文档后发现小程序中竟然有web-view的功能在，还真的给h5页面留了个入口。开发中一共创建了三个目录，如下：
包括index（登录授权页面）、out（链接h5页面）、share（用于分享跳转）
首先在app.json中设置out目录中的index页面为首页（当然这里随你喜欢），代码非常简单粗暴，直接上（1、其中src为引入h5页面的路径 2、bindMessage用来监听h5页面的发送过来的数据）
接下来利用onload方法在js中配置路径
最低0.47元/天 解锁文章
扫一扫
5696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
