共计 3993 个字符，预计需要花费 10 分钟才能阅读完成。
** 才见岭头云似盖，已惊岩下雪如尘。—《南秦雪》**
前言
这几天好多地方都下雪了, 雪花真美呀, 特地在网上搜上好看的图片和诗句写上。本文主要从 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 开发
