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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 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学习之整理字符串
2011/04/17 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
加载 Javascript 最佳实践
2011/10/30 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
深入探究node之Transform
2017/07/20 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python下singleton模式的实现方法
2014/07/16 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
详解Python学习之安装pandas
2019/04/16 Python
学习python分支结构
2019/05/17 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
机关会计岗位职责
2014/04/08 职场文书
销售团队激励口号
2014/06/06 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
Python基础 括号()[]{}的详解
2021/11/07 Python
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB