h5页面与小程序（h5页面与小程序的关系）

今天给各位分享h5页面与小程序的知识，其中也会对h5页面与小程序的关系进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、小程序与H5如何互相跳转
• 2、移动端开发选择小程序和选择H5有什么不同？两者有何区别？
• 3、H5与小程序数据交互
• 4、小程序和H5的区别是什么？餐饮业应该选择用哪一种模式？
• 5、小程序和H5页面的相互跳转
• 6、到底 H5 和小程序哪个好？一张表告诉你

小程序与H5如何互相跳转

需要用到小程序的web-view， 官方文档链接

web-view是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。写法如下：

注：当在微信开发中工具里返回“{"base_resp":{"ret":-1}}”时，需要点左上角“设置”--“项目设置”--勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”

因为外部h5无法跳转到小程序，因此需要把h5内嵌到小程序的web-view中。

一：首页小程序内嵌h5网页,内嵌这一步就相当于上面的小程序跳转h5：

二：然后在内嵌的网页里引入js，调用wx.miniProgram.navigateTo跳转小程序方法，可在url后拼接要传的参数：

三：小程序接受参数的页面：

index.wxml:

index.js

这样就从h5跳到小程序指定的页面并且可以拿到我们想要传的参数

原文作者技术博客：

95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。

欢迎留言交流

移动端开发选择小程序和选择H5有什么不同？两者有何区别？

现在但凡只要是有微信的人都对微信的小程序不陌生，而且微信小程序的数量早已达到数百万个，其实现在不但只有微信小程序，包括支付宝、百度甚至头条等等都开始了自己小程序之路。这样企业在 开发移动端 的时候就会面临一个问题是选择 开发小程序 还是H5好呢？所以 济南文汇传媒 的我就来总结一下小程序和H5的区别，来看一下两者有何不同？让您能更好地选择。

首先先来看一下二者在概念上的区别：

小程序：就是依赖于微信或其他APP上的一个应用形式，无法脱离其所在的APP。

H5：可以单纯地认为是网页，用在移动端或者PC端的网页开发技术。

再来看一下二者其他方面的区别：

一、开发的成本不同

小程序因为是在特定的环境中去开发，所以它的组件、UI都是确定好了的，也不用去考虑兼容问题，修改的次数就会减少，这样成本会低一些。

H5在开发时会有开发工具的选择、框架的选择、UI的选择等问题，还要兼顾到浏览器是否兼容的问题，可能会面临多次修改，这样会增加成本。

二、加载速度的不同

在速度上，小程序依然基于APP端去实现，这样在使用时就感到很流畅。

因为H5是网页的原因，所以如果有很多功能或者图片需要加载的话，可能会比较慢一些。

三、运行环境的不同

前面我们说到了小程序只能在特定的APP端内运行，所以没有APP端也就无法使用小程序。

H5是网页，只要有浏览器就可以使用，手机自身的浏览器就可以使用。

四、用户体验的不同

H5网页是在浏览器内使用，如果网速不佳或者网页上需要加载的东西过多就会出现“很卡”的现象。

小程序在首次使用的时候是需要查找的，可能不会很精准，但是一旦使用之后页面加载等就会很流畅了。

好了，上面的这些内容就是关于小程序与H5之前的区别，其实两者各有优缺点，还是根本自身的成本问题或者需求进行选择吧。

H5与小程序数据交互

 功能已通过原生+vue混合开发的方式实现了，现需要将这个功能原封不动的搬到微信小程序。综合各方面评估，选择了微信小程序套webview的方式实现（若时间允许，建议还是通过小程序实现）。

 采用小程序webview的方式，可以复用大部分H5页面，但H5调用的原生方法还是需要重新实现。实现方式主要分以下几种情况（当然也可以通过jssdk的方式去实现 ，但不在本文讨论范围内）：

 (1) 获取照片，可通过html的input标签实现；

 (2) 获取经纬度，可通过webview的url拼接参数实现；

  (3) 人脸识别，可通过H5调起刷脸小程序的方式实现。

 下面主要描述下第3种情况的实现方式。

 H5与小程序交互所涉及的数据部分主要包括两块：

 (1)H5如何将数据传给小程序？

   url参数拼接。

 (2)小程序如何将数据传给H5？

   wx.setStorage及wx.getStorage。

 详细流程如图所示。

 webview小程序pageA调起人脸小程序pageB，pageB回退到pageA。因为pageA重新设置了webview的url，其所嵌套的H5与历史H5页面无法进行数据共享，导致业务功能无法继续。解决办法就是调起人脸小程序之前，在H5页面先将必要的信息通过 localStorage.setItem 保存，人脸识别结束回到H5页面时，再通过 localStorage. getItem 获取所需要的业务数据。

