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

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

浏览量:801 时间: 来源:了不起的小六先生

最近公司又筹备了一个新的项目,产品要求在微信小程序中嵌入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页面做业务处理,如下图

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