mpVue小程序开发笔记

mpVue(Vue in Mini Program)

简介

  • 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架
  • 2.融合了原生小程序和Vue.js的特点
  • 3.可完全组件化开发

特点

  • 1.组件化开发
  • 2.完成的Vue.js开发体验(前提是熟悉Vue)
  • 3.可使用Vuex管理状态
  • 4.Webpack构建项目
  • 5.最终H5转换工具将项目编译成小程序识别的文件

初始化项目

  • 1.npm install vue-cli -g 下载vue脚手架
  • 2.vue init mpvue/mpvue-quickstart my-project 初始化项目
  • 3.cd my-project 进入项目根目录
  • 4.npm install 根据package.json安装项目依赖包
  • 5.npm start || npm run dev 启动初始化项目

开启项目

注册小程序

  • 1.src/app.json 全局配置文件
  • 2.src/App.vue 等同于原生小程序中的app.js, 可再次写小程序应用实例的声明周期 函数 || 全局样式(style中编写)
  • 3.main.js应用入口文件, 声明组件类型,挂载组件

入口文件介绍

import Vue from 'vue'
import App from './App.vue'
// Vue.config.productionTip = false 默认为false,用于启动项目的时候提示信息,设置为false关闭提示
Vue.config.productionTip = true
// 这个值是为了与后面要讲的小程序页面组件所区分开来,因为小程序页面组件和这个App.vue组件的写法和引入方式是一致的,为了区分两者,需要设置mpType值
App.mpType = 'app'
// 生成Vue实例
const app = new Vue(App)
// 挂载组件
app.$mount()

编写页面 pages/index

页面需要文件介绍

  • 1.index.vue 等同于原生中的wxml + wxss + js
  • 2.main.js 当前组件页面的入口文件,用于生成当前组件实例,并挂载组件
  • 3.main.json 当前页面的局部配置文件(注意:index.vue组件最终会被转化为main.wxml以及main.wxss文件, 所以当前的json文件需命名main)
  • 4.src源文件

注意事项

1. 在每个组件中都需要使用: 组件实例.$mount() 去挂载当前组件,否则对应的页面不能生效
2. npm run dev 每次会重新打包dist文件,测试只能在小程序工具上
3. mpvue中绑定小程序原生事件不能使用bind + 事件名,需要使用@事件名 且要定义在methods中否则不生效
4. 新创建的页面需要重新执行: npm run dev才能将新的页面打包到dist文件中

vue实例生命周期 && 小程序生命周期

vue实例生命周期

  1. beforeCreate 实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
  2. created 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  3. beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。
  4. mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
  5. beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
  6. updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
  7. beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。
    8.destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

小程序应用App实例生命周期

  1. onLaunch: 小程序应用初始化
  2. onShow: 小程序启动获取后台进入前台
  3. onHide: 小程序应用从前台进入后台

小程序页面Page实例生命周期

  1. onLoad 监听页面加载
  2. onShow: 页面显示
  3. onReady: 监听页面初始化渲染完成
  4. onHide: 监听页面隐藏,注意当前页面实例依然存活
  5. onUnload: 监听页面卸载
  6. onPullDownRefresh: 监听用户下载动作
  7. onReachBottom: 监听用户上拉触底操作
  8. onShareAppMessage: 用户点击右上角分享功能
  9. onPageScroll: 页面滚动
  10. onTabItemTap: 当前是 tab 页时,点击 tab 时触发

原生小程序 VS mpvue 对比总结

1) 原生小程序运行更稳定些, 兼容性好,mpvue可能在某些方面存在兼容性问题(vue-router)
2) mpvue支持vue组件化开发. 效率更高,功能更强大(双向数据绑定, vuex)
3) mpvue可基于webpack组件化, 工程化开发
4) 原生不支持npm安装包,不支持css预处理
5) 支持 computed 计算属性和 watcher 监听器;模板语法中只支持简单的 js 表达式。可以直接写 div 、span 等标签 computed 的写法
6) 之前会vue的工程师上手mpvue框架的成本较低

码云链接:https://gitee.com/JasonLee1286791087/mpvue
微信扫码体验版:在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页