从项目中由浅入深的学习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开发
从项目中由浅入深的学习vue,react,微信小程序和快应用(1)相关推荐
- Vue,React,微信小程序,快应用,TS 和 Koa 一把梭
前言 前端生态越来越繁华,随着资本寒冬的来临,对前端招聘要求也变高了: 本文将从项目出发由浅入深做一个Vue,React,微信小程序,快应用,TS和 Koa的知识大串联: 相当于一篇文章搞定前端目前主 ...
- 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
- vue uniapp 微信小程序 搜索下拉框 模糊搜索
vue uniapp 微信小程序 搜索下拉框 模糊搜索 话不多说 直接贴代码 template <template><view class="index"> ...
- [vue] vue和微信小程序写法上有什么区别?
[vue] vue和微信小程序写法上有什么区别?写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下 ...
- 微信小程序和vue双向绑定哪里不一样_浅析Vue 和微信小程序的区别、比较
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue的钩子函数 ...
- 前端知识总结汇总!(HTML、CSS、JS、jQuery、vue、微信小程序)
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
- 【微信小程序控制硬件 第13篇】安信可B站直播学习总结,微信小程序MQTT远程控制ESP8266 NodeMCU,谈谈微信生态那些事;
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
- Vue开发微信小程序
一.安装Vue及Vue-cli脚手架 参考:Windows安装Vue 二.安装HBuilder X[方便快速上手] 1.下载 2.解压[无需安装] 3.点击执行[根据需要创建桌面快捷方式即可] 4.创 ...
- 学习如何使用微信小程序的for和foreach循环遍历获得索引和数据
学习如何使用微信小程序的for和foreach循环遍历获得索引和数据 js文件中定义数组 第一种for循环方法 第二种for循环方法length 第三种forEach循环方法 js文件中定义数组 * ...
- ssm+vue+java微信小程序的英语学习激励系统#毕业设计
随着互联网大潮的到来,决定开发一套智能化.信息化的微信小程序的英语学习激励系统,主要对首页,个人中心,用户管理,单词分类管理,单词本管理,学习清单管理,试卷管理,试题管理,系统管理,考试管理等功能模块 ...
最新文章
- 工作中 99% 能用到的 Git 命令
- linux shell 语句出错自动退出 调试 检查 脚本
- 转载:python3 安装pycrypto
- ASP:关于生成HTML文件的新闻系统
- hdu 4597 Play Game(记忆化搜索)
- VTK修炼之道42:频域处理_高通滤波(理想+巴特沃兹)
- oracle中join另一个表后会查询不出一些数据_面试必备 | 8个Hive数据仓工具面试题锦集!...
- mysql sqlexception_c-很奇怪-mysql的sql :: SQLException未被其类型捕...
- [收藏]判断文本框中的内容必须全为数字
- java中的杨辉三角形_Java编写杨辉三角
- 79元限抢Jeep专柜「冰丝速干裤」!穿上它让你“胯下生风”,比裸奔还爽!
- 送书福利|少儿编程能够一玩就会吗?够胆量的家长,让孩子打卡30天玩会编程!...
- DELLR420配置RAID
- IPFS 之包管理器GX
- word使用技巧-批量删除图片技巧
- 邮件营销 | 精准投放,独立站可提升6倍转化率
- java单播多播socket_广播(broadcast),组播(multicast),单播(unicast)的Java实现
- 【Matlab路径规划】蚁群算法机器人大规模栅格地图最短路径规划【含源码 1860期】
- ubuntu 安装搜狗打字法
- 四参数拟合算法之牛顿法
热门文章
- 图片边框border-image
- 腾讯微博qq说说备份导出工具_10年过去了,腾讯微博终于被判了死刑。。。
- 计算与推断思维 十六、比较两个样本
- Q3中国网游业观察:腾讯网易春风得意
- 响应服务器530 5.7.0,SMTPSenderRefused(530,需要b'5.7.0身份验证)
- KumiaoQQ机器人框架源码
- LoRaWAN节点和网关接入阿里LinkWAN
- 搞着玩:基于Spring Boot的企业CMS系统
- 一款完整的企业级CMS站群系统源码,采用了比较典型的三层架构技术,源码分享
- FTP在资源管理器里打不开