vue代码怎么变成小程序_从项目中由浅入深的学习vue,微信小程序和快应用 (1)

**才见岭头云似盖，已惊岩下雪如尘。---《南秦雪》**

前言

这几天好多地方都下雪了,雪花真美呀,特地在网上搜上好看的图片和诗句写上。

本文主要从template【模板】讲到一个demo，快速上手vue、react和微信小城序的项目开发。

如果你不熟悉这中间的某一个技术栈,可以clone下来跑一跑。 如果全部能上手,中间有些细节耶可以看看。开撸

1.template篇

1.1 vue-template-pc

1.效果图

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.效果图

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.效果图

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.效果

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组件

业务组件

在json文件usingComponents注册

组件通讯

定义globalData，storage和路由

5.那么问题来了

小程序的生命周期执行顺序？page和应用生命周期 ， component生命周期解释

几种路由切换有什么不同？路由介绍

小程序怎么实现watch监听数据变化？实现watch

分析:这两个框架都是通过预编译将对应风格的格式转化成小程序格式

2.5 快应用demo

3.结语

对比下vue,react,微信小程序和快应用这几种技术栈开发,可以分为两类,

一类是mvvm式的开发:vue,微信小程序和快应用

一类是基于JSX的view开发