小程序 与 App 与 H5 之间的区别

小程序的实现原理

根据微信官方的说明,微信小程序的运行环境有 3 个平台,iOS 的 WebKit(苹果开源的浏览器内核),Android 的 X5 (QQ 浏览器内核),开发时用的 nw.js(C++ 实现的 web 转桌面应用)。

平台渲染js 运行环境

iOSWKWebViewJavaScriptCore

AndroidX5 基于 Mobile Chrome 37 内核X5 JSCore

开发工具Chrome WebViewnw.js

小程序运行时会创建两个线程:View Thread 和 AppService Thread,相互隔离,通过桥接协议 WeixinJsBridage 进行通信(包括 setData 调用、canvas 指令和各种 DOM 事件)。

下述表格展示了两个线程的区别:

线程名称所属模块运行代码原理说明

View视图层WXML/WXSSWebView 渲染wxml 编译器把 wxml 文件转为 js 并构建 virtual dom;wxss 编译器把 wxss 文件转化为 js。

AppService逻辑层JSJavascriptCore 运行无法访问 window / document 对象

两个线程是通过系统层的 JSBridage 来通信的,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。

小程序与 App 的区别

运行环境

原生 App 直接运行在操作系统的单独进程中(在 Android 中还可以开启多进程),而小程序只能运行在微信的进程中。

开发成本

原生 App 的开发涉及到 Android/iOS 多个平台、开发工具、开发语言、不同设备的适配等问题;而小程序只需要开发一个就可以在 Android/iOS 等不同平台不同设备上运行。

原生 App 需要在商店上架(Android 需要上架各种商店);小程序只能在微信平台发布。

系统权限

原生 App 调用的是系统资源,也就是说系统提供给开发的的 API 都可以使用;而小程序是基于微信的,小程序所有的功能都受限于微信,也就是说微信给开发者提供 API 才可以使用,不能绕过微信直接使用系统提供的 API。

原生 App 可以给用户推送消息;小程序不允许主动给用户发送消息,只能回复模版消息 。

原生 App 有独立的数据库,可以做离线存储;小程序只能存储到 LocalStorage,无法做离线存储。

原生 App 需要下载,安装包比较大;小程序无需下载,可以通过小程序码等方式通过微信直接打开。

运行流畅度

原生 App 运行在操作系统中,所有的原生组件可以直接调用 GPU 进行渲染;而小程序运行在微信的进程中,只能通过 WebView 进行渲染。

小程序与 H5 的区别

运行环境

简单来说,小程序是一种应用,运行的环境是微信(App);H5 是一种技术,依附的外壳是是浏览器。

H5 的运行环境是浏览器,包括 WebView,而微信小程序的运行环境并非完整的浏览器,因为小程序的开发过程中只用到一部分H5 技术。

小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对性做了优化,配合自己定义的开发语言标准,提升了小程序的性能。

小程序中无法使用浏览器中常用的 window 对象和 document 对象,H5 可以随意使用。

开发成本

H5 的开发,涉及开发工具(vscode、Atom等)、前端框架(Angular、react等)、模块管理工具(Webpack 、Browserify 等)、任务管理工具(Grunt、Gulp等),还有 UI 库选择、接口调用工具(ajax、Fetch Api等)、浏览器兼容性等等。

尽管这些工具可定制化非常高,大部分开发者也有自己的配置模板,但对于项目中各种外部库的版本迭代、版本升级,这些成本加在一起那就是个不小数目了。

而开发一个微信小程序,由于微信团队提供了开发者工具,并且规范了开发标准,则简单得多。前端常见的 HTML、CSS 变成了微信自定义的 WXML、WXSS,官方文档中都有明确的使用介绍,开发者按照说明专注写程序就可以了。

需要调用后端接口时,调用发起请求API;需要上传下载时,调用上传下载API;需要数据缓存时,调用本地存储API;引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用;UI 库方面,框架带有自家 weui 库加成。

