作为前端工程师，从前端的视角，为大家分析下微信小程序和HTML5与之间的主要区别

第一条是运行环境的不同。

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，大家注意，我这里写的是“非完整的浏览器”，有以下几个原因

小程序的开发过程中会用到HTML5相关的技术(并非全部)

小程序最后的发布上线需要微信审核，微信在不更新自身软件的情况下可以将小程序更新到自身软件内，这就联想到了ReactNative框架,并且已经有开发者在微信小程序的开发工具源码中发现使用了React和NodeWebkit库

官方文档中着重强调了脚本内是无法使用浏览器中常用的window对象和document对象（基于这一点，像zepto/jquery这种操作dom的库就被完全抛弃了）

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

不过由于微信给开发者提供了开发工具，而开发工具中也内置了编程、调试、开发环境、发布于一身，我们也不用再探讨它的最终运行环境了，只要按照官方文档进行开发就可以了。并且从微信团队给开发者提供开发工具这一举动，让我联想到了苹果给开发者提供的X-CODE开发工具，可以想象微信的“野心”可见一斑

第二条是开发成本的不同。

这里我提出了一个问题，当我们面对一个HTML5web开发需求时，我们需要考虑什么呢？抛去开发工具（vscode、sublimtext、Atom等）不谈，大到前端框架（Angular、react、vue、backbone等）、模块管理工具（Webpack、Browserify等）、任务管理工具（Grunt、Gulp等），小到UI库选择、接口调用工具（ajax、FetchApi等）、浏览器兼容性等都要我们一一考略，再不济用jqery插件写H5，也要在开发过程中去寻找合适的jquery插件来配合项目。尽管这些工具可定制化非常高，并且提高了开发者的开发效率，但我相信项目开发的配置工作已经消耗了不少精力，尽管大部分开发者都有自己的配置模板，但长久以来对于项目中使用的各种外部库的版本迭代、版本升级所产生的成本应该也不低。

而当我们面对一个微信小程序的开发需求时，我们需要考虑什么呢？微信团队提供了开发者工具，并且规范了开发标准，前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，WXML中尽管全部是自定义标签，但官方文档中都有明确的使用介绍，相信上手应该是非常容易的；WXSS、JSON和JS文件中的写法稍有限制，但整体相差不多。在统一了这些标准之后，作为一个开发者，你会发现，自己只要专注写程序就可以了：

当需要调用后端接口时，调用发起请求API

当需要上传下载时，调用上传下载API

当需要数据缓存时，调用本地存储API

引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用

UI库方面，框架自然带有自家weui库加成

并且在使用这些API时，你不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG，可见微信小程序的开发成本确实相比以往的web开发低很多。

第三条是获取系统级权限的不同。

微信小程序相对于HTML5web应用能获得更多的系统权限，比如网络通信状态、数据缓存能力等，这些系统级权限都可以和微信小程序无缝衔接，也就是官方宣称的拥有NativeApp的流畅性能，而这一点恰巧是HTML5web应用经常被诟病的地方，这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。

第四条便是应用在生产环境的运行流畅度。

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

app中部分页面要使用微信h5页面，其中一些servise请求需要自定义token

一开始想在ouath2js里修改openid设置的，但是后来采用的其他的办法。

openidCacheset() 是存储用户信息的方法

先获取url，进行解析，看query中是否存在token

只有没有获取到用户信息且query中没有token，才进入登陆页面oauth2js

如果query中有token，就重新请求接口，获取用户信息并缓存。

优先获取query中的token，其次获取缓存中的token

1、定位不同（公众号服务于营销与信息传递，小程序面向产品与服务）

　2、实现技术区别（公众号基于H5，小程序基于微信自身开发环境与开发语言）

　3、功能不同（公众号功能围绕信息展示与营销，小程序面向产品与服务）

　4、体验上的差别（公众号操作延时较大，小程序体验接近原生App）

1、找一个制作H5页面的平台、注册账号

2、进入管理微传单界面，挑选一款自己喜欢的样板进入编辑页面；

3、接下来要做的就是对整体页面的各个栏目进行编辑，例如模板中的和文字等，预览OK、点击保存，之后扫描二维码到微信端，即可一键分享到各个移动社交平台了。

微信商城和H5商城区别是什么？

01运行环境

H5商城运行环境是浏览器，主要是浏览器页面。

