mpvue写一个CPASS小程序的示例

mpvue 是什么

1、一套定位于开发小程序的前端开发框架,核心目标是提高开发效率,增强开发体验;
2、框架提供了完整的Vue.js 开发体验,开发者编写Vue.js代码,mpvue将其解析转换为小程序并确保其正确运行;
3、框架还通过 vue-cli 工具向开发者提供 quick start 示例代码,开发者只需要执行一条简单命令,即可获得运行的项目;

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

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

使用Vue.js 开发小程序,带来如下开发效率提升

1、H5代码可以通过最小修改复用到小程序;
2、使用Vue.js 组件机制开发小程序,可实现小程序和H5组件复用;
3、技术栈统一后小程序学习成本降低,开发者从H5 转换到小程序不需要更多学习;
4、Vue.js 代码可以让所有前端直接参与开发维护

Vue.js 与 小程序 的联系

1、一致的工作原理:都是典型的逻辑视图层框架,逻辑层和视图层之间的工作方式为:数据变更驱动视图更新;视图交互触发事件,事件响应函数修改数据再次触发视图更新。

mpVue 实现原理

本文是对CPASS项目的技术要点和所踩的坑做一些总结。

项目

一个提供移动办公场地的小程序平台。

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

静态资源(除了tabbar图标)放在阿里云oss

组件(页面)间通信

四种方式:

  1. Vuex状态管理(mapActions,mapGetters)
  2. 本地缓存(setStorage,getStorage,removeStorage)
  3. Bus集中式的事件中间件($emit,$on,$off)
  4. 路由query传值

这里说一下比较少用的第三种通信方式。Bus应用于非父子组件通信,利用$emit,$on,$off分别来分发、监听、取消监听。

第一步:在mixins(混合)建一个文件event-bus.js

import Vue from 'vue';
export default new Vue();

第二步:在需要分发的组件中引入event-bus,再传递分发事件

import Bus from '@/mixins/event-bus'

// 需要传递给兄弟组件的值
let params = {
  ***
}
Bus.$emit('getParams', params)

第三步:在需要监听的组件中引入event-bus,在created周期去监听事件(小程序周期监听无效),在 beforeDestroy 周期取消监听事件

import Bus from '@/mixins/event-bus'
created () {
 // 监听事件
 Bus.$on('getParams', params => {
  // to do something

 })
},beforeDestroy () {
 // 清除监听
 Bus.$off('getParams');
}

swiper选项卡 +  无限加载

利用微信官方提供的swiper封装一个无限数据加载的swiperTab选项卡。

空态下:

技术难点:

swiper需要设置固定高度,触底 onReachBottom 无限加载又需要高度。所以需要在swiper标签设置动态高度 :style="{height: swiperHeight + 'px'}"onLoad 周期获取单个list-item的高度。假如所渲染数据有n组数据,则swiper高度为: swiperHeight = baseHeight * n + 加载提示占位高度

// swiper动态设置高度,list为需要渲染的数据
autoHeight(list) {
 let num = list.length;
 // this.loadHeight加载提示语的高度
 let listHeight = this.baseItemHeight * num + this.loadHeight
 this.swiperHeight = Math.max(this.windowHeight, listHeight);
},
// 获取静态高度
calcStaticHeight() {
 return new Promise((resolve) => {
  let self = this;
  let tabListHeight; // 获取tab高度
  // 获取除去tabList高度,全屏高度(空态状态时需要)
  wx.createSelectorQuery().select('#tab-list').fields({
   size: true
  }, function (res) {
   tabListHeight = res.height
   wx.getSystemInfo({
    success: function(resp) {
     self.windowHeight = resp.windowHeight - tabListHeight
    }
   })
  }).exec()
  // 获取单个item高度
  wx.createSelectorQuery().select('#base-item').fields({
   size: true
  }, function (res) {
   self.baseItemHeight = res.height
   resolve()
  }).exec()
 })
}

