什么是mpvue

1.用于开发小程序的前端开发框架，核心目标是提高开发效率和增强开发体验；2.框架提供了完整的Vue.js开发体验，开发人员编写Vue.js代码，mpvue将其转换成小程序并保证其正确运行；3.该框架还通过vue-cli工具为开发者提供了快速启动的样例代码，开发者只需要执行一个简单的命令就可以得到正在运行的项目；

小程序开发阶段的主要问题

1.组件化机制不完善。2.缺乏代码多端复用能力。3.小程序框架和团队技术栈不能有机结合。4.小程序学习成本不够低

使用Vue.js开发小程序带来了以下开发效率的提高

1.H5代码可以用最少的修改重用到小程序中。2.利用Vue.js组件机制开发小程序，可以实现小程序和H5组件的复用。3.技术栈统一后，小程序的学习成本降低，开发者不需要多向H5学习小程序；4.Vue.js代码可以让所有前端直接参与开发和维护

Vue.js和applet的关系

1.一致的工作原理：都是典型的逻辑视图层框架。逻辑层和视图层之间的工作模式是：数据变化驱动视图更新；视图交互触发事件，事件响应函数修改数据再次触发视图更新。

mpVue的实现原理

总结了CPASS项目的技术要点和难点。

项目

一个提供移动办公空间的小程序平台。

使用美团mpvue框架，mpvue: 1.0.13，mpvue-loader: 1.0.15。

静态资源(除了tabbar图标)被放置在阿里巴巴云操作系统中

组件之间的通信(页面)

四种方式：

Vuex状态管理(mapActions，mapGetters)，本地缓存(setStorage，getStorage，removeStorage)总线，集中式事件中间件($emit，$on，$off)，路由，查询和值传输。在这里，我们来谈谈很少使用的第三种沟通方式。总线应用于非父子组件通信，使用$emit、$on、$off分别分配、监控和取消监控。

步骤1:在mixins中创建一个文件事件

从“Vue”导入Vue；导出默认新Vue()；步骤2:将事件总线引入到要分发的组件中，然后传递分发事件

从“@/mixins/event-bus”/导入总线需要传递给同级组件的值让params={* * *}总线。$ emit ('get params '，params)步骤3:在需要监控的组件中引入事件总线，在创建的周期中监控事件(applet周期中的监控无效)，在beforeDestroy周期中取消监控事件

从创建的“@/mixins/event-bus”导入总线(){//monitor事件总线。$ on ('getparams '，params={//做某事})}，在destroy () {//clear monitor Bus之前。$ off(' GetParams ')；}swiper选项卡无限期加载

封装一个swiperTab标签，使用微信提供的官方swiper进行无限数据加载。

在空状态下：

技术困难：

Swiper需要设置一个固定的高度，见底就需要一个高度。因此，有必要在swiper选项卡上设置动态高度： style=' { height : swing height ' px ' } '。OnLoad cycle获取单个列表项的高度。如果渲染数据中有n组数据，swiper的高度为：swingheight=baseheight * nLoad提示占用高度。

//swiper动态设置高度，列表为需要渲染的数据自动高度(列表){ let num=list。长度；//this.loadHeight加载提示语的高度让列表高度=这个。baseitemheight * num this。装载这个高度。swiper高度=数学。麦克斯(这个。窗口高度、列表高度)；},//获取静态高度calcstatecheight(){ 0返回新的承诺((决心)={让自我=这个；让小报八；//获取标签高度//获取除去列表高度，全屏高度（空态状态时需要)wx.createSelectorQuery().选择(' #tab-list ').字段({ size: true }，函数(RES){ tablishthree=RES . height wx。getsystem info({ success : function(resp){ self。窗户高度=resp。窗口高度-tablishthree } })}).exec() //获取单个项目高度wx.createSelectorQuery().选择(' #基本项目')。字段({ size: true }，函数{自我。baseitemheight=RES . height resolve()}).exec() })}如果频繁切换捣蛋鬼会导致卡死，是因为触摸滑动捣蛋鬼和点击选项卡时赋值swiperIndex都会触发swiper bindchange事件，这里做了判断处理。

//滑动切换swiperTab (e) { //如果是触摸滑动切换如果(例如MP。细节。source==' touch '){ if(this。当前标签===e . MP。细节。当前){ return false} else { this。当前标签=e . MP。细节。当前这个。isloading=false this。all loaded=false this。页码=1。loadtips='上拉加载更多这个。getdatalist(这。装载提示)；} }},//点击切换单击TAb(TAb){ if(this。current TAb===TAb){ return false；} else { this。当前选项卡=此选项卡。all loaded=false this。页码=1。LoadTips='上拉加载更多这个。getdatalist(这。装载提示)；}},滚动视图封装索引列表

实现两种定位方式：点击定位，按住右侧字母索引列表滑动定位。

技术难点：按住右侧索引列表滑动定位，获取字母索引列表的上边距偏移，按住滑动时获取手指距离屏幕顶部的距离客户，手指移动距离为moveY=clientY-offsetTop，具体实现如下：

//索引定位（滑动开始)@ touch start=' handlerStart ' handlerStart(e){ this。targetindex=e . MP。目标。id }，//索引定位（滑动过程)@ touch move=' handler move ' handler move(e){ let KeyList=this。KeyList//手指滑动垂直距离让moveY=e . MP。触摸[0].客户让rY=moveY-这个。偏移顶部；if(Ry=0){//aphFair为字母表索引列表中单个字母块高度，计算结果向上取整让索引=数学。ceil((Ry-这个。aphFORt)/这个。aph fort)；if(index=0 index KeyList。长度){这个。target index=KeyList[index]；} } else { this。TargetIndex=KeyList[0]} }，坑

视角或者文本设置边界半径=50%有时候在真机会变形（排除弯曲布局的影响)。

页面结构不支持复杂逻辑，如模版字符串，字符串截取等等。

文本设置行高的时候会出现样式异常，替换成视角便可解决此问题。

wx.showLoading和wx.showToast的属性标题不可为空，线上会报错，影响射流研究…执行。

总结

本文只是简单讲一下项目中涉及到的几处技术要点，欢迎交流。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。