商城微信小程序运行环境是属于计算机程序，配合自己定义的开发语言标准，大幅提升了小程序的流畅度和性能。

02开发成本

开发一个H5商城，需要从开发工具、前端框架、模块管理工具、任务管理工具，还有UI库选择、接口调用工具、浏览器兼容性等等，都需要考虑周到。尽管大多数开发者面对这些工具时，都有了自己的配置模板，但成本依然不低吧！

微信提供了统一的开发工具，并且规范了开发标准，所以，作为一个开发者，你只需要专注写代码就好了。而且，你能不能随意调用微信开发里的API，不用担心浏览器的兼容性，不用担心莫名其妙的bug所以，小程序的开发成本比以往的HTML5开发的web成本低很多。

03系统权限

微信能获取到更多的系统权限，如网络通信状态、数据缓存能力等，这些系统级权限都能与微信小程序无缝衔接，这也就是官方宣称的拥有NativeApp的流畅性能。

而HTML5web应用则相对少了很多，这一点恰巧是HTML5web应用经常被诟病的地方。

也因此，HTML5的大多数应用被圈定在业务逻辑简单、功能单一的范围上。

04用户体验

我们在打开一个HTML5页面的时候，实际上就是打开一个web网页，而网页在浏览的时候，需要在浏览器中进行渲染，这个过程叫做加载，无论加载的时间的长短，都会给用户一种「卡」或者「不灵敏」的感觉。

小程序是微信内的云端应用，通过WebSocket双向通信（保证无需刷新即时通信）、本地缓存（与UI本地缓存降低与服务器交互延时）以及微信底层技术优化实现了小程序接近原生APP的体验。所以在使用小程序的时候，同等网络条件下几乎不用等待，能不能像操作普通app一样流畅。

H5游戏是H5很重要的一种场景类型，也可以说H5这个词蹦到大众眼前就是因为《围住神经猫》这个H5游戏爆火刷屏。

从2014到2020年，我们也看到了很多好玩的H5小游戏，不过这些H5小游戏都能看到其他app上的影子，主要还是因为H5游戏主要用来营销宣传，目前能制作平台也比较多，但专业度不同，这里较低的灵活性和简易的游戏创建就不多介绍了。

意派Epub360-专业的H5页面制作工具

意派 Epub360 属于专业级别的H5制作网站，能实现 交互动画效果；较高级的交互设定，比如手势触发、摇一摇、拖拽交互、碰撞检测、重力感应、关联控制等；同时支持用户信息获取，包括昵称头像、拍照、录音等功能，结合投票、评论、助力、信息列表组件，轻松实现社交互动类H5设计

由于可实现的功能较多，自然操作起来比较复杂，不过也可以直接 套用模板 进行修改。

可加入系统自带的各类特效。参数 精确地控制交互，加入交互逻辑，很适合有较多H5制作经验的老司机。

补充一些：

关于编辑器专业能力

专业交互功能

支持专业级动画控制、交互设定、社交应用与数据应用，保障企业的商业需求顺利实现。

操作简易、流畅

采用由简到难递进式产品设计模式，效果组件化，减少用户上手难度，稳定的操作环境助力企业持续创意输出。

提供企业/媒体培训和定制服务

我们为企业/媒体单位提供H5工具培训及定制服务，定制服务包含扫码签到、大屏互动、H5游戏等多种场景，是上海解放日报、招商银行、广西日报等多家单位长期合作伙伴。

提供优质模板库

提供丰富的模板库，500+优质的企业H5模板，各种邀请函、招聘、节日海报、H5小游戏应有尽有。

提供私有化部署服务

上海意派科技的私有化部署系统功能架构覆盖功能层、服务层、系统支撑层三个层级。

功能层：

H5内容管理、H5编辑器、H5发布管理、H5访问统计、H5数据收集、素材资源管理、表单管理、数据库定义、个人账号信息管理。

服务层：

用户管理、素材资源管理、H5作品管理、作品播放、表单管理、数据库管理、访问统计、微信jssdk、微信授权、H5互动数据处理、数据库服务、语音、处理、消息列队。

系统支撑层：

Django应用服务器、MySQL 数据库存储、MongoDB、Redis 内存数据库、Memcache 缓存、OSS文件存储、OpenSearch、Celery 列队

对比一些简易化的模板平台，意派Epub360 H5平台可以使用更专业的组件，创造更多创意的可能，更大的创作自由空间以及更多的营销数据效果。