并且在使用这些 API 时,不用考虑浏览器兼容性,不用担心出现 BUG,显而易见微信小程序的开发成本相对低很多。

系统权限

微信小程序相对于 H5 能获得更多的系统权限,比如:网络通信状态、数据缓存能力等,这些系统级权限都可以和微信小程序无缝衔接。

而这一点恰巧是 H5 被诟病的地方,这也是 H5 的大多应用场景被定位在业务逻辑简单、功能单一的原因。

运行流畅度

这条无论对于用户还是开发者来说,都是最直观的感受。长久以来,当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时,它的体验总是不尽人意,需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立,尽管同样用 HTML +CSS + JS 去开发,但配合微信的解析器最终渲染出来的是原生组件的效果,自然体验上将会更进一步。

小程序多平台互转原理

微信小程序与支付宝小程序有很多相似之处,可以封装两个小程序之间的差异进行转换,从而实现一套逻辑代码运行在两个平台。

项目目录结构:

|-ProjectName

|-arch//基础框架

|-arch.js//框架入口,只需要导入这一个 js 即可

|-cache.js//缓存相关,封装了 LocalStorage

|-net.js//网络相关,封装了 网路请求

|-page.js//页面跳转相关,封装了导航操作

|-phone.js//设备相关,封装了系统信息,打电话,扫码,剪切板,定位,支付

|-ui.js//平台 UI 相关,封装了 Toast,Alert,Loading,ActionSheet,NavigationBar

|-config//项目配置

|-api.js//项目 API 相关,接口参数配置等

|-config.js//项目配置,如:平台判断,LocalStorage 的 key

|-pages//页面

|-home

|-home.acss/wxss

|-home.axml/wxml

|-home.js

|-home.json

|-utils//工具类

|-crypto-js.min.js//加密工具库(按需添加)

|-date.js//常用 Date 操作

|-money.js//常用 money 操作

|-net-api.js//自定义通用 API 请求方式,如:封装统一头部和响应体

|-param.js//参数加密(按需添加)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

API 差异

//微信小程序

wx.setStorageSync("key", "value")

//支付宝小程序

my.setStorageSync({

key:"key",

data:"value"

})

1

2

3

4

5

6

7

8

封装后的 API:

function set(key, value) {

if (config.isAlipay) {

my.setStorageSync({

key: key,

data: value,

});

} else {

wx.setStorageSync(key, value);

}

}

1

2

3

4

5

6

7

8

9

10

布局差异

<!-- 微信小程序 -->

<view bindtap="onClick"

touchstart="onTouchStart"

touchmove="onTouchMove"

touchcancel="onTouchCancel"

touchend="onTouchEnd"

tap="onTap"></view>

<!-- 支付宝小程序 -->

<view onTap="onClick"

touchStart="onTouchStart"

touchMove="onTouchMove"

touchCancel="onTouchCancel"

touchEnd="onTouchEnd"

tap="onTap"></view>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

可以通过程序进行转换。

原文地址:https://www.cnblogs.com/dtwx777/p/10050672.html

时间: 2024-10-10 17:56:17

小程序 与 App 与 H5 之间的区别的相关文章

小程序,App,H5的区别

小程序与 App 的区别 技术 微信小程序就是微信支持的一种第三方插件,微信向这种第三方插件开放了更多的功能接口,从丰富的界面控制到多种框架,特别合适提供了更多的对移动设备的访问能力. 运行环境 原生 App 直接运行在操作系统的单独进程中(在 Android 中还可以开启多进程),而小程序只能运行在微信的进程中. 开发成本 原生 App 的开发涉及到 Android/iOS 多个平台.开发工具.开发语言.不同设备的适配等问题:而小程序只需要开发一个就可以在 Android/iOS 等不同平台不

Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战

Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战 说明:Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战,优惠券是一种常见的促销方式,在规定的周期内购买对应商品类型和额度的商品时,结算时满足一定条件会减免一定金额.通过发放优惠券,引导用户购买相应的商品,在下单的时候抵扣一定的费用,达到促销.提高客单价的目标. 优惠券不论在线上还是线下,适用范围都比较广泛.例如滴滴发的专车券.外卖平台发的外卖券.京东淘宝的优惠券等. 1.优惠券的类型和应用场景 优惠券有多种分类方式,按照使

