mpvue写一个CPASS小程序的示例


Posted in Javascript onSeptember 04, 2018

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 实现原理

mpvue写一个CPASS小程序的示例

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

项目

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

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

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

mpvue写一个CPASS小程序的示例

组件(页面)间通信

四种方式:

  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选项卡。

mpvue写一个CPASS小程序的示例

空态下:

mpvue写一个CPASS小程序的示例

技术难点:

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滑动定位。

mpvue写一个CPASS小程序的示例

技术难点:按住右侧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执行。

总结

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

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

Javascript 相关文章推荐
javascript instanceof,typeof的区别
Mar 24 Javascript
Js四则运算函数代码
Jul 21 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
Vue表单及表单绑定方法
Sep 04 #Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 #Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 #Javascript
基于element-ui的rules中正则表达式
Sep 04 #Javascript
微信小程序的部署方法步骤
Sep 04 #Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 #Javascript
You might like
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
django文档学习之applications使用详解
2018/01/29 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
Python实现元素等待代码实例
2019/11/11 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
飞利浦法国官网:Philips法国
2019/07/10 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
酒店执行总经理岗位职责
2013/12/15 职场文书
我的长生果教学反思
2014/04/28 职场文书
三年级学生评语大全
2014/12/26 职场文书
投标邀请书范本
2015/02/02 职场文书
新闻通讯稿模板
2015/07/22 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL