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

IamDLY 发布于2019-08-26 13:52 / 2228人阅读

摘要：在这一步，实例已完成以下的配置数据观测，属性和方法的运算，事件回调。可以直接写等标签的写法之前会的工程师上手框架的成本较低

简介

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

页面需要文件介绍

index.vue 等同于原生中的wxml + wxss + js

main.js 当前组件页面的入口文件，用于生成当前组件实例，并挂载组件

main.json 当前页面的局部配置文件(注意：index.vue组件最终会被转化为main.wxml以及main.wxss文件, 所以当前的json文件需命名main)

src源文件

自动打包后的dist文件

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实例声明周期**

beforeCreate 实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。

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

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

onLaunch: 小程序应用初始化

onShow: 小程序启动获取后台进入前台

onHide: 小程序应用从前台进入

后台

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

onLoad 监听页面加载

onShow: 页面显示

onReady: 监听页面初始化渲染完成

onHide: 监听页面隐藏，注意当前页面实例依然存活

onUnload: 监听页面卸载

onPullDownRefresh: 监听用户下载动作

onReachBottom: 监听用户上拉触底操作

onShareAppMessage: 用户点击右上角分享功能

onPageScroll: 页面滚动

onTabItemTap：当前是 tab 页时，点击 tab 时触发

注意事项

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

mpvue中使用vue-router && axios

vue-router

在mpvue中对vue-router的支持不好,问题较多

进行页面跳转的是可使用小程序提供的API

(1)wx.navigateTo() 保留当前页面，可回退
(2)wx.redirectTo() 不保留，不能回退
(3)wx.switchTab() 使用于tabBar页面

axios

小程序中不支持使用axios，会报错： XMLHttpRequest is not a constructor

原因: 小程序的环境和浏览器的环境不一样

解决方法: 使用其他库: 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框架的成本较低

云服务器 GPU云服务器小程序原生开发微信小程序框架小程序后端php框架小程序后端开发框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109716.html

微信小程序 + 腾讯地图SDK 实现路线规划

摘要：业内开发框架层出不穷，，，等等，都在朝着更快，更强大的方向发展，有统一微信支付宝百度和头条小程序的大趋势。最近升级为版本，支持微信支付宝百度和头条小程序。原文链接最近小程序的发展越来越火了，作为各个产品线的extra服务入口，以轻便、快速、强大的社交链吸引着大量的用户和开发者。业内开发框架层出不穷，wepy，mpvue，taro等等，都在朝着更快，更强大的方向发展，有统一 H5、微...

keithyau 2019-08-30 15:43 评论0 收藏0
微信小程序 + 腾讯地图SDK 实现路线规划

摘要：业内开发框架层出不穷，，，等等，都在朝着更快，更强大的方向发展，有统一微信支付宝百度和头条小程序的大趋势。最近升级为版本，支持微信支付宝百度和头条小程序。原文链接最近小程序的发展越来越火了，作为各个产品线的extra服务入口，以轻便、快速、强大的社交链吸引着大量的用户和开发者。业内开发框架层出不穷，wepy，mpvue，taro等等，都在朝着更快，更强大的方向发展，有统一 H5、微...

BLUE 2019-08-23 16:30 评论0 收藏0
Antmove 缘起 - 好用的小程序多端解决方案

摘要：目前支持哪些平台的搬家目前对外开放版本释放了微信小程序转支付宝小程序的功能，这也是我们在调研中发现需求最多的。从笔者的了解来看，微信小程序框架原理更接近于，而支付宝小程序更接近于。原文地址： https://ant-move.github.io/we... 蚂蚁搬家工具（Antmove）是一个小程序开发辅助工具，致力于解决小程序跨平台开发的难题，借助于 Antmove，你只需要编写...

crelaber 2019-08-26 10:32 评论0 收藏0
也许你并不需要第三方小程序框架

摘要：所以在小程序出现之后，一股框架之风也很快的出现，微信小程序刚推出之后，就出现了两个比较出名的小程序开发框架，。原文地址：https://ant-move.github.io/we... 这里说的去除小程序框架其实并不严谨，因为小程序本身也算是一个框架，而且是一个功能更加完善的框架系统。在前端的概念中，我们一般说一个框架是指一个用来帮助开发者构建用户界面的框架，而小程序框架本身不仅仅包...

red_bricks 2019-08-26 10:43 评论0 收藏0