微信小程序和App的UI设计有什么异同吗?

大家总是把小程序和App放在一起比,因此我也花时间看了一下小程序的开发指南,尤其是UI部分的设计和原则,今天就拿它和苹果的HIG(Human Interface Guidelines)做个比较,其实两者在一些大的原则处理上可以说是一致的. 关键词一:友好礼貌 对应于苹果:Less is more 苹果在iOS7时做了一个非常大的界面调整,以突出内容为主,去除掉了所有会干扰用户的界面元素,这个风格一致延续至今(以苹果自家的App,比如指南针,天气为例就可以看出). 微信在指南一开始也强调了这个原则

小程序与app真的就要“灭亡”一个?(出自码教授微博)

微信小程序的火爆让一众人认为app的时代开始衰竭了! 是这样的?难道众多的app开发人员就要面临"失业"?客观来说web app是会因为小程序的介入发生一些动荡! 两派观点:一派:app不可能被取代,小程序的功能都不全面,只能是依附于固定程序实现简单操作,有的手机点单都实现不了.它的代码逻辑可不实用!另一派:用户都是追求快捷方便的,与其手机上一堆各种app,还不如直接一个搞定,省时省力省资源,何乐而不为! 这样的说法在现在看来都太绝对,各自都有站立点,不能完全否定!不过有一点就是:小程

小程序打开app场景

api文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html 此功能需要用户主动触发才能打开 APP,所以不由 API 来调用,需要用 open-type 的值设置为 launchApp 的 button 组件的点击来触发. 当小程序从非 1069 的打开时,会在小程序框架内部会管理的一个状态,为 true 则可以打开 APP,为 false 则不可以打开 APP.这个状态

PC软件/web网站/小程序/手机APP产品如何增加个人收款接口

接入前准备 通过 XorPay 注册个人收款接口,原理是帮助你签约支付宝和微信(不需要营业执照)支持个人支付宝和个人微信支付接口,大概几分钟可以开通,开通后即可永久使用 PC 网站接入 效果:用户点击支付后,前端ajax 请求你的后台,你后台再请求 xorpay 支付接口返回支付二维码到前台,页面展示微信或者支付宝二维码,用户用手机微信或支付宝扫码支付 接口:可以使用 JSAPI / Native / 收银台 / 支付宝当面付 支付接口 JSAPI 支付,通过构造二维码,用户微信扫码后在打开自己

【微信小程序】App.js生命周期

1.小程序的生命周期-App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App({ onLaunch: function () { console.log('App Launch') this.initCloud(); }, onShow: function () { }, onHide: function () { console.log('App Hide') }, globalData: { hasLogin: fals

小程序 webView 内嵌h5

前端时间搞了小程序跑h5的流程,趁着这段稍微空闲的时间整理下,和大家一起分享下 1.内嵌h5,小程序场景判断 wx.miniprogram.getev(fn)  ,   该方法是微信提供的api,注意的是,该方法是异步的 .引用微信的JS-SDK版本要相应版本(推荐用JSSDK 1.3.2或者以上),否则会出现方法不存在,或者其他问题. 2 web-view 中转,写个公用跳转页面(用的是wepy框架) <template> <web-view src="{{pageUrl}}

uni-app关于小程序及app端第三方微信登陆问题

1.第一次做第三方微信登陆,所以在这方面话太多时间了,主要是在获取code的时候感觉头痛,uni-app没有说明如何获取code,后来在网上搜索诸多信息后终于解决了问题 uni-app在app端第三方微信登陆时要获取code再传给后端,后端根据code向微信发送登陆请求: // #ifdef APP-PLUS login() { var it=this; var getAppid = plus.runtime.appid; console.log('app端登陆') uni.login({ pr