E企盈营销工具技术服务商 热线:4006-838-530

微信小程序嵌入h5项目问题总结(一)

E企盈直播平台营销卖货系统

最近公司又筹备了一个新的项目,产品要求在微信小程序中嵌入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页面做业务处理,如下图之后所有的功能都要基于这样的跳转来实现(没错,让我们一起跳一跳,稍微一不留神逻辑就会全部打乱),这第一步部分是项目基本的配置和说明,我会持续更新,然后在下一节讲述在开发过程中所遇到的难点

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序嵌入h5项目问题总结(一)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