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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
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
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
Python标准库笔记struct模块的使用
2018/02/22 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
python如何快速拼接字符串
2020/10/28 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
党员教师个人对照检查材料范文
2014/09/25 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
行政介绍信范文
2015/05/04 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
《确定位置》教学反思
2016/02/18 职场文书