微信小程序中内嵌一个h5页面

1.写好要嵌入的html页面
PS:我是用sublime编辑器编写的html页面,从后台服务器上面读取数据(富文本的内容),追加到body里面,再上传到前端服务器上面

微信小程序中内嵌一个h5页面

2.把h5文件夹(包括多个需要内嵌到小程序里面的html文件)上传到服务器上面
PS:可使用Xftp6**版,新建会话,填写主机、用户名和密码。去到自己的目录下,例如/home/xxx,把文件直接拖拽到/xxx目录下,可自动上传)

微信小程序中内嵌一个h5页面
微信小程序中内嵌一个h5页面
微信小程序中内嵌一个h5页面

3.小程序的 .wxml文件中使用web-view组件【微信公众平台–小程序开发–组件–开放能力–web-view】
PS:web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
<view>
  <web-view src="{{url}}"></web-view>
</view>
4.小程序的 .js文件中,获取服务器上面的h5文件夹中的html页面

微信小程序中内嵌一个h5页面

5.小程序内嵌h5页面的浏览效果如下:
PS:这是一个h5页面,从后台获取到的数据,文本+图片

微信小程序中内嵌一个h5页面