从项目中由浅入深的学习vue,微信小程序和快应用 (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 vue-mobile-template

移动端代码见demo篇

1.3 小程序模板

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

1.4 快应用模板

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 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.3 小程序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
自定义导航栏	app.json 设置的navigationStyle设置为custom
分包预加载	app.json 设置preloadRule
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开发