如果频繁切换swiper会导致卡死,是因为触摸滑动swiper和点击选项卡时赋值swiperIndex都会触发swiper bindchange 事件,这里做了判断处理。

// 滑动切换
swiperTab (e) {
 // 如果是触摸滑动切换
 if (e.mp.detail.source === 'touch') {
  if (this.currentTab === e.mp.detail.current) {
   return false;
  } else {
   this.currentTab = e.mp.detail.current
   this.isLoading = false
   this.allLoaded = false
   this.pageNum = 1
   this.loadTips = '上拉加载更多'
   this.getDataList(this.loadTips);
  }
 }
},
// 点击切换
clickTab (tab) {
 if (this.currentTab === tab) {
  return false;
 } else {
  this.currentTab = tab
  this.allLoaded = false
  this.pageNum = 1
  this.loadTips = '上拉加载更多'
  this.getDataList(this.loadTips);
 }
},

scroll-view封装indexList

实现两种定位方式:点击定位,按住右侧字母indexList滑动定位。

技术难点:按住右侧indexList滑动定位,获取字母indexList的上边距 offsetTop ,按住滑动时获取手指距离屏幕顶部的距离 clientY, 手指移动距离为 moveY=clientY-offsetTop, 具体实现如下:

// 索引定位(滑动开始) @touchstart="handlerStart"
handlerStart (e) {
 this.targetIndex = e.mp.target.id
},
// 索引定位(滑动过程) @touchmove="handlerMove"
handlerMove(e) {
 let keyList = this.keyList;
 // 手指滑动垂直距离
 let moveY = e.mp.touches[0].clientY;
 let rY = moveY - this.offsetTop;
 if (rY >= 0) {
  // apHeight为字母表indexList中单个字母块高度,计算结果向上取整
  let index = Math.ceil((rY - this.apHeight) / this.apHeight);
  if (index >= 0 && index < keyList.length) {
   this.targetIndex = keyList[index];
  }
 } else {
  this.targetIndex = keyList[0]
 }
},

view或者text设置border-radius=50%有时候在真机会变形(排除flex布局的影响)。

wxml不支持复杂逻辑,如模版字符串,字符串截取等等。

text设置行高的时候会出现样式异常,替换成view便可解决此问题。

wx.showLoading和wx.showToast的属性title不可为空,线上会报错,影响js执行。

总结

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

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

(0)

