从项目中由浅入深的学习vue,react,微信小程序和快应用(1)

**才见岭头云似盖，已惊岩下雪如尘。---《南秦雪》**

前言

这几天好多地方都下雪了,雪花真美呀,特地在网上搜上好看的图片和诗句写上。
本文主要从template【模板】讲到一个demo，快速上手vue、react和微信小城序的项目开发。
如果你不熟悉这中间的某一个技术栈,可以clone下来跑一跑。 如果全部能上手,中间有些细节耶可以看看。开撸

1.template篇

1.1 vue-template-pc

1.效果图

vue-template-pc项目，欢迎star

2.技术栈
vue+vue-router+vuex+axios+element-UI+iconfont(阿里)

3.适配方案
左侧固定宽度，右侧自适应
左侧导航和右侧导航分别配置滚动条

4.技能点分析

技能点	对应api
常用指令	@(v-on)绑定事件, v-if/v-show是否创建/和是否显示,v-for循环
生命周期	8个生命周期beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy和destroy
观察计算	computed和watch
data属性	定义变量,同样变量使用必须先定义
组件注册	components局部注册,Vue.component()全局注册
组件通讯	子传父:this.$emit,父传子:props,平级组件:vuex或路由传参
插件注册	Vue.use()注册插件,如Vue.use(element)是调用element内部的install方法
路由注册	vue-router:Vue.use(router)也是调用内部的install方法,挂载到vue实例中生成route和router属性
路由模式	mode属性可以设置history和hash
子路由	children:[]可以配置子路由
路由钩子	router.beforeEach(实现导航钩子守卫)和router.afterEach
vuex	4个属性,state,getters, actions(异步获取数据)和mutations(同步获取数据)
vuex	4个辅助函数,mapState,mapGetters, mapActions和mapMutations,就是辅助处理commit或distapch方法
axios	拦截器,interceptors.request请求拦截器,interceptors.response响应拦截器
axios	baseUrl配置公共请求路径,必须符合http标准的链接,否则设置无效
axios	请求方法,get,post,put,delete等
axios	跨域,withCredentials: true,需要后端支持
css	sass,对应嵌套不超过三层,滚动条样式设置,文本两行超出build问题
iconfont	阿里字体图标，可以自定义icon

5.那么问题来了?
computed和watch的区别? 解析
路由传参的方法? 解析
vue.use,vue.install,mixins方法区别? 解析
history和hash区别及实现原理? 区别解析原理解析vue-router官网
使用history和hash模式部署服务器有什么问题?问题解析
vuex的辅助函数和基本属性使用的区别?vuex官网
axios原理?axios源码
简单实现一个vue+vue-router+vuex的框架?

1.2 react-pc-template

1.效果图

react-pc-template项目, 欢迎star

2.技术栈
dva+umi+ant-design-pro
dva:可拔插的react应用框架,基于react和redux
mui:集成react的router和redux
ant-design-pro:基于react和ant-pc的中后台解决方案

3.适配方案
左侧固定宽度，右侧自适应
右侧导航分别配置滚动条.控制整个page

4.技能点分析

技能点	对应api
JSX	react是基于jSX语法
react16之前生命周期	实例化(6个):constructor，getDefaultProps,getInitialState,componentWillMount,render,componentDidMount
react16生命周期	实例化(4个):constructor，getDerivedStateFromProps,componentWillMount,render,componentDidMount
生命周期	更新:5个生命周期
生命周期	销毁:componentWillUnmout
路由	基于umi,里面有push,replace,go等方法
状态管理	dva里面的redux的封装,属性有state,effects,reducers
组件传值	父子:props,平级redux或umi的router
model	项目的model和dom是通过@connect()连接并将部分属性添加到props里
登陆	登陆是通过在入口js里面做路由判断

5.那么问题来了?
umi的router传参形式? 解析
dva封装的redux和原生的redux使用有那些不同? dva使用解析redux使用解析
umi里面router实现原理?umi源码
对比vue和react在原理和使用上的区别?

1.3 vue-mobile-template

移动端代码见demo篇

1.4 小程序模板

由于小程序的IDE里面有生成的模板,mobile也是基于vue,所以只在demo篇展示demo

1.5 快应用模板

1.template代码实现
官方template生成教程

2.技能点分析

技能点	对应api
布局	基于弹性布局
指令	for：循环，if、show
生命周期	页面的生命周期：onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress
app生命周期	onCreate、onDestroy
事件	$on、$off、$emit、$emitElement
路由配置	manifest文件的router属性配置
路由跳转	router.page
组件通讯	父子组件：$emit，props，兄弟组件：通过 Publish/Subscribe 模型
原生组件	list，map，tabs和canvas
消息机制	websocket使用

2.demo篇

2.1 vue-demo(vue-pc-demo)

1.效果图

vue-demo项目地址, 欢迎star

2.技术栈
vue+vue-router+vuex+axios+element-UI+高德map+vue-split-table
高德map:高德地图
vue-split-table:表格拆分插件,vue-split-table插件

3.适配方案
同上

4.技能点分析
比template篇多了map的使用,高德使用手册
实现axios的api模块化,并全局挂载api和axios
所以由此可以看出只要有了template,后期开发so-easy,只是新加tab页

2.2 react-pc-demo

参考ant的ant-design-pro项目

2.3 vue-mobile-demo

1.效果图

vue-mobile项目

2.技术栈
vue+vue-router+vuex+vant+rem+sass+iconfont(阿里)
vant:有赞的电商mobile插件

3.适配方案
rem

4.技能点分析
iconfont的使用:官网配置icon,导出图标,引入assets目录下
vant使用:详见vant官网
全局配置rem:在index.html文件配置
全局配置sass函数和mixin:在build/utils下面的scss的options属性配置static目录下面的函数和混入

5.那么问题来了
vue-cli生成的项目src下面的assets和根路径下面的static目录的区别?解析

2.4 小程序demo

1.效果

min-program-demo项目,欢迎star

2.技术栈
weui+tabbar+分包+iconfont+自定义顶部导航+组件传值+wx.request封装
weui:Tencent推出的小程序UI

3.适配方案
rpx:微信小程序的单位

4.技能点分析

技能点	对应api
常用指令	bindtap绑定事件, wx:if/wx:show是否创建/和是否显示,wx:for循环
生命周期1	应用生命周期(app.js里):launch,show,hide
生命周期2	页面生命周期(page里):load,show,ready,hide,unload
生命周期3	组件周期(component里):created,attached,moved,detached
wx.request	ajax请求
背景音乐	wx.getBackgroundAudioManager
音频	wx.createAudioContext
图片	wx.chooseImage
文件	wx.getFileInfo
路由	在app.json里面pages属性定义pages目录下面的文件
路由切换	wx.navigateTo，wx.navigateBack， wx.redirectTo，wx.switchTab，wx.reLaunch
分包	在app.json里面subPackages属性定义分包路由
weui组件	weui官网
原生组件	微信原生组件
业务组件	在json文件usingComponents注册
组件通讯	定义globalData，storage和路由

5.那么问题来了
小程序的生命周期执行顺序？page和应用生命周期 ， component生命周期解释
几种路由切换有什么不同？路由介绍
小程序怎么实现watch监听数据变化？实现watch

6.小程序框架
wepy官网
基于wepy的商城项目
mpVue
基于mpVue的项目

分析:这两个框架都是通过预编译将对应风格的格式转化成小程序格式

2.5 快应用demo

类似书单项目的快应用

3.结语

对比下vue,react,微信小程序和快应用这几种技术栈开发,可以分为两类,
一类是mvvm式的开发:vue,微信小程序和快应用
一类是基于JSX的view开发