最近接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面和小程序的一些通用测试方法进行总结分享给大家。...04 小程序测试技术 小程序的特点 类似WEB.非HTML5 即用即走，随手可得 拥有离线能力 基于微信跨平台 媲美原生操作体验 小程序的入口 扫码进入小程序 搜索小程序 小程序发送到桌面（Android...对于横竖屏切换使用好不同手机分辨率和尺寸的要求是否符合 兼容性测试 操作系统---IOS、Android 微信版本--小程序的api(接口)库 其他微信小程序 屏幕大小和分辨率因素 不同网络状态下的测试...app账号关联 易用性测试 是否方便使用 提示信息是否完整 各个功能是否可用 是否方便查找 是否可以离线使用 进入小程序过程是否简单易操作 其他注意事项 小程序升级更新--一般为强制升级和更新 小程序目前不支持分享至朋友圈...，但是可以用图片的方式分享至朋友圈 小程序的添加和删除 微信端取消授权登录
近段时间，很多小伙伴在讨论小程序与H5的相关知识点，为此，做下总结 一、什么是小程序 1、阐述 微信小程序和微信的原生功能应用在本质上是一样的——它们都是Web App。...Web App就是一种通过H5页面技术实现的，和Native App的功能和界面几乎一样的手机App形态。...g.消息通知：商户可以发送模板消息给接受过服务的用户，用户可以在小程序内联系客服，支持文字和图片，解决用户与小程序的沟通问题。...针对小程序专门做了优化，配合自己定义的开发语言标准，大幅提升了小程序的流畅度和性能。...小程序不能跳转外部链接，H5没有限制。
image.png 四、用户体验 分享卡片看上去比普通的 H5 链接分享体验要好；而朋友圈的 H5 分享形式，和图片识别小程序码的形式到底哪个好也不好说。...而小程序的优势，就是有 50+ 微信提供的场景入口，并且聊天界面顶部的“最近使用”和“我的小程序”这个入口，相对 H5 来说是有绝对优势的。...至于微信内的搜索，是可以同时搜索 H5 和小程序的，可以根据 H5 的名字和内容、小程序的名字和介绍来搜索。...image.png 七、开发成本 对于简单功能，H5 和小程序的开发成本是差不多的，开发模式和语言风格也类似。而对于前面说到的系统能力，可能就只有小程序才能实现，H5 根本做不了。...image.png ---- 综上所述，H5 和小程序在不同的场景下各有千秋，具体使用哪一种要看你看重哪些能力。H5 和小程序都是实现产品的工具，选择工具最擅长的能力，其他方面再想办法来弥补即可。
回到最开始说到的不管是 H5 还是小程序，其实他们的核心都是 Webview，但是他们的核心架构还是有一些区别的，这里我们就进行具体的一些分析和对比。...小程序的架构与流程小程序的渲染和通信流程和 H5 就有较大的区别，特别是小程序采用了双线程技术，相较于H5 会有一定的优势，下面我们具体来看看。...1、小程序的双线程我们先来回顾下，传统的 H5 开发中，页面渲染和 JavaScript 的执行是在同一个线程中完成的，这就导致了渲染和 JavaScript 执行互相影响的问题。...小结H5 和小程序虽然说在 hybrid 应用中都有被应用，但他们之间的体验度和产品的完整性都有一定的差异，究其核心原因是因为他们在架构上有着不同的流程和处理办法，技术的持续发展和创新出现了小程序这种更为完善和先进的技术形态...，也让小程序能够快速的发展和增长。
简介 H5和小程序不具备可比性，只是很多移动端的场景下，两种选择都能实现产品的大部分功能。最近几年，小程序的兴起，让人们理解他等同于H5，其实不然。...一、运行环境 H5是网页，主要依赖浏览器运行，如手机内置浏览器，APP，微信，而小程序只能依赖微信打开。...二、能力限制 H5在微信里可以直接分享朋友圈，而小程序只能转发好友或好友群，要想发到朋友圈只能生成有小程序码的图片发到朋友圈。 再如支付能力，小程序只支持微信支付，H5里可以选择多种支付方式。...三、用户体验 小程序基于微信客户端，一旦打开小程序，可以缓存很多资源，数据及使用记录会自动保存，不会因为操作中断丢失操作数据，H5，每次使用都是重新加载，操作中断再回来无法继续操作，都要重新开始。...四、访问入口 H5能在微信外使用，不依赖微信，而小程序是有微信提供的场景入口，并且在聊天界面顶部的“最近使用”和“我的小程序”这个入口相对H5来说有绝对优势。
最近接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面和小程序的一些通用测试方法进行总结分享给大家。...小程序测试技术 小程序的特点 1.类似WEB.非HTML5 2.即用即走，随手可得 3.拥有离线能力 4.基于微信跨平台 5.媲美原生操作体验 小程序的入口 1.扫码进入小程序 2.搜索小程序 3.小程序发送到桌面...尺寸是否合理 对于横竖屏切换使用好不同手机分辨率和尺寸的要求是否符合 3.兼容性测试 操作系统---IOS、Android 微信版本--小程序的api(接口)库 其他微信小程序 屏幕大小和分辨率因素 不同网络状态下的测试...app账号关联 7.易用性测试 是否方便使用 提示信息是否完整 各个功能是否可用 是否方便查找 是否可以离线使用 进入小程序过程是否简单易操作 8.其他注意事项 小程序升级更新--一般为强制升级和更新...小程序目前不支持分享至朋友圈，但是可以用图片的方式分享至朋友圈 小程序的添加和删除 微信端取消授权登录
技术选型 业务需求需要我们同时在 H5 和小程序开发一套，既保证 App 端入口的功能，也要保证小程序端的功能，还要保证 App 端分享的小程序卡片引导用户进行社交分享，增加游戏体验、和用户参与度。...通过 npm run dev:h5 进行本地重构开发，第一步已经成功，下面就是兼容原生小程序。 ?...Taro与原生小程序融合 因为我们之前是使用原生小程序开发的项目，项目里面有很多公共的方法和模块，所以如何使得我们新开发的页面能够调用并且正常运行原小程序项目的代码成为关键。 其实并没有想象那么复杂。...process.env.TARO_ENV === 'h5'是关键，其实我们在编译时候会选择是编译到 H5 还是 weapp，所以 Taro 做了编译场景判断，如果是 H5 的话，不会包含特殊的小程序代码...利用 Taro 解决了多端场景的痛点，当然项目中有些场景还是需要单独写 H5 和小程序的代码，以满足业务需求比如长图保存，打字动效果等等。整体来说，的确提高了开发效率，减少研发周期。
在小程序中打开H5页面,需要使用web-view组件 web-view组件是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。...可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。...1.6.4 bindmessage eventhandler 否 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。...参数与小程序接口一致 1.6.5 wx.miniProgram.postMessage 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件 1.7.1 wx.miniProgram.getEnv...// 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。
最近，有个需求需要开发H5应用和微信小程序。如果针对不同的平台开发自己的一套代码，那将是一件很糟糕的事情：如果下次需要兼容支付宝小程序、快应用，那工作量随着平台的添加而快速增加。...选择uni-app => 填写项目的名称 => 选择项目的存放位置 => 选择uni-app项目模版 => 点击创建 开启h5和微信小程序 开启h5： 开启微信小程序： 示例：是Mac配置 配置微信开发者工具路径...微信小程序报forceUpdate错误 报错信息如下：TypeError: Cannot read property 'forceUpdate' of undefined 原因：没有配置appId，这里直接使用小程序提供的测试...// #endif // #ifdef MP-WEIXIN console.log("只有微信平台才有的console方法") // #endif } 发布h5和微信小程序 发布...发布微信小程序： 可参考网站发布为微信小程序 需要提前申请一个微信小程序，获取其AppID 后话 相关的api内容来源uni-app自官网，截止文章发布2021-07-19为最新。
记录下H5与小程序技术方案的主要差异 H5 小程序 运行环境 浏览器/webview 三种环境:IOS(JSCore+WKWebView)安卓(JSCore+Chrome57/V8+Chrome67...分享链接容易被屏幕) 不能(分享卡片的体验好) 扫码识别 能 能 支付能力 多种 微信支付 性能 一般(需要请求很多资源) 好(微信做了解析优化，接近原生APP体验) 入口数量 少 多(最近使用、我的小程序等...50+场景入口) 专属入口 无 有 用户触达 邮件/短信文字链接 公众号/小程序模板消息(收集formid后一周内任意时间) 简易功能成本 低 低 系统功能成本 高(不支持某些系统能力) 低 迭代周期...短(随时上线) 较长(需审核) 外部限制 较少(可裸奔，先实现功能再补证) 多(资质要求(娱乐视听、医疗、社交)、HTTPS、程序大小限制)
本文使用 uniapp 框架开发，因为H5的订阅消息和小程序的订阅消息的授权流程不一样，但是很多地方需要使用授权，所以我封装了一个兼容H5和小程序订阅消息授权的方法，使用比较方便，希望能够帮助到你，实测可用...下面简单看下H5订阅消息发送和小程序订阅消息发送的区别： 简单说H5就是需要重定向到微信的一个地址，然后微信回调告诉你用户是否授权，而小程序是有官方提供的 API ，调用API就能拿到回调信息告诉你用户是否授权...下面看看官方文档的介绍： 1、公众号H5订阅消息发送流程 2、小程序订阅消息授权 最后，来看看我是怎么实现的吧！...-- 订阅消息监听和发送，兼容微信小程序和H5 --> onLoad: function(options) { common.Init.call(this); // #ifdef H5...scene_id, template_id) 封装的js：common.js function Init(e) { const that = this; // #ifdef H5
可以使用hbuilder，创建一个uniapp模版，在pages/index.vue中添加/修改如下代码 这样写还不够
一、介绍 小程序里显示Html代码，目前插件（wxParse 解析html）解析支持不太好，有时候格式还是达不到预想的效果。...小程序里的HTML语法有台奇葩， 最好的解决方案是直接在里面显示HTML页面，使用小程序的web-view组件。...之前由于需要验证原因，很多人把Bmob的素材页面填写到微信的业务域名，提示： 小程序设置web-view业务域名，解决“不支持打开非业务域名，请重新配置” 这个提示的根本原因，是没有成功设置业务域名...三、设置教程 1.登陆微信小程序控制台，进入设置-》开发设置-》业务域名（这里注意，目前只有企业资质也有这个设置） ?...例如Bmob的图文素材表，都会有个HTML，大家可以把这个地址填入web-view 这样就完美的解决了小程序显示HTML代码错乱问题。
已经体验了上百款小程序，有一些想法分享下： 大部分小程序都是没有卵用的，也许打开一次之后再也不会主动去打开了； 大部分有app的小程序，功能欠缺较多，目前尚不能抛弃app，比如摩拜单车，小程序中还无法查看余额...，需要等版本迭代，当然，一些app自己有自己的考虑，还是希望用户去用原生app； 只有符合使用场景且体验做得好的，或者是原来就只有H5版本的，才会在有需要的时候想起去用；有些低频但本来就没装app的，...）； 分享也是目前小程序在线上最大的流量入口，而线下的小程序二维码应该也会无处不在了，搜索由于大部分小程序不能模糊搜索，所以不会是流量入口，而一众小程序商店由于只能扫码，也不会好用到哪去，想想昨晚到现在我们都是靠分享在拓展体验的范围...（以下直接搜索小程序完整名称即可使用） 从我个人角度，推荐几个有用的小程序，几乎可以替代app的： 这一类如同我9月小程序文章里的判断，生活电商类和非系统的工具类app是被替代的方向。...车来了 或 滴滴公交查询，之前需要查实时到站信息时我是在上海发布里去用一个H5页面，体验很差，退出后重新打开实在很烦。
所述问题： 前端时间开发了一个微信小程序商城项目，因为这个项目我们的需求是进入小程序就通过wx.login({}) 这个api进行用户登录，获取系统后台的用户基本信息。...再此之前，一直以为微信小程序中的App.js 中onLaunch (小程序初始化完成执行该方法)方法比其他页面的的 onload 方法要先执行。...那么问题就来了，我每次进入小程序首页的时候有时候会先执行onlaunch方法，有时又会先执行首页的onload的方法，最后经过确定，在微信小程序中这两个方法并没有执行先后的顺序，因为他们都是异步执行的。...当然开发过微信小程序的开发者都知道微信请求数据都是异步执行的，如在同一个onload写两个请求数据的方法，它不一定会按照先后顺序去执行，这就是传说中的异步地狱了。...解决方法： 当然，我既然知道这个执行顺序是由于微信小程序的异步执行请求原因导致的。我们可以使用Promise 来解决异步编程问题啦。
参数与小程序接口一致 wx.miniProgram.postMessage H5 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件 wx.miniProgram.getEnv...获取当前环境 2.小程序->H5 通过 URL 拼接参数携带信息 navigateTo、reLaunch、redirectTo 实现方式： wx.miniProgram.navigateTo({ url...type=aaaaaa', }) 缺点：url 数据量有限，且需要打开界面 3.H5->小程序 wx.miniProgram.postMessage api H5 页面传参： //js项目直接引入...默认端口也是 80 和 443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。 数据格式比较轻量，性能开销小，通信高效。...5.现状及其展望 微信并不鼓励在小程序中大范围嵌入 H5，为了避免开发者把小程序变成“浏览器”，微信对小程序与内嵌 H5 的通讯做了诸多限制 尽量使用单一方式实现，比如纯小程序原生，将 h5 功能移至小程序原生
所以，为了达到这个目标，kbone-ui 的方式是以小程序内置组件和拓展组件为对齐目标， 使用 weui 样式提供 H5 和 小程序体验一致的跨端 UI 组件库。...[kbone-ui] 主要思路是通过 Page 和 Component 特有环境变量来区分 小程序 和 H5 的环境： // 判断小程序端 const ismp = typeof Page === “function...” && typeof Component === “function” 对外按照小程序组件，以 K 为前缀暴露一个统一的组件名称，内部H5 端通过 weui 样式来适配，而小程序端直接使用内置组件。...比如： // 对外暴露： // 小程序端： // H5 端： + weui 快速上手 kbone-ui 的第一期工作，已经基本完成。...另外，考虑到 Web 端和小程序端的差异，kbone-ui 需要对三类组件来进行跨平台实现。
在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。 老规矩先看效果。...，把订单号，订单总金额，传递到小程序里，然后小程序里使用订单号和订单金额去调起微信支付，实现付款，付款成功或者失败时都会有回调。...payDataStr是我们携带的参数 [1240] 四，小程序支付页 来看下我们的小程序支付页 [1240] 小程序支付页功能很简单，就是来接收我们h5传过订单号和订单金额。.../play/25701/310742 下面把小程序接收参数和支付的完整代码贴出来给大家 Page({ //h5传过来的参数 onLoad: function(options) { console.log...到这里我们就完整的实现了小程序webview展示h5页面，并且做到了h5和小程序的交互，实现了小程序webview的支付功能。 是不是很简单呢。
原文 : 移动端产品比较分析：APP、小程序、H5 01、运行环境 （1）APP：Android 和 iOS 手机操作系统。 （2）小程序：微信 APP 内。...（3）H5：浏览器、APP 和小程序的 web-view 组件内。 02、 系统权限 （1）APP：最多最全面，但有些属于隐私需要用户授权才能调用。...（2）小程序： 直接转发给微信好友和微信群， 提供了卡片式的分享界面（比直接分享链接体验要好）；将带有小程序码的图片分享到好友、群和朋友圈，用户使用微信扫描小程序码进入小程序。...（2）小程序：微信登录 ；手机号授权登录（授权手机号需要用户主动点击按钮）。 （3）H5：和 APP 类似，是在网页内进行登录的。...（3）H5：H5 有很多框架组件可以用，由于过于庞杂，有学习和选择成本，且技术栈和 UI 五花八门，可能还有融合和修改的成本，因此开发复杂功能时相比小程序会稍微高一点。
而小程序的优势，就是有 50+ 微信提供的场景入口，并且聊天界面顶部的“最近使用”和“我的小程序”这个入口，相对 H5 来说是有绝对优势的。...至于微信内的搜索，是可以同时搜索 H5 和小程序的，可以根据 H5 的名字和内容、小程序的名字和介绍来搜索。...H5 小程序 主动触达渠道 短信 微信 短信触达 文字链接 文字引导微信搜索 7. 开发成本 对于简单功能，H5 和小程序的开发成本是差不多的，开发模式和语言风格也类似。...H5 小程序 外部限制 较少 多 综上所述，H5 和小程序在不同的场景下各有千秋，具体使用哪一种要看你看重哪些能力。...H5 和小程序都是实现产品的工具，选择工具最擅长的能力，其他方面再想办法来弥补即可。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
