微信小程序 - mixins
mixins 概念 可百度 参考 http://ask.seowhy.com/article/21007
大意和Python中的多重继承, java中的接口类似(java接口只是定义,实现需要子类自己写).
而JS中没有接口的概念, 利用对象的key遍历,并合并到子类(或者叫对象)中.
伪代码:
var mixin = { //混入对象包含一个方法 demoFunction(){ } } ; var PageOption = { //需要继承mixin的对象 }; //内部处理mixin的逻辑 processMixins(PageOption , mixin); //最终得到的 PageOption PageOption = { demoFunction(){ } };
mixins 可以有多个,遭遇名称冲突时的规则 见下图: vue的component可以简单理解为 微信小程序的PageOption
我们的框架中,mixins的处理,集中在 utils/BasePageOptionClass 中.并且暂时内置了2个 顶层mixin对象
//全局mixins 基础库
var basePage = require("../mixins/BasePage.js");
//全局 mixins 扩展库,预留
var basePageExt = require("../mixins/BasePageExt.js");
处理方法:
/** * 处理mixins */ function _processMixins__(actualOption){ var app = getApp(); var pageOption = actualOption.PageOption; var mixins = pageOption.mixins||[]; mixins.unshift(basePage, basePageExt); var data={}; var methods = {}; var lifecycleMethods = { "onLoad": [], "onReady": [], "onShow": [], "onHide": [], "onUnload": [], "onPullDownRefresh": [], "onReachBottom": [], "onShareAppMessage": [], "onPageScroll": [] }; for (var i=0;i< mixins.length;i++){ var mixin = mixins[i]; var d = mixin.data; if(d){ app.util.extend(data,d); } var keys=Object.keys(mixin); for(key of keys){ if(key=="data")continue; if (lifecycleMethods[key] ){ //生命周期函数 if (typeof mixin[key] =="function"){ //是函数 lifecycleMethods[key].push(mixin[key]); //先加入的mixin生命周期函数先执行 } else {//不是函数, 不在规范内, 作为属性,如果Page定义,舍弃,没有则并入 if (!actualOption[key]){ //防止mixin破坏页面定义 actualOption[key]=mixin[key]; } } }else{ //普通函数 actualOption[key] = mixin[key]; } } } //合并到Page定义的data actualOption.PageOption.data = app.util.extend(data, actualOption.PageOption.data); actualOption.PageOption.__lifecycleMethods = lifecycleMethods; }
这样大致实现了 vue定义的冲突解决方案.
执行方法代码逻辑
// mixins 生命周期函数 执行方案,总是先执行 var __lifecycleMethods = actualOption.PageOption.__lifecycleMethods || {}; var __lifecycleMethod = __lifecycleMethods[key]; var mixinsRunsReturn = false; if (__lifecycleMethod && __lifecycleMethod.length>0){ for (let ii = 0; ii < __lifecycleMethod.length;ii++){ try{ var ret = __lifecycleMethod[ii].apply($target, arguments); if(ret===false){ //这里预留增加了 mixin方法的返回值,如果是false,那么逻辑终止 mixinsRunsReturn = true; break; } }catch(err){ console.log("执行mixin函数报错",err); throw err; } } } if (mixinsRunsReturn){ console.log("mixin函数返回false,执行被终止"); return; }
经过改造,原先一些定义在BasePageOptionClass中的一些方法,转移到了 /mixins/BasePage.js 中.详见代码.
拓展思考:
哪些逻辑方法适合写入mixin
目前实现的:
左划删除
顶部可滑动菜单
实现思路其实和 微信的template,component类似
因为mixin的特性,所有引入mixin类,就引入了支持 这些操作或者效果的代码.
wxml 直接在页面中书写, css 引入, 这个步骤 和组件的步骤是一致的.
优点是灵活.编码规则上,多增加点前缀,避免名称冲突
在良好的文档支持下,内部开发应该不成问题
/** * 左划需要的事件 * wxss中 增加 @import "/style/modules/left_touch.wxss"; * * 用法 Page页面增加 * let left_touch = require("../../../mixins/left_touch.js"); * PageOption 增加 mixins:[left_touch] * * wxml 示例 <view class='left_touch_block'> <view class="items"> <view wx:for="{{list}}" wx:key="{{index}}" class="touch_block_item"> <view data-data_path="list[{{index}}]._txtStyle" bindtouchstart="_touchS" bindtouchmove="_touchM" bindtouchend="_touchE" data-index="{{index}}" style="{{item._txtStyle}}" class="inner touch_block_content"> <view>{{index}}</view> <view>{{item.txt}}</view> </view> <view data-index="{{index}}" bindtap = "_btn_touched" class="inner touch_block_btn">删除</view> </view> </view> </view> 其中 data-data_path 标志 数据的层级,用户 设置单项的_txtStyle 属性,此属性为插件内部使用,外部数据不需要初始化这个属性 _btn_touched 方法需要自己写,见下方代码示例部分,根据具体逻辑编写 本插件更多的是为了基本的排版和通用事件的编写 * */ var obj = { data:{ _delBtnWidth: 180 //删除按钮宽度单位（rpx） }, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 this._initEleWidth(); }, /** * 触摸开始事件,记录 开始坐标 */ _touchS: function (e) { if (e.touches.length == 1) { this.setData({ //设置触摸起始点水平方向位置 _startX: e.touches[0].clientX }); } }, /** * 触摸移动中事件 * 构建简单动画, 即 删除按钮 动态展现 */ _touchM: function (e) { var that = this if (e.touches.length == 1) { //手指移动时水平方向位置 var moveX = e.touches[0].clientX; //手指起始点位置与移动期间的差值 var disX = this.data._startX - moveX; var _delBtnWidth = this.data._delBtnWidth; var txtStyle = ""; if (disX == 0 || disX < 0) {//如果移动距离小于等于0，文本层位置不变 txtStyle = "left:0px"; } else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离 txtStyle = "left:-" + disX + "px"; if (disX >= _delBtnWidth) { //控制手指移动距离最大值为删除按钮的宽度 txtStyle = "left:-" + _delBtnWidth + "px"; } } //获取手指触摸的是哪一项 var dataset = e.currentTarget.dataset; var index = dataset.index; var data_path = dataset.data_path var updateObject = {}; updateObject[data_path] = txtStyle; this.setData(updateObject); } }, /** * 触摸结束事件 * 结合触摸开始时的坐标,算出移动的距离 * 如果距离超出删除按钮的一半,那么 算是移动成功,展示全部删除按钮,否则 删除按钮隐藏 * 注意 更新数据方式,并不是网上示例的全部数据更新 */ _touchE: function (e) { var self= this; if (e.changedTouches.length == 1) { //手指移动结束后水平位置 var endX = e.changedTouches[0].clientX; //触摸开始与结束，手指移动的距离 var disX = this.data._startX - endX; var _delBtnWidth = this.data._delBtnWidth; var index = e.currentTarget.dataset.index; var data_path = e.currentTarget.dataset.data_path; var updateObject = {}; //如果距离小于删除按钮的1/2，不显示删除按钮 var txtStyle = "left:0px"; if( disX > _delBtnWidth / 2 ){ txtStyle = "left:-" + _delBtnWidth + "px" if (self._lastMovedElePath) { updateObject[self._lastMovedElePath] = "left:0px"; } self._lastMovedElePath = data_path } else{ } //获取手指触摸的是哪一项 updateObject[data_path] = txtStyle; //更新列表的状态 this.setData(updateObject); } }, //获取元素自适应后的实际宽度 _getEleWidth: function (w) { var real = 0; try { var res = wx.getSystemInfoSync().windowWidth; var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应 // console.log(scale); real = Math.floor(res / scale); return real; } catch (e) { return false; // Do something when catch error } }, _initEleWidth: function () { var _delBtnWidth = this._getEleWidth(this.data._delBtnWidth); this.setData({ _delBtnWidth: _delBtnWidth }); }, /** * 点击删除按钮事件 * 这是个示例方法,请在具体的页面Page中重写此方法逻辑 */ _btn_touched: function (e) { var that = this wx.showModal({ title: '提示', content: '是否删除？', success: function (res) { if (res.confirm) { //获取列表中要删除项的下标 var index = e.target.dataset.index; // var list = that.data.list; // //移除列表中下标为index的项 // list.splice(index, 1); // //更新列表的状态 // that.setData({ // list: list // }); } else { //做页面重新渲染,或什么都不做 } } }) } }; module.exports= obj;
