小程序内嵌H5

小程序官方介入指南

准备工作

1. 需要单独申请小程序的微信公众平台，这个一般都是产品或者运营来申请。到时候直接找他们要账号就可以了。

2. 把自己添加成开发者，最好把所有权限都开了吧。即使这样也还是有很多地方需要管理员的权限才行。

3. 下载微信开发者工具，在公众平台设置--开发设置中获取AppId。新建项目需要填写AppID。

4. 配置业务域名，在首页点击开发设置链接进入开发设置页面，把你要嵌入的网站域名添加进去，一定要是https的，而且域名必须通过ICP备案。如果不是https可以让运维申请一下。在这里还需要下载一个校验文件到自己项目的根目录，添加域名时会进行校验。

开发/调试/发布

1. 新建一个项目之后，因为我们只是需要把已有项目嵌入到小程序中（目的就是方便用户可以添加到桌面），所以可以把没有用的文件都删掉。

2. 嵌入网页用到了web-view组件，web-view组件是一个乐意用来承载网页的容器，网页会自动铺满整个小程序。

   <view class="container">
      <web-view src="https://xxx.com/user/html/login.html"></web-view> 
   </view>
   

   在web-view网页中可以使用JSSDK提供的接口，详情查看官方文档。

3. 在开发者工具上点击预览，管理员或者开发者可以通过手机扫码查看效果。

4. 在微信开发者工具中点击上传到小程序后台，然后在小程序后台的开发管理页面进行操作，将本次上传设置为体验版本。就可以查看测试版本。

5. 如果没有问题就点击提交审核，需要填写一些审核信息。然后直接提交就可以了。

6. 当小程序需要开发者提供测试帐号才能完成审核体验时，小程序在首次提交审核时将被打回，再次提交审核时将开放提供测试帐号的入口，该入口将由开发者提供帐号给微信审核人员审核微信小程序时登录使用。

7. 在审核期间，在开发管理页面可以查看审核进度，审核通过之后，手动点击发布，小程序才能正式发布到线上。

Tips

1. 网页中iframe的域名也需要配置到域名的白名单。

2. 开发者工具上，可以在 <web-view/> 组件页面上通右键 - 调试，打开 <web-view/> 组件的调试。

3. 每个页面只能有一个<web-view/>，<web-view/>会自动铺满整个页面，并覆盖其他组件。

4. <web-view/>网页与小程序之间不支持除JSSDK提供的接口之外的通信。

5. 在iOS中，若存在JSSDK接口调用无响应的情况，可在<web-view/>的src后面加个#wechat_redirect解决。

6. 项目的域名变成https之后，项目中引用的cdn上的文件也需要改成https的，否则没有办法加载。

扩展

公众号关联小程序

登录公众号后台 -- 小程序 -- 小程序管理 -- 添加 -- 添加小程序

公众号关联小程序后，将可在图文消息、自定义菜单、模板消息等功能中使用小程序。