小程序和H5的区别是什么？餐饮业应该选择用哪一种模式？

昨天公司点外卖的时候碰到了一个商家，用的界面是网页版的。一开始不注意看的时候，还觉得是小程序。后来发现原来是H5界面。其实用H5也能够满足商家基本的点餐需求，那为什么还是有很多商家选择寻找专业的小程序开发公司来设计点餐小程序呢？

小程序是一个微型的APP，能够满足用户在手机端的点餐体验。但是小程序目前没有开发PC端，也就意味着小程序转发之后只能够通过手机端来查看，不能在PC端下单。而H5能够在PC端打开，就像是一个依附在微信上的网页。壹来客发现，很多商家都会纠结这两种模式应该选择哪一种呢？

1.后台数据储备功能

H5就像是一个一次性的餐盒，在用过一次之后就不会有痕迹。而且H5只能够通过分享的链接进入，没有能够保存起来的接口。但是小程序就不一样了。用过的小程序能够在最近使用当中显示，直接点击最近使用接口就能够进入小程序当中。

而且更重要的是，小程序有后台数据储备功能。用户在使用小程序进行下单之后，相关的数据会传输到后台进行储存，这样运营者可以通过后台对数据进行分析，更加精准了解到用户的偏好。但是H5不会对数据进行储存，用户使用过的痕迹会在订单结束之后被磨灭掉。因此，小程序更适合于想要长期发展的餐饮业。

2.使用流畅度和体验感

在使用H5进行点单的时候，很多人都发现H5界面其实很容易卡顿。看到了一个菜想下单，等它加载出来需要时间，点击下单的时候又会卡顿。一不小心添加错了想修改，加载购物车也是一个等待的时间。这让很多用户感觉用H5界面下单流畅度不行，体验感也相当低。

但是小程序有独立的运营服务器，所以相对来说小程序能够保障比较稳定的运行。而且小程序就像是一个微型的社交平台，能够转发分享给好友一起下单，在点餐界面也有不少的互动环节，能够增加用户的下单体验。

相比较来说其实H5的开发成本确实比较低，但是小程序能够多方位地满足餐饮业的需求。壹来客觉得，想要稳定长久的发展，还是要优先考虑小程序比较好，避免在经营稳定之后却缺失了能够分析用户的基础数据。

小程序和H5页面的相互跳转

        小程序跳转H5页面是通过web-view组件来实现的，web-view是一个可以用来承载网页的容器，会自动铺满整个小程序页面，也就是说h5页面的跳转是在小程序的环境下打开的。需要在小程序里建立一个空白页，放置webview用来展示H5页面。

限制条件：

        1、H5页面所在的域名必须为https

        2、由于web-view组件是一个全屏组件，不能和其它小程序组件合用，因此需要独立占据一个页面，由A跳到B，由B跳到h5页面

        3、小程序能够跳转的h5页面的域名必须在业务域名中进行注册

        4、小程序账号必须是企业账号，个人和海外账号暂不支持，只有企业账号才能看到业务域名入口

        5、设置网页授权域名，H5页面关联的服务号中去进行设置，在公众号设置添加好需要跳转的域名

1、h5页面在小程序环境下打开的情况下

限制条件：

        1、当前的h5页面必须是在小程序的环境下打开的页面，才能回跳小程序的指定页面。

        2、其它限制条件同小程序跳h5页面的要求

注意点：无论是小程序跳转H5页面还是跳转回来都是可以传递参数的

2、h5页面不在小程序环境下打开的情况下

        微信新增小程序跳转按钮：wx-open-launch-weapp（具体用法可参考 官方文档 ）。用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。

1、通过微信公众号后台配置菜单，子菜单内容选择小程序

2、公众号推文里添加素材

点击小程序，弹框如下图（在弹框中可以选择展示的方式：文字、图片、小程序卡片、小程序码

