前端可以做什么 浅谈前端在移动互联网的应用
目录：1.什么是移动互联网？ 他的优势？
移动互联网是PC互联网发展的必然产物，从字面上可以看出来它是由移动和互联网融合的产物，平常对于我们生活主要是手机，pad或其他的无线设备在移动状态下（比如户外，地铁上，公交车）随时，随地的访问internet以获取信息，使用娱乐，商务等各种网络服务。移动互联网已经渗透到我们身边的各个领域： 微信，支付宝，百度，淘宝，王者等，每天我们都在与移动端互联网打交道。
对比pc互联网：
最大优点：便携式使用，非常方便，可以利用碎片空闲时间，从游戏发展史可以看出，以前的端游 ： lol,梦幻西游，dota,的市场占有率被手游占去一大部分。以前传统的互联网公司也从一开始的pc端产品延申到app端的产品，例如： 淘宝pc端-->淘宝APP,58同城等，再加上智能手机的普及， 新兴的一些互联网产品大量人力放在移动端，pc端只做简单的介绍和一些后台系统，比如： 拼多多（无pc端购物平台），抖音（前几月才上线pc端）。
缺点： 受到网络能力和终端硬件能力的限制，以及手机屏幕过小的原因，不适合复杂操作的后台系统，
对于华客： 大部分属于较复杂的后台系统，主要业务还是在pc端，目前只有二维码电话那里的小程序还有华客app含有的部分的功能逻辑。（【app还不属于极联云下，等前端在app这掌握的差不多完全可以把app规划到极联云下】）
2.前端在移动互联网都可以做什么：
H5页面，app,小程序生态： （微信小程序，支付宝，抖音等）【主要也是围绕这三方面来讲】
应用： h5 ： 手机浏览器打开的页面（较少），app内嵌h5页面，微信公众号中H5页面【公众号慢慢减少，小程序比重增多】 app 和 小程序 就是我们认知中的样子
他们对于前端来说学习的难度 h5页面< 小程序生态< app 我们从最简单的h5开始，
3.具体技术实现
H5页面和pc技术注意点
前端主要由 HTML,CSS ,JS组成 对于H5页面的HTML,JS，css和pc页面基本没啥区别，最主要区别是：H5页面是响应式页面，（不同手机屏幕尺寸实现不同的布局） pc 页面尺寸单位一般为 px (具体像素): 不同尺寸比例的手机如果使用px单位就会导致有些手机中展示比较小，有些展示比较大， H5页面解决方案： rem 单位加css媒体查询
主流主要是使用rem单位和媒体查询@media结合来实现：
rem是相对于body标签的font-size大小来相应的，
body的font-size:12px;
1rem = 12px*1 ====>12px
然后在不同的宽度的屏幕下写不同body的font-size，这样可以实现相同的rem，在不同屏幕中不同大小
这里加上媒体查询的代码图 [这里也有用js计算屏幕大小来换算body的font-size大小]
login-dev.vocust.com/h5/#/login 华客首页可以做演示
微信公众号： 其实就是在微信公众号中的H5页面，区别是 H5页面中含有微信的sdk，使用微信特有的一些功能
官网： developers.weixin.qq.com/doc/offiacc…
添加图片显示用处 ：
【考虑公众号使用比重慢慢减少，大致过一下文档】
app内嵌H5页面（Hybrid App）：
优点：1. 原生APP修改页面要重新发布，等待审核，H5页面的修改 可以随时上线，不用等待审核。
2.H5跨平台，iOS和android需要各自开发。相对原生，H5开发成本低，周期快
缺点：
1.H5页面的很多交互都没有原生的好，比如弹层、输入时候的页面滑动 等。H5的效果相对比较low，没有原生的好看，
也没有原生默认的动画等效果
原生app和H5的分工：
1、核心需求 要用原生，比如淘宝里的产品详情页、订单页、支付页等。
非核心需求 可以考虑用H5，遇到功能调整，可以快速发布。比如淘宝首页的特色好货、热门市场等栏目 需要经常变动，用H5来做比较灵活。
2、阶段性的营销活动页面，特别是功能、布局等经常需要修改的需求，可以用H5来做。比如节日的有奖活动页面，经常需要调整，用H5做会更灵活。
内嵌H5开发有什么注意点：
h5因为在交互上有缺陷，所以一般会引入第三方的ui库来处理一些动态效果： loading,表单，下拉刷新，上拉加载分页等，比如vantUI,mui,WeUI， Mint-UI等
vantUI文档： vant-contrib.gitee.io/vant/#/zh-C… [自认为比较好，过一下有什么]
H5页面有时需要调用原生的一些功能，比如调用原生的电话，相册，分享，所以这里需要js和native进行交互，
H5页面与app交互方式：
- 暴露法，就是ios开发和安卓开发将所需的值暴露在window，
- ios的 WebViewJavascriptBridge， 安卓的JSBridge，他俩都属于js与Native之间进行通信的桥梁，
参考文章：www.jianshu.com/p/d12ec047c…
参考文章：www.jianshu.com/p/ae3a241b3…
小程序：
-
小程序开发文档： developers.weixin.qq.com/miniprogram… (过一下) 简单来说和H5区别： HTML方面： 标签不同，使用小程序自定义标签 view , text,cover-view,image等 CSS方面： 使用rpx单位 ，一般让ui提供750像素的ui图，1rpx = 1px ,小程序会对不同尺寸下显示不同的距离。 JS： 生命周期，语法基本和vue相似，会使用小程序特有api
-
开发者工具的使用
小程序的脚本文件中，内置对象是page，而非传统浏览器里的window，因此所有基于window对象来写的库(例如jQuery)都不适用于小程序 小程序可以进行组件化开发以及数据绑定，所有对于DOM的操作都是基于数据驱动的，并没有直接进行DOM操作的做法，换言之，小程序内没有document对象，原生js和jQuery里的DOM操作思维要舍弃掉。
app:
参考文章： www.cnblogs.com/windfic/p/1…
说一下app 目前主流技术组成 1.h5做app开发： uni-app(vue), 31.4k 文档： uniapp.dcloud.io/api/media/i… 文档还是挺全的，调用原生的方法也很多， react-native, 95k （使用react语法，学习起来容易一点），由Facebook开发 ionic(主要是angular的语法，目前在兼容vue和react，文档都是英语，看起来可能麻烦一点) star 44.2K react native好像只能简单的调用原生的一些方法，复杂的原生交互可能还需要原生开发
weex : 17.6k 阿里旗下的，基于vue开发，后面好像不怎么更新了，慎用 文档：emas.weex.io/zh/docs/api…
flutter : 121k Google开发，快速的开发，富有表现力的精美UI和类似本机的性能,它的独特之处在于它使用Dart编程语言，不同于其他跨平台应用框架，Flutter根本不使用JavaScript。嵌套地狱，代码难看难维护，学习成本高 dart语法官网： dart.cn/samples
使用Flutter的一些公司是Google，eBay，宝马等。
我认为主流的技术： flutter > react-native> uni-app > weex
但是因为uni-app使用vue语法，学习成本很低，很适合初创公司快速开发app，很明显uni-app的学习成本太低了，它没有附加专有技术，全部使用公共技术。
传统的技术： PhoneGap 中的cordova，感觉他俩属于一个
uniapp.dcloud.io/api/media/i…
热度：
国内指数：Flutter > uni-app > React Native ≈ Weex
国外指数：Flutter > React Native >> uni-app ≈ Weex
性能：
纯原生开发（Android与iOS） ≈ Flutter > React Native ≈ Weex ≈ uni-app > 混合开发
抛开一切条件，那么我给出的初步建议是：Flutter ≈ React Native > uni-app > Weex，如果结合实际，那么我的建议是：
Flutter：如果各种资源非常充足（特别是时间和资金），那么选用它是个不错的选择
React Native：如果当下的技术栈是React，那么选用它是个不错的选择
Weex：不是很推荐
uni-app：如果当下技术栈是Vue，且资源较少，（初创公司，外包项目）那么可以尝试它
下面的先不讲
wpa: 桌面应用
后端服务： node (koa,express)
一般可做中间层，即时通信，高并发的服务，解决前后端分离导致的seo问题，直接在服务端渲染页面 优势： 基于Javascript语言，不用再单独新学一门陌生的语言，从而减低了学习的门槛 2..Nodejs的社区在壮大，不仅包的数量在快速增加，而且包的质量也要明显好于其他语言的。很多明星级的包，都是简单而灵巧的，为了开发者的使用习惯而设 计。我最常用到的工具包，如socket.io, moment.js, underscore.js, async.js, express.js, bower.js, grunt.js, forever.js
