**才见岭头云似盖，已惊岩下雪如尘。—《南秦雪》**
前言
这几天好多地方都下雪了,雪花真美呀,特地在网上搜上好看的图片和诗句写上。本文主要从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-prodva:可拔插的react应用框架,基于react和reduxmui:集成react的router和reduxant-design-pro:基于react和ant-pc的中后台解决方案
3.适配方案左侧固定宽度，右侧自适应右侧导航分别配置滚动条.控制整个page
4.技能点分析
技能点
对应api
JSX
react是基于jSX语法
生命周期
实例化(5个):getDefaultProps,getInitialState,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开发
发表回复