详解 mpvue 小程序框架 及和原生的差异

栏目: 编程语言 · 发布时间: 5年前

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

简介

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源文件

详解 mpvue 小程序框架 及和原生的差异

  1. 自动打包后的dist文件

详解 mpvue 小程序框架 及和原生的差异

index/main.js

import Vue from 'vue'

import Index from './index.vue'

const index = new Vue(Index)

index.$mount()

index/main.json

{

"navigationBarTitleText": "主页",

"navigationBarBackgroundColor": "#8ed145"

}

注意事项

1.在每个组件中都需要使用: 组件实例.$mount() 去挂载当前组件,否则对应的页面不能生效

2.npm run dev 每次会重新打包dist文件,测试只能在小程序工具上

3.mpvue中绑定小程序原生事件不能使用bind + 事件名,需要使用@事件名 且要定义在methods中否则不生效

4.新创建的页面需要重新执行: npm run dev才能将新的页面打包到dist文件中

vue实例声明周期 && 小程序声明周期

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

    8.destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

    小程序应用App实例声明周期

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

    后台

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

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

    注意事项

    除了 Vue 本身的生命周期外,mpvue 还兼容了小程序生命周期,这部分生命周期钩子的来源于微信小程序的 Page, 除特殊情况外,不建议使用小程序的生命周期钩子。

    mpvue中使用vue-router && axios

    vue-router

    1. 在mpvue中对vue-router的支持不好,问题较多
    2. 进行页面跳转的是可使用小程序提供的API

    (1)wx.navigateTo() 保留当前页面,可回退

    (2)wx.redirectTo() 不保留,不能回退

    (3)wx.switchTab() 使用于tabBar页面

    axios

    1. 小程序中不支持使用axios,会报错: XMLHttpRequest is not a constructor
    2. 原因: 小程序的环境和浏览器的环境不一样
    3. 解决方法: 使用其他库: flyio

    fly使用教程

    gitHub地址

    https://github.com/wendux/fly

    使用步骤

    1)下载: npm install flyio

    2)引入: import Fly from ‘flyio/dist/npm/wx’ 注意flyio支持很多环境下使用

    3)生成实例: let fly = new Fly

    4)配置: Vue.prototype.$fly = fly

    5)使用: 组件中 this.$fly.get()

    mpvue VS 小程序 状态管理

    **原生小程序**

    1)在data中初始化状态数据

    2)修改状态: this.setData({key: value})

    3)页面公共状态:

    a.App程序实例的data中定义

    b.获取状态数据: let datas = getApp()

    c.修改状态数据: datas.data.xxx = value

    4)或者利用storage本地存储

    Mpvue

    1)在组件中通过getApp无法拿到对应的数据

    2)mpvue中支持vuex,所以可以使用vuex集中管理状态

    3)vuex几个重要的概念:

    a.store对象

    b.dispatch() 分发状态

    c.actions 携带参与修改状态的数据,并触发mutations

    d.mutations用于修改状态,并将状态交给store对象

    e.getter 用于动态计算状态

    原生小程序 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框架的成本较低


    以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

    查看所有标签

    猜你喜欢:

    本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

    多处理器编程的艺术

    多处理器编程的艺术

    (美)Maurice Herlihy、(美)Nir Shavit / 机械工业出版社 / 2013-2 / 79.00元

    工业界称为多核的多处理器机器正迅速地渗入计算的各个领域。多处理器编程要求理解新型计算原理、算法及编程工具,至今很少有人能够精通这门编程艺术。 现今,大多数工程技术人员都是通过艰辛的反复实践、求助有经验的朋友来学习多处理器编程技巧。这本最新的权威著作致力于改变这种状况,作者全面阐述了多处理器编程的指导原则,介绍了编制高效的多处理器程序所必备的算法技术。了解本书所涵盖的多处理器编程关键问题将使在......一起来看看 《多处理器编程的艺术》 这本书的介绍吧!

    HTML 压缩/解压工具
    HTML 压缩/解压工具

    在线压缩/解压 HTML 代码

    在线进制转换器
    在线进制转换器

    各进制数互转换器

    URL 编码/解码
    URL 编码/解码

    URL 编码/解码