记录下H5与小程序技术方案的主要差异 H5 小程序 运行环境 浏览器/webview 三种环境:IOS(JSCore+WKWebView)安卓(JSCore+Chrome57/V8+Chrome67 分享链接容易被屏幕) 不能(分享卡片的体验好) 扫码识别 能 能 支付能力 多种 微信支付 性能 一般(需要请求很多资源) 好(微信做了解析优化，接近原生APP体验) 入口数量 少 多(最近使用、我的小程序等 50+场景入口) 专属入口 无 有 用户触达 邮件/短信文字链接 公众号/小程序模板消息(收集formid后一周内任意时间) 简易功能成本 低 低 系统功能成本 高(不支持某些系统能力) 低 迭代周期 短(随时上线) 较长(需审核) 外部限制 较少(可裸奔，先实现功能再补证) 多(资质要求(娱乐视听、医疗、社交)、HTTPS、程序大小限制)
在小程序中打开H5页面,需要使用web-view组件 web-view组件是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。 支持的接口有： 接口名 说明 最低版本 wx.miniProgram.navigateTo 参数与小程序接口一致 1.6.4 wx.miniProgram.navigateBack 参数与小程序接口一致 1.6.4 wx.miniProgram.switchTab 参数与小程序接口一致 1.6.5 wx.miniProgram.reLaunch 参数与小程序接口一致 1.6.5 wx.miniProgram.redirectTo 参数与小程序接口一致 1.6.5 wx.miniProgram.postMessage 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件 1.7.1 wx.miniProgram.getEnv tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
2核2G云服务器首年95元，GPU云服务器低至9.93元/天，还有更多云产品低至0.1折…
最近接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面和小程序的一些通用测试方法进行总结分享给大家。 并要注意返回后是否需要刷新页面请求通过H5页面（非手机自带返回键）的返回功能键返回，可以返回到正确的页面（上一级/退出H5）点击返回与back键，回退页面是否是期望页面。 04 小程序测试技术 小程序的特点 类似WEB.非HTML5 即用即走，随手可得 拥有离线能力 基于微信跨平台 媲美原生操作体验 小程序的入口 扫码进入小程序 搜索小程序 小程序发送到桌面（Android 渲染时间 耗电量 白屏时间 帧率 安全性测试 接口测试--传递的数据的安全性 危险账号授权 与小程序的app账号关联 易用性测试 是否方便使用 提示信息是否完整 各个功能是否可用 是否方便查找 是否可以离线使用 进入小程序过程是否简单易操作 其他注意事项 小程序升级更新--一般为强制升级和更新 小程序目前不支持分享至朋友圈，但是可以用图片的方式分享至朋友圈 小程序的添加和删除 微信端取消授权登录
近段时间，很多小伙伴在讨论小程序与H5的相关知识点，为此，做下总结 一、什么是小程序 1、阐述 微信小程序和微信的原生功能应用在本质上是一样的——它们都是Web App。 公众号关联：在小程序与公众号为同一开发主体的前提下，提供小程序与微信公众号之间的关联。 e.线下扫码：提供线下提示用户附近有哪些小程序存在的功能。 d.互动优势 三 、小程序与H5的区别在哪 1、运行环境 传统H5 运行环境是浏览器，包括webview等； 微信小程序运行环境是非完整的浏览器，是基于浏览器内核完全重构的一个内置解析器， 小程序是微信内的云端应用，通过WebSocket 双向通信（保证无需刷新即时通信）、本地缓存（图片与UI 本地缓存降低与服务器交互延时）以及微信底层技术优化实现了小程序接近原生APP的体验。 小程序不能跳转外部链接，H5没有限制。
刚看到的时候我认真想了想，如果我去面试被问到这个题了，显然我心中的答案并不能突出我比别人强 所以好好想了下怎么回答后就写了此文 回归正题 小程序与H5有什么区别？ 解析题目 小程序与H5的区别，首先我们要看这道题问的侧重点在哪 ( 通俗讲就是先想一下这个题要考的是什么 )？ 如果想挖你对H5的理解，我觉得不需要这么问，而问两者区别小程序在前，两者相对来说小程序是比较新的，很明显侧重点在小程序这块，通过与H5的对比来挖你对小程序的了解，那么回答的时候就要侧重小程序这块发散，要让面试官觉得 ，拿微信小程序举例子，没有兼容性问题后，只需要看着文档在微信开发工具里写就行了，小程序还独立出来了很多原生APP的组件，在H5需要模拟才能实现的功能，小程序里可以直接调用组件，都是封装好的，你也可以使用转译框架来写小程序 组件，在 web-view 中加载 H5 页面，而我们开发小程序时，通常会使用 hybrid 的方式，根据具体情况选择部分功能用小程序原生的代码来开发，部分功能通过 web-view 加载 H5 页面来实现
小程序商城是依托于微信小程序，在微信小程序上实现商城的一系列功能和业务逻辑。图片h5商城和小程序商城的区别？ 三、入口方式与数量的不同小程序商城的入口可以是微信小程序搜索，附近的小程序，公众号图文，公众号菜单等。 一、h5商城的优点h5商城应用的范围要比较广，还要以在PC上访问。只要通过URL链接就可以打开与跳转到商城中，相对来说H5商城的适用性比较高，h5商城的运行环境要多于小程序商城。 二、小程序商城的优点小程序又被称为“微型APP”，但它不需要下载与安装，实现了即用即开，用完即走的体验。用户不用担心安装与内存的问题，在用户体验与打开速度方面要好于H5商城。 建议H5商城与小程序商城同时开发，OctShop的h5和小程序免费开源商城。
注意，小程序的 web-view 可以打开 H5，但并不是小程序“跳转”到了 H5 页面，这个 H5 还是小程序的外壳内，仍然有很多限制。 所以，如果你的产品重度依赖这些能力，那小程序一定是不二之选，因为 H5 很难做到这些，对于很多小程序提供的能力，H5 是根本没有可能实现的。 如果是 H5，那就多准备几个域名；如果是小程序，就直接多上线几个小程序，保证封禁时损失降到最低。 除了形式上的体验差异，性能上也是有差异的。 至于微信内的搜索，是可以同时搜索 H5 和小程序的，可以根据 H5 的名字和内容、小程序的名字和介绍来搜索。 image.png 七、开发成本 对于简单功能，H5 和小程序的开发成本是差不多的，开发模式和语言风格也类似。而对于前面说到的系统能力，可能就只有小程序才能实现，H5 根本做不了。
前言 小程序与小程序之间互相可以跳转,形成流量的循环.在小程序中怎么实现的呢 小程序中提供了两种方式实现小程序与小程序之间的跳转 ? （扫码进入我的页面即可体验小程序跳转） 使用 API 方式跳转 如下示例代码所示 <<view class="container"> <view bindtap="onJumpMin">打开跳转到其他小程序方式 从 2020 年 4 月 24 日起，跳转其他小程序将不再受数量限制，使用此功能时请注意遵守运营规范。 "wx66d9cf3762c49a1a" ], 小程序与小程序之前的跳转没有进行数量限制,无疑是想提高小程序与小程序之间流量互转,增加小程序的活跃度,但还是要注意小程序跳转的运营规范,避免触雷 相关文档 小程序标签方式跳转https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html ----
一、介绍 小程序里显示Html代码，目前插件（wxParse 解析html）解析支持不太好，有时候格式还是达不到预想的效果。 小程序里的HTML语法有台奇葩， 最好的解决方案是直接在里面显示HTML页面，使用小程序的web-view组件。 之前由于需要验证原因，很多人把Bmob的素材页面填写到微信的业务域名，提示： 小程序设置web-view业务域名，解决“不支持打开非业务域名，请重新配置” 这个提示的根本原因，是没有成功设置业务域名 三、设置教程 1.登陆微信小程序控制台，进入设置-》开发设置-》业务域名（这里注意，目前只有企业资质也有这个设置） ? 例如Bmob的图文素材表，都会有个HTML，大家可以把这个地址填入web-view 这样就完美的解决了小程序显示HTML代码错乱问题。
最近接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面和小程序的一些通用测试方法进行总结分享给大家。 并要注意返回后是否需要刷新页面请求通过H5页面（非手机自带返回键）的返回功能键返回，可以返回到正确的页面（上一级/退出H5）点击返回与back键，回退页面是否是期望页面。 小程序测试技术 小程序的特点 1.类似WEB.非HTML5 2.即用即走，随手可得 3.拥有离线能力 4.基于微信跨平台 5.媲美原生操作体验 小程序的入口 1.扫码进入小程序 2.搜索小程序 3.小程序发送到桌面 资源占用 渲染时间 耗电量 白屏时间 帧率 6.安全性测试 接口测试--传递的数据的安全性 危险账号授权 与小程序的app账号关联 7.易用性测试 是否方便使用 提示信息是否完整 各个功能是否可用 是否方便查找 是否可以离线使用 进入小程序过程是否简单易操作 8.其他注意事项 小程序升级更新--一般为强制升级和更新 小程序目前不支持分享至朋友圈，但是可以用图片的方式分享至朋友圈 小程序的添加和删除 微信端取消授权登录
小程序支持webview以后，我们开发的好多h5页面，就可以直接在小程序里使用了，比如我们开发的微信商城，文章详情页，商品详情页，就可以开发一套，多处使用了。我们今天来讲一讲。 在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。 老规矩先看效果。 ，把订单号，订单总金额，传递到小程序里，然后小程序里使用订单号和订单金额去调起微信支付，实现付款，付款成功或者失败时都会有回调。 payDataStr是我们携带的参数 [1240] 四，小程序支付页 来看下我们的小程序支付页 [1240] 小程序支付页功能很简单，就是来接收我们h5传过订单号和订单金额。 到这里我们就完整的实现了小程序webview展示h5页面，并且做到了h5和小程序的交互，实现了小程序webview的支付功能。 是不是很简单呢。
所以，为了达到这个目标，kbone-ui 的方式是以小程序内置组件和拓展组件为对齐目标， 使用 weui 样式提供 H5 和 小程序体验一致的跨端 UI 组件库。 [kbone-ui] 主要思路是通过 Page 和 Component 特有环境变量来区分 小程序 和 H5 的环境： // 判断小程序端 const ismp = typeof Page === “function ” && typeof Component === “function” 对外按照小程序组件，以 K 为前缀暴露一个统一的组件名称，内部H5 端通过 weui 样式来适配，而小程序端直接使用内置组件。 比如： // 对外暴露： <KButton> // 小程序端： <wx-button> // H5 端： <button> + weui 快速上手 kbone-ui 的第一期工作，已经基本完成。 主要小程序是双线程模型，用户自定义组件无法独立运行在 View 层。对于这类组件，只能通过 Web 端向小程序端同属性适配的方式来做。
原文 : 移动端产品比较分析：APP、小程序、H5 01、运行环境 （1）APP：Android 和 iOS 手机操作系统。 （2）小程序：微信 APP 内。 （2）小程序：微信内推送服务通知。 （3）H5：邮件、给用户发送短信。 （2）小程序：使用起来十分流畅，第一次加载会稍微需要点时间加载，以后使用几乎秒开（除非被微信杀死后台），可以媲美原生 APP 的使用体验（自然也与手机性能有关）。 （3）H5：需要在浏览器内核里渲染，体验稍差，与浏览器性能、网络环境密切相关。 （2）小程序：多上线几个小程序； （3）H5：多准备几个域名。 09、访问入口 （1）APP：手机桌面；浏览器跳转。
技术选型 业务需求需要我们同时在 H5 和小程序开发一套，既保证 App 端入口的功能，也要保证小程序端的功能，还要保证 App 端分享的小程序卡片引导用户进行社交分享，增加游戏体验、和用户参与度。 最后我们选择了 Taro 来解决这个问题，它可以一套代码，编译成两端运行,并且编译后的小程序代码可以很好的与原生小程序项目融合在一起。 通过 npm run dev:h5 进行本地重构开发，第一步已经成功，下面就是兼容原生小程序。 ? Taro与原生小程序融合 因为我们之前是使用原生小程序开发的项目，项目里面有很多公共的方法和模块，所以如何使得我们新开发的页面能够调用并且正常运行原小程序项目的代码成为关键。 其实并没有想象那么复杂。 process.env.TARO_ENV === 'h5'是关键，其实我们在编译时候会选择是编译到 H5 还是 weapp，所以 Taro 做了编译场景判断，如果是 H5 的话，不会包含特殊的小程序代码
小程序 -> 公众号文章/H5 页面 通过web-view组件打开公众号(绑定的)文章,可点赞评论 通过web-view打开的H5页面功能受限，若有网页授权，与微信内置浏览器表现一致 公众号文章 -> 小程序 通过文章内嵌小程序卡片和文字链接直接打开绑定的小程序,可以带参数 H5页面 -> 小程序 普通 H5 页面无法跳转到小程序，web-view 中的 H5 页面可以回到“外层”小程序 小程序 -> APP 特定场景(APP 分享消息卡片/APP 打开小程序)下，微信允许小程序跳转 APP ，需要用户主动触发 公众号文章 -> H5页面 认证服务号可添加外链 非认证的通过阅读原文，自定义菜单，模板消息 ，被动回复等实现 H5 页面 -> APP 在支持的浏览器中通过 url schema 打开 微信内支持应用宝链接跳转打开 APP -> H5页面 通过 web-view 打开 H5页面，原则上没有功能限制 ，支付可以跳转到微信或支付宝等 小程序 -> 小程序 绑定到了相同公众号(存在绑定关系的小程序)可以互相跳转 每个公众号可以绑定相同主体的 10 个小程序，不同主体的 3 个小程序；每个小程序可以被 500
微信小程序直播 这里讲述的是小程序的直播，默认我这里认为大家是有小程序开发经验的，所以如何创建小程序，安装开发者工具，调试等内容就不说了。 微信小程序直播使用的是媒体组件的live-player，并且他仅支持flv或者rtmp格式，这一点在前后端确认技术方案时尤为重要。还有就是他只针对对应行业开放。 符合上述类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。 ? 打开这个权限之后，我们就可以使用小程序的live-player组件进行直播开发了。 至此H5和小程序的直播开发我们就说完了，以上内容已经足够大家完成工作中的直播开发任务和可能出现的直播业务了。 接着我们会介绍一下直播的流程、协议以及基于nginx搭建一个直播服务。 至此H5和小程序的直播我们就介绍完了。
最近利用业余时间 和朋友在一起做了一个项目, 一个移动端的app,需要开发一下,可以编译到微信小程序,H5,支付宝小程序,百度小程序,头条小程序,安卓,iOS. ,最后选择了uni-app uni-app是Dcloud出品的,之前他们出了一个MUI跨平台的web框架.我相信他们在这方面还是有一定实力的. uni-app本身是基于vue开发出来的,很多标签和微信小程序的一模一样 文件名不需要写后缀，框架会自动寻找路径下的页面资源 项目支持vue组件开发,支持SCSS样式, 作为一名前端开发人员,如果你对前沿技术稍微敏感一些你就会感到,前端正在进行一场变革,各个平台都推出了自己的小程序 , 微信,支付宝,百度,头条,快应用,后续说不定还有什么淘宝小程序,抖音.....面对如此众多的生态圈,前端人员不断变革,创新.努力做到开发一次,多端覆盖.多端统一, 一套代码运行多端，一端所见即多端所见
彼时（2020年8月）小程序的研发多以原生为主、迭代周期很长，且代码书写和结构与RN、web开发有着巨大区别；为了提高研发效率、完善多端一致的技术路线，将现有代码以较小改动转成小程序代码势在必行。 在梳理 React 项目与小程序的异同点后，通过制定的代码规范，并对 React 项目代码进行静态分析，创建或操作抽象语法树（AST）来实现小程序代码的转换。 5.3 项目效果 经过一系列的编译和转换操作，基本上实现了一套代码更改小程序、RN、H5的同时迭代。下图分别是小程序、RN、H5的线上效果图： ? 六、小结 本文分享了H5转换小程序时的选型考量、问题，以及一些问题的处理方案，旨在给大家提供一些新的思路。 在实践中，转换后组件性能是比不上原生的小程序组件的，并且会随着组件复杂度上升而下降，所以各位在选择H5转换小程序的方案时，需要对效率和性能的平衡做一个考量。
在此后的一段时间里，数个产品均发布了自己的小程序平台，各小程序平台间存在或多或少的差异：语法差异、规范差异等。 同时除了需要生成小程序，很多公司产品可能还需要在 H5、iOS、Android 端运行。 能否在兼顾小程序的同时，也可以编译生成 H5、iOS、Android 应用呢？ 《Taro 多端开发权威指南：小程序、H5、App 高效开发实战》由基础引入，配以实战，由浅入深，是迄今为止最系统全面地讲述 Taro 多端开发的图书。 ▊《Taro多端开发权威指南：小程序、H5与App高效开发实战》 李佩忠 著 Taro多端开发市面首著 深入学习使用Taro，玩转跨端跨框架开发 支持使用 React/Vue/Nerv等框架 一处代码， 多处运行 快速开发微信/京东/百度/支付宝/字节跳动/ QQ小程序/H5/React Native等应用 从基础到实战，全方位讲解Taro知识点与多端开发思路 （京东限时活动，快快扫码抢购吧！）
本文作者：IMWeb howenhuo 原文出处：IMWeb社区 未经同意，禁止转载 前言 在小程序 textarea 组件上展示一个模态弹窗组件，会发现 textarea 中输入的文字内容，会直接穿透模态弹窗显示在最上面 限制 小程序 textarea 是由客户端创建的原生组件，由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制： 原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。
小程序安全针对小程序不同业务场景提供包括小程序安全加固、小程序安全扫描、小程序渗透测试功能，通过分析仿冒程序，挖掘风险漏洞、保护核心代码等方法保护小程序业务安全、数据安全，降低客户业务风险和资金损失。
扫码关注腾讯云开发者
领取腾讯云代金券
云服务器
即时通信 IM
网站备案
对象存储
实时音视频
