最近公司又筹备了一个新的项目,产品要求在微信小程序中嵌入h5页面并进行交互。
我的第一反应WTF?,你们产品能不能尊重下技术、了解下前端开发再胡乱提需求,小程序本身就是为了解决h5用户体验不流畅以及兼容性不强的问题才出现的,你现在让我用小程序重新嵌回体验那么差甚至自己都不想用的h5页面,心中一万个草拟马奔腾而过,更何况这两者交互才是最难得重头戏。
吐槽完了,但产品终归是产品,还是人家说了算,接下来回归重点。
查看过官方文档后发现小程序中竟然有web-view的功能在,还真的给h5页面留了个入口。开发中一共创建了三个目录,如下:
包括index(登录授权页面)、out(链接h5页面)、share(用于分享跳转)

首先在app.json中设置out目录中的index页面为首页(当然这里随你喜欢),代码非常简单粗暴,直接上(1、其中src为引入h5页面的路径 2、bindMessage用来监听h5页面的发送过来的数据)

接下来利用onload方法在js中配置路径

当然要给h5页面在路径上传token和model来标记(这个不能遗漏),然后在你所跳转的h5页面做业务处理,如下图

之后所有的功能都要基于这样的跳转来实现(没错,让我们一起跳一跳,稍微一不留神逻辑就会全部打乱),这第一步部分是项目基本的配置和说明,我会持续更新,然后在下一节讲述在开发过程中所遇到的难点