3、当公众号和小程序已关联（在公众号的菜单中有绑定小程序的入口）

        小程序所在的菜单会出现在公众号的介绍页（如果是在二级菜单中，所对应的只出现相应一级的该小程序入口）

4、模板消息（直接在模板消息接口中配置）

          该小程序appid必须与发模板消息的公众号是绑定关联关系，点击模板消息跳转小程序，可支持跳转到小程序的具体页面，支持带参数,（示例index?foo=bar）

5、H5页面中嵌入小程序码

6、安卓手机debug调试（ 打开信息里面的调试功能 ）

到底 H5 和小程序哪个好？一张表告诉你

许多做产品的同学经常会有这样的疑问：计划开发的移动端产品到底是用 H5 好还是用小程序好？甚至很多开发同学也搞不清楚这两者在具体使用中的优劣。那么相信读完此篇，便可让你对二者之优劣利弊了然于胸，再也不必纠结。

大体上讲，H5和小程序并不具备什么可比性。只是很多移动端的场景下，这两种选择都能实现产品的大部分功能，加之其各领风骚好几年，就更难抉择了。

我们经常说的 H5 是一种不标准的叫法，可以理解为只是一种技术，大家说得最多的 H5 主要是指用在移动端的网页，其实 PC 电脑版也一样可以使用 H5 技术。而小程序，这里特指微信小程序，是在微信 APP 基础上支持的一种应用形式，完全依赖于微信 APP 环境。

以上，是大概念上的区分，下面，我们就来详细对比一下其他方面。

一、运行环境

这里的 H5 既然是网页，那么依赖的外壳主要是浏览器，因此只要有浏览器，就可以使用。比如手机内置的浏览器，APP 的 web-view 组件，以及小程序提供的 web-view 组件，都可以打开 H5 页面。

注意，小程序的 web-view 可以打开 H5，但并不是小程序“跳转”到了 H5 页面，这个 H5 还是小程序的外壳内，仍然有很多限制。

前面说了，小程序只能依赖微信客户端，也就是说只能在微信里打开。那么，如果你的产品需要通过短信通知用户带上访问地址，就无法用小程序实现了。而 H5 页面，则可以在短信正文中直接用手机内置浏览器打开。

但是，微信本身是跨平台的，因此无论是安卓上的微信，苹果上的微信，都是可以使用小程序的。甚至 QQ 浏览器也支持了部分小程序的入驻。

二、系统权限

这里的系统权限，可以理解为隐私级别比较高的，如通讯录，或能调用硬件的，比如蓝牙功能等。从这个角度看，H5 本身可以说几乎是没有什么系统权限的。虽然也有摄像头之类的接口，但是重度依赖浏览器能力，兼容性有限。

而小程序，由于依赖微信客户端本身，所以微信小程序团队将客户端的很多能力开放给了小程序环境，当然，前提是你给微信也授权了相关的能力，比如允许访问麦克风，允许访问相册等。

所以，如果你的产品重度依赖这些能力，那小程序一定是不二之选，因为 H5 很难做到这些，对于很多小程序提供的能力，H5 是根本没有可能实现的。

三、能力限制

前面提到了系统权限层面的差异，其实也是一种能力限制。除此之外，还有一些能力是微信本身的策略限制的，比如 H5 在微信里可以直接分享朋友圈，而小程序目前就只能转发好友或群。对于朋友圈，就只能生成带小程序码的图片发到朋友圈。

而对于分享到好友或群，小程序又提供了卡片式的分享界面，看起来很高端，信息也多，并且能追踪用户行为。这一点，H5 又无法做到。

再比如支付能力，小程序只支持微信支付，而 H5 里可以选择使用其他支付平台提供的支付方式。

四、用户体验

分享卡片看上去比普通的 H5 链接分享体验要好；而朋友圈的 H5 分享形式，和图片识别小程序码的形式到底哪个好也不好说。不过，如果你的产品被判定有违规行为，那么 H5 的链接是很容易匹配屏蔽的，可以直接导致分享 H5 页面只能自己可见，别人看不到。

但是，小程序的分享图虽然不太可能封禁，但小程序是微信的呀，那还不是分分钟就关掉。 所以在抗风险方面，二者各有千秋。如果是 H5，那就多准备几个域名；如果是小程序，就直接多上线几个小程序，保证封禁时损失降到最低。