相关推荐

  • 详解mpvue开发小程序小总结

    最近用mpvue开发了一个小程序,现总结一下碰见的问题及解决方案 1.项目中数据请求用到了fly.io,封装成request.js如下: import wx from 'wx' import Fly from 'flyio' import store from '../store/index' const fly = new Fly() fly.config.baseURL = process.env.BASE_URL fly.config.timeout = 5000 //http 请求拦截器

  • 详解基于mpvue的小程序markdown适配解决方案

    美团点评近日开源了 mpvue ,这是一个使用 Vue.js 开发小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. mpvue 的核心目标是提高开发效率,增强开发体验.使用该框架,开发者只需初步了解小程序开发规范.熟悉 Vue.js 基本语法即可上手.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js

  • mpvue小程序仿qq左滑置顶删除组件

    背景: 前几天,公司的一个小程序项目开发的时候,遇到了一点点问题.设计师这狗币要让我在小程序上实现类似QQ左滑置顶删除的操作,心里mmp,我就是一个刚来公司三天的小小前端实习生而已,我想学习....当然刚刚来就被公司委以重任,也能看出本人技术过人,尤其是作为一个大二刚刚结束的学生来说.废话不多说,对于这个功能,第一反应就是百度,不百度不得了,一百度吓一跳.前辈们也来都做过."那我不是直接照搬就行,开心".开开心心的用mpvue上手之后,心里mmp,mpvue的坑这么多....还不如自己

  • 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题

    前言 最近博主正在用微信小程序开发一款网上商城系统.恰好赶上了美团开源的小程序开发框架mpvue.该框架继承了vue.js的特性,用起来还是蛮爽的.然后在开发中,数据仓库这块懵逼了, 引入的vuex的辅助函数mapState.mapGetters.mapMutations.mapActions等怎么就不能用呢.苦恼之际打开D盘,一番愉悦之后,终于想通啦- 问题分析 •vuex辅助函数 首先简单说一下vuex的辅助函数mapState.mapGetters.mapMutations.mapActi

  • 基于mpvue的小程序项目搭建的步骤

    前言 mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/ demo地址 :https://github.com/ccwyn/mpvuedemo/tree/mast

  • 使用Vue.js开发微信小程序开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

  • mpvue构建小程序的方法(步骤+地址)

    mpvue是一个使用Vue.js开发小程序的前端框架(美团的开源项目).框架基于Vue.js核心,mpvue修改了Vue.js的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验. mpvue你可以使用你熟悉的vue框架语法,双向绑定让你不用再使用wx的this.setData了,你可以使用npm方便的引入第三方了,真的是贫穷限制了我的想象力啊.个人感觉mpvue比wepy更加简单,上手更加方便,mpuve五分钟教程快速构建.

  • 浅谈使用mpvue开发小程序需要注意和了解的知识点

    一.实例生命周期 除了Vue本身的生命周期处,mpvue还兼容了小程序的生命周期,这部分生命周期的钩子来源于微信小程序的Page,除特殊情况外,不建议使用小程序的生命周期钩子. app 部分: onLaunch,初始化 onShow,当小程序启动,或从后台进入前台显示 onHide,当小程序从前台进入后台 page 部分: onLoad,监听页面加载 onShow,监听页面显示 onReady,监听页面初次渲染完成 onHide,监听页面隐藏 onUnload,监听页面卸载 onPullDown

  • 详解使用mpvue开发github小程序总结

    前言 最近有点闲,想起关注已久的mpvue写小程序,所以稍微肝了半个多月写了个github版的微信小程序,已上线.现在总结一下遇到的坑. 扫码体验. 项目地址:https://github.com/cheesekun/wx-github mina坑 scroll-view 高度 可滚动视图区域. 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height. 小程序提供的scroll-view组件,想让他能滚动,就要给他提供一个固定的高度. 我们一般需求是

  • mpvue写一个CPASS小程序的示例

    mpvue 是什么 1.一套定位于开发小程序的前端开发框架,核心目标是提高开发效率,增强开发体验: 2.框架提供了完整的Vue.js 开发体验,开发者编写Vue.js代码,mpvue将其解析转换为小程序并确保其正确运行: 3.框架还通过 vue-cli 工具向开发者提供 quick start 示例代码,开发者只需要执行一条简单命令,即可获得运行的项目: 小程序开发阶段面临的主要问题 1.组件化机制不够完善 2.代码多端复用能力欠缺 3.小程序框架和团队技术栈无法有机结合 4.小程序学习成本不够

  • 手把手教你写一个微信小程序(推荐)

    需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架 官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了) 1.跟着官方文档一步一步来,新建一个小程序项目就好 2.然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的 app.json 是当前小程序的全局配置 小程序的所有页面路径.界面表现.网络超时时间.底部 tab 需求一:底部tab,我们要像原生APP那样要有是三个常驻的按钮,

  • 使用mpvue搭建一个初始小程序及项目配置方法

     1. 初始化一个 mpvue 项目 现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm -v 5.6.0 # 2. 由于众所周知的原因,可以考虑切换源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ # 3. 全局安装 vue-cli # 一般是要 sud

  • js实现扫雷小程序的示例代码

    初学javascript,写了一个扫雷程序练练手! 扫雷规则及功能 扫雷想必大家都不陌生,就是windows上点击排雷的小游戏,它的主要规则有 1.左键点击显示当前格子是否为雷,如果为雷的话,GameOver啦,如果不是雷的话,这个格子会显示周围八个格子内的雷数量. 2.鼠标右键标记,标记可能的雷,标记了之后取消需要再次右键点击该格子,左键无效果. 3.鼠标中键(滚轮)按下后,快捷扫雷(如果周围雷数和未被标记且未被翻开的格子相等,会将这些格子一并翻开) 主要功能基本完全复刻了windows7扫雷

  • 用python写一个定时提醒程序的实现代码

    身体是革命的本钱,身体健康了我们才有更多精力做自己想做的事情,追求女神,追求梦想.然而程序员是一个苦比的职业,大部分时间都对着电脑,我现在颈椎就不好了,有时候眼睛还疼,我还没20阿,伤心...于是乎写了一个小程序,指定时间会打开浏览器播放一段音乐,提醒我们休息一会儿,防止我们猝死,说多了都是泪. 较基础,适合python新手及对python感兴趣的同学阅读. 我们来理一遍这个程序,大概功能是:我们设置一个时间,时间到了以后会打开浏览器播放一段音频. 1.等待 2.打开浏览器,播放音频. 3.重复

  • 用Python写一个自动木马程序

    电脑作为大家日常办公的工具,最怕的一件事情之一就是被偷,当我们的电脑被盗的时候,不仅仅是电脑本身,更重要的是电脑存储的资料都会丢失.如何尽快的找回电脑需要我们想点办法,今天就教大家一个好的技巧,虽说不能百分之百的好用,但是也能够发挥一定的效果. 小编本次是基于Linux下的展示,之所以基于Linux,是因为需要电脑在启动的时候,需要自动启动程序,做到出其不意,原因我会在最后给出. 程序是这样的,程序执行会首先调用笔记本的摄像头,拍摄笔记本面前的照片,然后,会给我们的预设邮箱,发送邮件,提醒我们电

  • 利用Java手写一个简易的lombok的示例代码

    目录 1.概述 2.lombok使用方法 3.lombok原理解析 4.手写简易lombok 1.概述 在面向对象编程中,必不可少的需要在代码中定义对象模型,而在基于Java的业务平台开发实践中尤其如此.相信大家在平时开发中也深有感触,本来是没有多少代码开发量的,但是因为定义的业务模型对象比较多,而需要重复写Getter/Setter.构造器方法.字符串输出的ToString方法.Equals/HashCode方法等.我们都知道Lombok能够替大家完成这些繁琐的操作,但是其背后的原理很少有人会

  • 基于Python制作天眼查小程序的示例代码

    目录 界面搭建 整体布局 界面美化 天眼查爬虫 获取信息 代码编写 结果展示 今天我们一起来制作一个天眼查GUI程序,开宗明义,我们先来看下最终的效果 这次的GUI程序,我们使用的框架是PyQt5,该框架拥有比tkinter更为丰富的内置组件,在界面美化方面,貌似也更胜一筹! 从上图也可以看出,我们的目标还是蛮远大的,最终我们希望可以完成一个工具集合,把我们日常当中常用的功能都集成的该GUI程序中,比如天眼查公司信息,知乎用户知识图谱,B视频弹幕抓取等等. 好了,今天我们先完成天眼查的功能吧~

  • C#模拟实现抽奖小程序的示例代码

    目录 1.抽奖主界面 2.操作步骤 2.1 抽奖界面 2.2 抽奖结果导出 3.源码 3.1 数据库连接 3.2 抽奖程序 1.抽奖主界面 2.操作步骤 S键开始: 0.1.2.3.4.5键分别对应6次奖项: 分别是 特等奖.一等奖.二等奖.三等奖.四等奖.五等奖 9键是加抽奖: 空格退出抽奖结果界面: P键关闭气泡效果. 2.1 抽奖界面 2.2 抽奖结果导出 *************特等奖奖获得者:(抽奖时间:2021/12/30 22:41:22)*************** 工号:1

随机推荐