微信小程序web-view ， 嵌入H5页面

需求：

1、将已开发好的H5页面，嵌入先有的小程序。

2、并且要实现H5支付功能

解决方式 ：web-view

1、 登陆 小程序管理后台

a 如果是公众号 。则进行双向绑定

完成这一步 ，那么基本上就差不多成功了一大半

2、在小程序里面嵌入h5

web-view

文档里面有的东西，就不赘述le~

a在小程序里面定义一个你想要的H5入口

b 新建一个页面，用来放H5的链接

ok~现在已经完成h5的嵌入

3、h5实现支付功能 - 唤醒微信支付

目前只有这种实现方式。等待微信更新 支持小程序的web-view可以唤醒微信支付

总结：

个人见解： 微信内置浏览器， 打开微信公众号H5页面，也可以唤醒微信支付。微信小程序里面web-view相当于小程序的内置浏览器，暂时不支持唤醒微信支付。虽然小程序是在微信里面，但是web-view又和微信内置浏览器不同~ 感觉微信想把小程序独立出来~

根据以上需求和限制大致的思路如下：

调整好css后发现， button 并不能挡住 video 组件正中间的播放按钮，对比同类的实现产品，应该是增加了一层遮罩，显示视频预览图，点击播放后消失，于是增加一层 cover-image

通过定位将遮罩的铺满video组件，但是产生了以下几个bug：

在网上大致一搜没有很好的解决方法， cover-view 这个组件看来只能够用于一些简单实用的场景，在当前的需求下实现难度很大

通过不断对比同类的产品，我发现了一个实现思路：

微信小程序框架（Vuejs）

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生

APP 体验的服务。整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言

WXML 和 WXSS，以及基于 JavaScript

的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

在刚接触微信小程序的时候，就是官方提供的这个框架，其实该框架的思想和vue还是有相似之处，正所谓万变不离其宗。只不过这个框架就是直接使用微信小程序所需要的wxml、wxss等文件，而其他框架最终打包生成的文件才是官方所需要的。所以我建议就是初学者，还是可以先使用或学习下该框架，更能直接的了解小程序和学习。所以初学者值得推荐。

以上就是关于微信小程序web-view ， 嵌入H5页面全部的内容，包括:微信小程序web-view ， 嵌入H5页面、小程序使用cover-view和cover-image、微信小程序框架解析等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！