脚本宝典收集整理的这篇文章主要介绍了

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过