用mpvue实现一个简单的demo
2020/3/13 4:32:14
本文主要是介绍用mpvue实现一个简单的demo,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
序言
上一篇从腾讯后台搭建以及搭建本地开发环境这两个方面进行总结。在进行编码时,这两种搭建方式也能提供更好的开发环境,提高实际的开发效率。
这一节主要分享的便是如果用mpvue
实现一个基础的demo
,这个demo
主要会从mpvue
的特性、结构,以及生命周期来实现,期间遇到的坑,Eknow君也会一步步踩踏实了,走得稳点。
mpvue的特性
彻底的组件化开发能力:提高代码
完整的Vue.js
开发体验
这句话的意思呢,就是说mpvue
基本集成了vue
的核心代码,亦即继承了vue
的核心功能-组件。组件可以拓展html
、封装以及复用代码,它阐述一个组件树是由无数的组件去组成的。通常一个应用会以一棵嵌套的组件树的形式来组织:
而一个好的组件树具有封装性、复用性、拓展性。
封装性
组件的封装过程有这几步骤:【创建一个.vue
文件】-【进行独立的逻辑处理】-【向外暴露必要的属性、方法等】。
举个demo
:列表卡片。里面的信息包括标题title
、内容content
、图片image
、时间time
等。这是一个独立的功能项,可以将其封装起来,只暴露一个Array
的属性变量,非常简洁、独立。
此时,其他开发者可以不用关注列表项的细节,只需要专注于当前模块的逻辑处理。
复用性
组件的复用,换个专业术语便是,组件间通信。以前面的demo
列表卡片来讲,它只负责里面UI功能的实现,不负责与服务端进行打交道;而它的父组件能通过它暴露的Array
属性,将需要的数据传进去,达到数据的渲染,这样便可以达到减少耦合的效果,同时如果其他模块需要用到卡片这个组件,比如收藏啊,评论呀等等。因此,可以复用的组件亦即称为通用组件。
拓展性
谈到拓展性,这个可以说是vue
的优秀做法了,利用面向对象的思想,达到组件间相互继承的目的。
举个demo
:Echarts
实现的数据可视化图。通过组件化进行图表的基础配置,在业务实现的过程中,将extends图表组件进行折线图、柱状图以及力导向图等的切换。
小小聊一下,vue
也有一个钩子叫做mixins
,这个其实跟extends
功能很相似,都是起到混合合并的作用,而它们的区别是extends
的优先级较高,执行的顺序要优先于父组件。
mpvue的目录结构
关于mpvue初始化的项目结构,一起来看一张图,展示的是主要的目录结构,
project └───build //编译打包的node.js脚本和webpack配置文件 └───config //用于开发和生产环境下的不同配置 └───src //主要进行小程序功能编写的地方 │──components │──pages │──utils │──app.json │──App.vue │──main.js └───static //用于存放各种小程序本地静态资源 └───package.json //项目的主配置文件 └───project.config.json //用于管理微信开发者工具的小程序项目的配置文件
从这张图可以看出各个目录结构的功能以及应用。一般进行业务开发的时候,一般也只需要在src目录下进行开发即可。
mpvue的生命周期
mpvue
(github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架。框架基于Vue.js
核心,mpvue
修改了Vue.js
的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js
开发体验。
因此,mpvue的生命周期既包括vue的生命周期也包括了小程序的生命周期。
对于小程序的生命周期来讲,分为2种情况。
APP对象有onLaunch
,onShow
以及onHide
。
Page对象有onLoad
,onShow
, onReady
, onHide
和onUnload
。
而对于vue的生命周期来讲,主要有8个钩子。
【beforeCreate
】-【created
】-【beforeMount
】-【mounted
】-【beforeUpdate
】-【updated
】-【beforeDestroy
】-【destroyed
】。mpvue
由于关联了小程序与vue
这两种,因此mpvue
的生命周期实际上是vue
的实例兼容小程序的生命周期的。一起来参照下mpvue的源码【mpvue
/mpvue-quickstart
初始化后的项目】-【node_modules
】-【mpvue
】-【LIFECYCLE_HOOKS
数组】。
从这张图片可以看出,
mpvue
的生命周期就是按照这些钩子来对应的。实现toolsList的简单demo
简介:利用
mpvue
初始化的项目,进行实现一个简单的增删改查的列表demo
,过程分为几个小步骤。
创建一个todolist组件
首先,我们需要在【src
】-【components
】创建一个【todolist.vue
】;接着在pages
新建一个文件夹【todolist
】,这是小程序新建一个页面,专门来显示todolist。
project └───build └───config └───src │──components │──todolist.vue //创建一个组件 │──pages │──todolist //创建一个文件夹 │──utils │──app.json │──App.vue │──main.js └───static └───package.json └───project.config.json
着手入口文件
在todolist
的文件夹里,新建一个入口文件main.js
,这是一个统一的写法,将新创建的组件进行引用以及挂载。
import Vue from 'vue'; import App from './index'; const app = new Vue(App); app.$mount();
新建一个入口组件
创建一个index.vue
的页面,在里面调用components
下的todolist.vue
组件
<template> <div> <todo-list></todo-list> </div> </template> <script> import TodoList from '@/components/todolist'; export default{ components: { TodoList }, } </script>
实现
todolist
的业务逻辑
<template> <div> <todo-list></todo-list> </div> </template> <script> import TodoList from '@/components/todolist'; export default{ components: { TodoList }, } </script>
呈现的效果
ok,基本一个简单的增删改查demo
已完成,虽然简单,但里面的坑位不少,比如eslint
规则,wx:for
问题等等,所以有空的老铁可以去GitHub那里拿下我的代码对比下,希望能有个更深的学习。
结语
总的来讲,了解一个mpvue的整体架构还是比较简单的,毕竟玩过vue,懂得一些原理,上手起来是很快的。而无论是生命周期还是结构特性,掌握了主要目的是为了能够更快地编写更好的代码。业务功能是只是满足工作需要,而架构原理才是真正评价一个程序员水平的高低的。业务功能是只是满足工作需要,而架构原理才是真正评价一个程序员水平的高低的。
推荐文章
这篇关于用mpvue实现一个简单的demo的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2021-08-23微信小程序开发 —— 基础知识
- 2021-07-26小程序自定义标题栏写法(适配各种大小刘海屏)
- 2021-07-25小程序如何实现自定义tabBar
- 2021-07-25微信小程序如何在父组件中修改子组件的样式