除了形式上的体验差异，性能上也是有差异的。小程序基于微信客户端实现，对解析进行了优化，并且一旦首次打开小程序，可以直接缓存很多资源。因此，在使用小程序时可以明显感觉很流畅，接近原生 APP 的体验。

而 H5 本质上还是网页，跟之前在 PC 上浏览网页没区别，每次要请求各种图片样式资源，在浏览器内核里渲染，因此体验会差一些。

五、访问入口

在访问入口这个点上，H5 的核心竞争力就是能在微信之外玩，不依赖微信本身。而小程序的优势，就是有 50+ 微信提供的场景入口，并且聊天界面顶部的“最近使用”和“我的小程序”这个入口，相对 H5 来说是有绝对优势的。

用户关闭之后，H5 页面如果想继续访问，可能会通过收藏入口，或者转发给“文件传输助手”等聊天界面保存，还可以缩小到图标稍后阅读等等。本质上还是跟 PC 时代的浏览器收藏夹差不多，需要有个地方把 H5 的链接地址保存下来，方便下次访问。如果没有保存，下次就很难找到了。

至于微信内的搜索，是可以同时搜索 H5 和小程序的，可以根据 H5 的名字和内容、小程序的名字和介绍来搜索。这里 H5 有个天然优势就是，只要你的链接在各大搜索引擎提交过，那么使用其他的搜索引擎也能搜出这个 H5，比如百度搜索。

六、用户触达

H5 本身是没有用户触达能力的，如果用户关掉了页面，页面就再也没有办法主动触达该用户了。因此，传统的营销方式都是采用邮件营销或短信营销等来触达用户。

后来，我们有了微信服务号，就多了服务号模板消息的触达方式。不管是哪种方式，都是想方设法把链接地址推送给用户，用户点击时再通过手机内置浏览器或微信内置浏览器访问页面。

而小程序天然支持模板消息，虽然有一周的推送时间限制，但是常规的业务已经足够了。只要用户使用你的小程序，你就可以通过某种操作收集 formid，然后即可在一周之内的任意时间触达用户。

七、开发成本

对于简单功能，H5 和小程序的开发成本是差不多的，开发模式和语言风格也类似。而对于前面说到的系统能力，可能就只有小程序才能实现，H5 根本做不了。此外，小程序自成体系，因此也有一些现成的组件可以使用，如果刚好覆盖了你的产品功能就能提升效率。

虽然 H5 也有很多框架组件可以用，但由于过于庞杂，有选择成本，且技术栈和 UI 五花八门，可能还有融合和修改的成本。而小程序组件的 UI 大部分已经确定，只有很少的部分可以修改，所以一旦认定使用小程序，这部分成本会低很多。

总体上来讲，我觉得还是可以认为小程序的开发成本更低一些。

八、迭代周期

开发成本低，未必迭代周期就短。对于 H5 我们可以随时发布上线，不用受任何牵制。而小程序的特点，就是每次提交版本都要经过微信方面的审核，且审核时间的长短很随机，着急上线的项目就很无奈了。

至于其他速度，取决于开发人员技能熟练程度，系统复杂度，对基础能力的依赖等，就不好估算了。

九、外部限制

由于小程序依赖微信平台，因此微信平台要对内容安全等事项负责，比如你想搞个有 UGC 的产品，用 H5 可能还可以趁着监管宽松无证裸奔一阵，或者说做大了再补证。

而小程序，就很可能完全不能过审，根本上不了线。比如试听类，社交类，都有对应的资质，而这个资质还可能很难获得。

类似的，H5 页面可以不用搞 HTTPS，有个网站就能玩，甚至用工具做个小活动也都可以玩。但是小程序，从后端开始就有限制，要求域名备案+HTTPS，一定程度上也是一点成本。

此外，小程序对文件大小也有限制，虽然现在已经支持分包加载，但是在文件大小方面，H5 本身是没有什么限制的。只是实际开发的时候，要照顾用户的体验，不能让页面打开太慢。

综上所述，H5 和小程序在不同的场景下各有千秋，具体使用哪一种要看你看重哪些能力。 H5 和小程序都是实现产品的工具，选择工具最擅长的能力，其他方面再想办法来弥补即可。最后，再附上完整表格一份，看你是否已经明了二者的差异：

h5页面与小程序的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于h5页面与小程序的关系、h5页面与小程序的信息别忘了在本站进行查找喔。