在2020年的微信公开课上，微信官方宣布，小程序的重点目标是助力商家打造自己的商业闭环。而随着近期小程序热度的持续攀升，品牌零售商也纷纷强化了对这一重要自建渠道的重视。微信一直被戏称是H5网页的入口渠道，H5主要用于信息的传递实现人与信息的连接，借助H5能够实现简单的交互，主要以营销和信息传递为主简单的服务为辅。在公众号时代，各种炫酷吊炸天的H5网页就异常火爆。如今小程序异军突起，而且支持H5通过web-view组件嵌入H5网页与其融合，这对H5网页及各种H5工具又会带来怎样的挑战和机遇？

0

新机遇：专业H5工具的兴起

专业H5工具因为专业、上手难度大，其用户量一直在H5工具中垫底，但是用户和作品质量都是行业领先的，用户大多是专业设计师、运营、产品、程序员等。相比简易的设计工具而言，这类工具功能强大，不单单只是按照模版替换图片文字，傻瓜式操作已经满足不了当下形式的需求，一套规范的制作流程及生产工具已经迫在眉睫了。

以国内知名的H5专业设计工具Epub360为例子给大家介绍如何在微信小程序支持嵌入H5链接。

一.配置小程序

1.进入公众平台( https://mp.weixin.qq.com/ )，登陆小程序管理平台，找到开发栏下【开发设置】。

找到【业务域名】，点击修改按钮。

然后一定要按照自己的账号类型来填写对应的业务域名（ 如下表 ）：

账号类型H5作品发布域名填写业务域名体验版账号http://epub360.cnhttp://www.epub360.cn基础版账号http://epub360.com.cnhttp://www.epub360.com.cn专业版账号http://epub360.com.cn 或 http://m.creatby.com (*)http://epub360.com.cn 或 http://m.creatby.com (*)企业版账号／子帐号账号独立域名账号独立域名

如下图是专业版账号的小程序业务域名设置：

2.下载小程序校验文件。

提交工单申请将文件放入epub360根域名上，专业版需要另外支付费用开通，企业版则免费！工单申请地址：http://support.epub360.com/hc/request/new

3.复制Epub360作品发布网址。

4.小程序中通过 <web-view src="{{banner_url}}"></web-view>方式引入，如： <web-view src="https://www.epub360.com/manage/book/a0hj1b/present/"></web-view>

二.已修复BUG

关闭小程序，背景音乐可暂停。解决办法：https://blog.csdn.net/qq_41822157/article/details/90905228方法1：onhide()监听H5页面。缺点：所有渠道都生效。方法2: 使用微信提供的接口。优点：仅在微信里生效。内嵌的H5页面可以转发。参考解决办法：https://blog.csdn.net/weixin_41625322/article/details/82838445重写onShareAppMessage方法，配置分享链接为H5页面链接。小程序内可获取微信授权信息（头像/昵称）。

三、案例演示

微信搜 意派H5 小程序