weex开发的笔记

启动npm服务 npm run serve:lazy相当于本地发布服务，连接本地服务可实时查看weex页面的更新

向weex端注册方法和组件

/// 功能组件
[WXSDKEngine registerModule:@"MallModule" withClass:NSClassFromString(@"BHEMallWxEventModule")];
/// UI组件
[WXSDKEngine registerComponent:@"input" withClass:NSClassFromString(@"BHEWeexEditText")];

设置下载等自定义代理和注入JS函数

/// 实现自定义代理
[WXSDKEngine registerHandler:loader withProtocol:@protocol(WXImgLoaderProtocol)];
[WXSDKEngine registerHandler:loader withProtocol:@protocol(WXURLRewriteProtocol)];

/// 注入JS服务函数
/**
 * @abstract Registers a component for a given name, options and js code
 *
 * @param name The service name to register
 *
 * @param options The service options to register
 *
 * @param serviceScript service js code to invoke
 *
 */
+ (void)registerService:(NSString *)name withScript:(NSString *)serviceScript withOptions:(NSDictionary * _Nullable)options;

Module提供方法给到weex端使用

/// weex端调用时方法名为最前面部分addEventListener(xx,(ret)=>{code;})，其他按照参数个数依次补充即可，不需要补充方法名
WX_EXPORT_METHOD(@selector(addEventListener:callback:))

weex端写一个js功能模块

/// date_utils.js
const ONE_SECOND = 1000;
const ONE_MINUTE = 60 * ONE_SECOND;
const ONE_HOUR = 60 * ONE_MINUTE;
const ONE_DAY = 24 * ONE_HOUR;

export default {
  one_day: ONE_DAY,
  one_hour: ONE_HOUR,
  one_minute: ONE_MINUTE,
  one_second: ONE_SECOND,
  getSystemCurrTime() {//只到秒
    var timestamp = Date.parse(new Date());
    //var timestamp = (new Date()).valueOf();
    //var timestamp=new Date().getTime();
    return parseInt(timestamp / 1000);
  },
  getSystemCurrTime2() {//精度：毫秒
    var timestamp = Date.parse(new Date());
    //var timestamp = (new Date()).valueOf();
    //var timestamp=new Date().getTime();
    return parseInt(timestamp);
  },
  getCurrServerTime(serverTime) {
    if (!serverTime) {
      serverTime = 0;
    }
    return serverTime + this.getSystemCurrTime();
  },
  getTimeStrMDH(seconds) {
    var dateTime = new Date(seconds * 1000);
    var month = dateTime.getMonth() + 1;
    var day = dateTime.getDate();
    var hour = dateTime.getHours();
    return month + "月" + day + "日" + hour + "时";
  },
  calculateCutTime(timeInterval) {  //传进来的是毫秒的时间戳
    var day = parseInt(timeInterval / ONE_DAY);
    timeInterval %= ONE_DAY;
    var hour = parseInt(timeInterval / ONE_HOUR);
    timeInterval %= ONE_HOUR;
    var minute = parseInt(timeInterval / ONE_MINUTE);
    timeInterval %= ONE_MINUTE;
    var second = parseInt(timeInterval / ONE_SECOND);
    if (day <= 9) day = '0' + day;
    if (hour <= 9) hour = '0' + hour;
    if (minute <= 9) minute = '0' + minute;
    if (second <= 9) second = '0' + second;

    return [day, hour, minute, second];
  },
  getCountTime(time) {
    var countTime = '';
    var day = parseInt(time / ONE_DAY);
    time %= ONE_DAY;
    var hour = parseInt(time / ONE_HOUR);
    time %= ONE_HOUR;
    var minute = parseInt(time / ONE_MINUTE);
    time %= ONE_MINUTE;
    var second = parseInt(time / ONE_SECOND);
    if (day <= 9) day = '0' + day;
    if (hour <= 9) hour = '0' + hour;
    if (minute <= 9) minute = '0' + minute;
    if (second <= 9) second = '0' + second;
    countTime = day + '天' + hour + '时' + minute + '分' + second + '秒';
    return countTime;
  },
  getCountTime3(time) {
    var countTime = '';
    var day = parseInt(time / ONE_DAY);
    time %= ONE_DAY;
    var hour = parseInt(time / ONE_HOUR);
    time %= ONE_HOUR;
    var minute = parseInt(time / ONE_MINUTE);
    time %= ONE_MINUTE;
    var second = parseInt(time / ONE_SECOND);
    if (hour <= 9) hour = '0' + hour;
    if (minute <= 9) minute = '0' + minute;
    if (second <= 9) second = '0' + second;
    if (day > 0) {
      countTime = day + '天' + hour + '小时' + minute + '分';
    } else {
      countTime = hour + '小时' + minute + '分' + second + '秒';
    }
    return countTime;
  },
  getCountTime2(time) {
    var countTime = '';
    var day = parseInt(time / ONE_DAY);
    time %= ONE_DAY;
    var hour = parseInt(time / ONE_HOUR);
    time %= ONE_HOUR;
    var minute = parseInt(time / ONE_MINUTE);
    time %= ONE_MINUTE;
    var second = parseInt(time / ONE_SECOND);
    if (day > 0) {
      countTime += day + '天';
      countTime += hour + '小时';
      countTime += minute + '分';
      countTime += second + '秒';
    } else {
      if (hour > 0) {
        countTime += hour + '小时';
        countTime += minute + '分';
        countTime += second + '秒';
      } else {
        if (minute > 0) {
          countTime += minute + '分';
          countTime += second + '秒';
        } else {
          if (second > 0) {
            countTime += second + '秒';
          }
        }
      }
    }
    return countTime;
  },
  dateFormat(dateTime, fmt) {
    if (!dateTime) {
      return dateTime
    }
    if (typeof dateTime == 'string' && !isNaN(dateTime)) {
      dateTime = +dateTime
    }
    dateTime = new Date(dateTime);
    var o = {
      "M+": dateTime.getMonth() + 1, //月份
      "d+": dateTime.getDate(), //日
      "h+": dateTime.getHours(), //小时
      "m+": dateTime.getMinutes(), //分
      "s+": dateTime.getSeconds(), //秒
      "q+": Math.floor((dateTime.getMonth() + 3) / 3), //季度
      "S": dateTime.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (dateTime.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
  }
}

使用定义的js功能模块时（相当于创建对象实例）

import dateUtil from './utils/date_utils.js';

引用其他vue文件的UI组件

  import navigationBar from "./navigator.vue";
  import noNetworking from './no_networking.vue';
  import pro_tag from '../items/pro_tag.vue';

/// 通过模块名字实例化原生模块对象用作调用原生模块方法
  const dom = weex.requireModule('dom');
  const myModule = weex.requireModule('MallModule');
  const navigator = weex.requireModule('navigator');

  export default {
    components: { navigationBar, noNetworking, pro_tag },
 }

 weex调用原生方法

getUserInfo(callback) {
    var msg = {
      "operation": "getUserInfo"
    };
    // myModule.log('请求获取用户信息');
    bridgeModule.commandInterface(JSON.stringify(msg), function (e) {
      var json = JSON.parse(e);
      // myModule.log('用户信息:' + e);
      if (callback) {
        callback(json);
      }
    }, function (failed) {
      // myModule.log('获取登用户息失败:' + failed);
      if (callback) {
        callback({});
      }
    })
  },


WX_EXPORT_METHOD(@selector(commandInterface:finalCallBack:finalCallbackFail:))
-(void)commandInterface:(NSString *)param finalCallBack:(WXModuleKeepAliveCallback)callback finalCallbackFail:(WXModuleKeepAliveCallback)failCallback

 weex给控件赋值样式的几个方式

/// 样式应该为class加上style
/// 直接在标签内作为属性编写
<text v-else-if="item.nOriginalPrice>item.nSalePrice" style="font-family: PingFang-SC-Medium;font-size: 24px;color: #C7C7CC;text-align: left;text-decoration: line-through;">¥{{item.nOriginalPrice/100.0}}</text>

/// 通过函数获取
<div :style="appUtil.grayFloatStyle" v-if="appUtil.showGrayFloat()"></div>

/// 通过函数给属性赋值
<div class="singleTag" :style="{backgroundColor:getTagColor(item.oTagInfo.SingleTag.TagColor),borderBottomRightRadius:item.lProMemPrice && item.lProMemPrice>0?'0':'18px'}" v-if="item.oTagInfo&&item.oTagInfo.SingleTag&&item.oTagInfo.SingleTag.TagName">

/// 通过css定义
<div class="wrapper" @click="cancelAddressSelect">

<style scoped>
  .wrapper {
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .address_selector {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 750px;
    height: 640px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    overflow: hidden;
  }
</style>

/// 通过函数表达式获取值

给视图元素增加事件

/// @事件="函数(arvgs...)"
<image :src="local_image.icon_sending_cancel" class="cancelBtn" @click="closeDialog()"></image>
<input class="inputText" maxlength="30" @input="aliAccountInput" :value="aliaccount" @change="aliAccountInput"/>
<list v-if="hasLoadData" style="flex: 1;  750px; margin-top: -1px;" @loadmore="onloadMoreHandle" @scroll="onScroll">
<div class="slider-pages" v-for="(item, i) in bannerList" :key="I" @click="jumpToActivePage(item,'banner',i)" @appear="appear(item,i)">
<app_dialog v-if="isShowNewGiftReceiveFailDialog" tipMsgText="请重试" messageText="领取失败" confirmText="确定" v-on:confirmClick="confirmReceiveGiftPackageDialog"></app_dialog>
    <div v-if="isShowNewGiftReceiveSuccessDialog" style=" 750px; position: absolute; top: -88px; left: 0; bottom: 0; background-color: rgba(0,0,0,0); justify-content: center; align-items: center;">
      <div style=" 180px; height: 180px; justify-content: center; align-items: center;background-color: rgba(0,0,0,0.8); border-radius: 12px;">
        <image style=" 80px;height: 80px; margin-bottom: 20px;" :src="remote_image.receive_success"></image>
        <text style="font-size: 24px; color: #fff; text-align: center;">领取成功</text>
      </div>
    </div>

处理圆角等超出显示范围的时候显示效果配置的属性overflow   https://www.w3school.com.cn/css/pr_pos_overflow.asp

给元素绑定别名，用于后续获取

/// ref
<div v-if="showPromoteDialog" ref="refPromoteDialog" class="fullScreenDiv prompt_bg">
      <div style="align-items: flex-end">
        <image style=" 100px; height: 100px; opacity: 0"
               :src="remote_image.close_envelope_btn"
               @click="closePrompt"
               ref="closeImg"></image>
        <image style="margin-top: 10px;  520px; height: 780px"
               :src="promoteDialogData.img"
               @click="toPromotePage"
               @load="onPromoteImageLoad"></image>
      </div>
    </div>

const refPromoteDialog = this.$refs.refPromoteDialog;
const closeImg = this.$refs.closeImg;

自定义组件通过props来提供给外部调用设置属性值

<template>
    <div v-if="showDialog" @click="" style="750px;position:absolute;top:0;bottom:0;flex:1;">
        <div style="750px;position:absolute;top:-88px;bottom:0;background-color:#000000;opacity:0.75;flex:1;">
        </div>
        <div class="tip-bg" style="background-color: #051C4F;">
            <image style="534px; height: 586px;position:absolute;" :src="remote_image.dialog_fail_bg"></image>
            <image style="318px; height: 262px;margin-top:61px;" :src="remote_image.dialog_fail_headIcon"></image>
            <text class="tip-content">活动已下线，逛逛别的吧～</text>  
            <image style="221px; height: 72px;margin-top:46px;" :src="remote_image.dialog_fail_button" @click="onClickOver"></image>
        </div>
    </div>
</template>

<script>
import image from '../../../data/image_index.js';
import myImage from '../../../data/image_b_activity.js';

export default {
    data() {
        return {
            remote_image: myImage.remote
        };
    },
    props: {
        showDialog: {
            type: Boolean,
            default: false,
        }
    },
    methods: {
        onClickOver() {
            this.$emit('onClickOver');
        },
    }
}
</script>

<style scope>
.tip-bg{
    position:absolute;
    top:359px;
    width:534px;
    height:586px;
    margin-top:0px;
    margin-left:108px;
    align-items: center;
}

.tip-title{
    margin-top:2px;
    margin-left: 151px;
    font-family: PingFangSC-Regular;
    color:#000000;
    font-size:34px;
    font-weight: bold;
    line-height: 34px;
    letter-spacing: 0;
}

 .tip-content{
    font-family: FZLTHJW--GB1-0;
    font-size: 24px;
    color: #FFFFFF;
    letter-spacing: 1px;
    text-align: center;
    line-height: 32px;
    text-shadow: 0 2px 3px rgba(0,0,0,0.50);
    margin-top: 19px;
 }
</style>

自定义组件通过$emit给外界提供事件触发方法代理

export default {
    data() {
        return {
            remote_image: myImage.remote
        };
    },
    props: {
        strUid:{
            type: String,
            default: null,
        },
        showDialog: {
            type: Boolean,
            default: false,
        }
    },
    methods: {
        onClickModify() {
            this.$emit('onClickModify');
        },

        onClickSure() {
            this.$emit('onClickSure');
        }
    }
}

 看一下给组件增加事件的文件WXComponent+Events.m

#import "WXComponent+Events.h"
#import "WXComponent.h"
#import "WXComponent_internal.h"
#import "WXSDKInstance.h"
#import "WXComponentManager.h"
#import "WXAssert.h"
#import "WXUtility.h"
#import "WXSDKManager.h"
#import "WXSDKInstance_private.h"
#import "WXDefine.h"
#import "WXRecycleListComponent.h"
#import "WXRecycleListDataManager.h"
#import <objc/runtime.h>
#import <UIKit/UIGestureRecognizerSubclass.h>
#import "WXComponent+PseudoClassManagement.h"
#import "WXCoreBridge.h"

#pragma clang diagnostic ignored "-Wobjc-protocol-method-implementation"

@interface UITouch (WXTouchGestureRecognizer)
@property (nonatomic, strong) NSNumber *wx_identifier;
@property (nonatomic, strong) NSNumber *wx_stopPropagation;
@end

@implementation UITouch (WXTouchGestureRecognizer)
- (NSNumber *)wx_identifier
{
    return objc_getAssociatedObject(self, _cmd);
}

- (void)setWx_identifier:(NSNumber *)wx_identifier
{
    objc_setAssociatedObject(self, @selector(wx_identifier), wx_identifier, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (NSNumber *)wx_stopPropagation
{
    return objc_getAssociatedObject(self, _cmd);
}

- (void)setWx_stopPropagation:(NSNumber *)wx_stopPropagation
{
    objc_setAssociatedObject(self, @selector(wx_stopPropagation), wx_stopPropagation, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
@end

@interface UIGestureRecognizer (WXGesture)
@property (nonatomic, strong) NSNumber *wx_identifier;
@end

@implementation UIGestureRecognizer (WXGesture)
- (NSNumber *)wx_identifier
{
    NSNumber *identifier = objc_getAssociatedObject(self, _cmd);
    if (!identifier) {
        static NSUInteger _gestureIdentifier;
        identifier = @(_gestureIdentifier++);
        self.wx_identifier = identifier;
    }
    
    return identifier;
}

- (void)setWx_identifier:(NSNumber *)wx_identifier
{
    objc_setAssociatedObject(self, @selector(wx_identifier), wx_identifier, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
@end

@interface WXTouchGestureRecognizer : UIGestureRecognizer

@property (nonatomic, assign) BOOL listenTouchStart;
@property (nonatomic, assign) BOOL listenTouchMove;
@property (nonatomic, assign) BOOL listenTouchEnd;
@property (nonatomic, assign) BOOL listenTouchCancel;
@property (nonatomic, assign) BOOL listenPseudoTouch;

- (instancetype)initWithComponent:(WXComponent *)component NS_DESIGNATED_INITIALIZER;

@end

@interface WXEventManager :NSObject
+ (instancetype) sharedManager;
- (BOOL)stopPropagation:(NSString *)instanceId ref:(NSString *)ref type:(NSString *)type params:(NSDictionary *)params;
@end

@implementation WXEventManager

- (instancetype) init
{
    self = [super init];
    return self;
}

+ (instancetype)sharedManager
{
    static id _sharedInstance = nil;
    static dispatch_once_t oncePredicate;
    dispatch_once(&oncePredicate, ^{
        _sharedInstance = [[self alloc] init];
    });
    return _sharedInstance;
}

- (BOOL)stopPropagation:(NSString *)instanceId ref:(NSString *)ref type:(NSString *)type params:(NSDictionary *)params
{
    JSValue *value = [[WXSDKManager bridgeMgr] fireEventWithResult:instanceId ref:ref type:type params:params domChanges:nil];
    
    if ([value.toString isEqualToString:@"true"]) {
        return YES;
    }
    return NO;
}

@end

@implementation WXComponent (Events)

#pragma mark Public

- (void)fireEvent:(NSString *)eventName params:(NSDictionary *)params
{
    [self fireEvent:eventName params:params domChanges:nil];
}

- (void)fireEvent:(NSString *)eventName params:(NSDictionary *)params domChanges:(NSDictionary *)domChanges
{
    NSMutableDictionary *dict = [NSMutableDictionary dictionary];
    NSTimeInterval timeSp = [[NSDate date] timeIntervalSince1970] * 1000;
    [dict setObject:@(timeSp) forKey:@"timestamp"];
    if (params) {
        [dict addEntriesFromDictionary:params];
    }
    WXRecycleListComponent *recyleListComponent  = (WXRecycleListComponent*)[self getRecycleListComponent];
    if (recyleListComponent) {
        NSIndexPath *indexPath = [((UICollectionView*)recyleListComponent.view) indexPathForItemAtPoint:[self.view.superview
                                                                                                          convertPoint:self.view.center toView:recyleListComponent.view]];
        NSString *templateId = [self recursiveFindTemplateIdWithComponent:self];
        NSString *virtualComponentId = [recyleListComponent.dataManager virtualComponentIdWithIndexPath:indexPath templateId:templateId];
        if (virtualComponentId) {
            dict[@"componentId"] = virtualComponentId;
        }
    }
    
    NSArray *handlerArguments = [self _paramsForEvent:eventName];
    NSString *ref = _templateComponent ? _templateComponent.ref  : self.ref;
    [[WXSDKManager bridgeMgr] fireEvent:self.weexInstance.instanceId ref:ref type:eventName params:dict domChanges:domChanges handlerArguments:handlerArguments];
}

- (NSString *)recursiveFindTemplateIdWithComponent:(WXComponent *)component
{
    if (!component) {
        return nil;
    }
    if ([component isKindOfClass:NSClassFromString(@"WXCellSlotComponent")]) {
        return nil;
    }
    if (component.attributes[@"@templateId"]) {
        return component.attributes[@"@templateId"];
    }
    return [self recursiveFindTemplateIdWithComponent:component.supercomponent];
}

- (void)addEvent:(NSString *)addEventName
{
    WXAssertMainThread();
}

- (void)removeEvent:(NSString *)removeEventName
{
    WXAssertMainThread();
}

#pragma mark Add & Remove Event

#define WX_ADD_EVENT(eventName, addSelector) 
if ([addEventName isEqualToString:@#eventName]) {
    [self addSelector];
}

#define WX_ADD_EVENTS(eventName1,eventName2, addSelector) 
if ([addEventName isEqualToString:@#eventName1]||[addEventName isEqualToString:@#eventName2]) {
    [self addSelector:addEventName];
}

#define WX_REMOVE_EVENT(eventName, removeSelector) 
if ([removeEventName isEqualToString:@#eventName]) {
    [self removeSelector];
}

#define WX_REMOVE_EVENTS(eventName1,eventName2, removeSelector) 
if ([removeEventName isEqualToString:@#eventName1]||[removeEventName isEqualToString:@#eventName2]) {
    [self removeSelector];
}

- (void)_initEvents:(NSArray *)events
{
    for (NSString *addEventName in events) {
        [self _addEventOnMainThread:addEventName];
    }
}

- (void)_initPseudoEvents:(BOOL)isListenPseudoTouch
{
    if(isListenPseudoTouch) {
        self.touchGesture.listenPseudoTouch = YES;
    }
}

- (void)_addEventOnMainThread:(NSString *)addEventName
{
    if (![self isViewLoaded]) {
        //This action will be ignored While the view is loaded,
        //then it will initEvent according to the records in _events
        return;
    }
    WX_ADD_EVENT(appear, addAppearEvent)
    WX_ADD_EVENT(disappear, addDisappearEvent)
    
    WX_ADD_EVENT(click, addClickEvent)
    WX_ADD_EVENT(swipe, addSwipeEvent)
    WX_ADD_EVENT(longpress, addLongPressEvent)
    
    WX_ADD_EVENT(panstart, addPanStartEvent)
    WX_ADD_EVENT(panmove, addPanMoveEvent)
    WX_ADD_EVENT(panend, addPanEndEvent)
    
    WX_ADD_EVENT(horizontalpan, addHorizontalPanEvent)
    WX_ADD_EVENT(verticalpan, addVerticalPanEvent)
    
    WX_ADD_EVENT(touchstart, addTouchStartEvent)
    WX_ADD_EVENT(touchmove, addTouchMoveEvent)
    WX_ADD_EVENT(touchend, addTouchEndEvent)
    WX_ADD_EVENT(touchcancel, addTouchCancelEvent)
    WX_ADD_EVENT(accessibilityMagicTap, addAccessibilityMagicTapEvent)
    
    WX_ADD_EVENTS(stopPropagation, stoppropagation, addStopPropagationEvent)
    
    if(_isListenPseudoTouch) {
        self.touchGesture.listenPseudoTouch = YES;
    }
    
    [self addEvent:addEventName];
}

- (void)_removeEventOnMainThread:(NSString *)removeEventName
{
    WX_REMOVE_EVENT(appear, removeAppearEvent)
    WX_REMOVE_EVENT(disappear, removeDisappearEvent)
    
    WX_REMOVE_EVENT(click, removeClickEvent)
    WX_REMOVE_EVENT(swipe, removeSwipeEvent)
    WX_REMOVE_EVENT(longpress, removeLongPressEvent)
    
    WX_REMOVE_EVENT(panstart, removePanStartEvent)
    WX_REMOVE_EVENT(panmove, removePanMoveEvent)
    WX_REMOVE_EVENT(panend, removePanEndEvent)
    
    WX_REMOVE_EVENT(horizontalpan, removeHorizontalPanEvent)
    WX_REMOVE_EVENT(verticalpan, removeVerticalPanEvent)
    
    WX_REMOVE_EVENT(touchstart, removeTouchStartEvent)
    WX_REMOVE_EVENT(touchmove, removeTouchMoveEvent)
    WX_REMOVE_EVENT(touchend, removeTouchEndEvent)
    WX_REMOVE_EVENT(touchcancel, removeTouchCancelEvent)
    WX_REMOVE_EVENT(accessibilityMagicTap, removeAccessibilityMagicTapEvent)
    
    WX_REMOVE_EVENTS(stoppropagation,stopPropagation, removeStopPropagationEvent)

    if(_isListenPseudoTouch) {
        self.touchGesture.listenPseudoTouch = NO;
    }

    [self removeEvent:removeEventName];
}

- (void)_removeAllEvents
{
    [self removeClickEvent];
    [self removeLongPressEvent];
    [self removePanStartEvent];
    [self removePanMoveEvent];
    [self removePanEndEvent];
    [self removeHorizontalPanEvent];
    [self removeVerticalPanEvent];
    
    [self removeTouchStartEvent];
    [self removeTouchMoveEvent];
    [self removeTouchEndEvent];
    [self removeTouchCancelEvent];
    [self removeSwipeEvent];
    [self removePseudoTouchEvent];
}

- (void)_collectSubcomponents:(NSMutableArray *)components
{
    for (WXComponent* c in _subcomponents) {
        [components addObject:c];
        [c _collectSubcomponents:components];
    }
}

#pragma mark - Appear & Disappear

- (void)addAppearEvent
{
    _appearEvent = YES;
    [self.ancestorScroller addScrollToListener:self];
}

- (void)addDisappearEvent
{
    _disappearEvent = YES;
    [self.ancestorScroller addScrollToListener:self];
}

- (void)removeAppearEvent
{
    _appearEvent = NO;
    [self.ancestorScroller removeScrollToListener:self];
}

- (void)removeDisappearEvent
{
    _disappearEvent = NO;
    [self.ancestorScroller removeScrollToListener:self];
}

- (void)removePseudoTouchEvent
{
    _touchGesture.listenPseudoTouch = NO;
    [self checkRemoveTouchGesture];
}

#pragma mark - Accessibility Event

- (void)addAccessibilityMagicTapEvent
{
    _accessibilityMagicTapEvent = YES;
}

- (void)removeAccessibilityMagicTapEvent
{
    _accessibilityMagicTapEvent = NO;
}

#pragma mark - StopPropagation

- (void)addStopPropagationEvent:(NSString *)stopPropagationName
{
    _listenStopPropagation = YES;
    _stopPropagationName = stopPropagationName;
    self.touchGesture.listenTouchMove = YES;
}

- (void)removeStopPropagationEvent
{
    _listenStopPropagation = NO;
    self.touchGesture.listenTouchMove = NO;
}

#pragma mark - Click Event

- (void)addClickEvent
{
    if (!_tapGesture) {
        _tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onClick:)];
        _tapGesture.delegate = self;
        _tapGesture.cancelsTouchesInView = _cancelsTouchesInView;
        [self.view addGestureRecognizer:_tapGesture];
    }
}

- (void)removeClickEvent
{
    if (_tapGesture) {
        _tapGesture.delegate = nil;
        if ([self isViewLoaded]) {
            if ([self.view.gestureRecognizers containsObject:_tapGesture]) {
                [self.view removeGestureRecognizer:_tapGesture];
            }
        }
        @try {
            [_tapGesture removeTarget:self action:@selector(onClick:)];
        }@catch(NSException *exception) {
            WXLog(@"%@", exception);
        }
        _tapGesture = nil;
    }
}

- (void)onClick:(__unused UITapGestureRecognizer *)recognizer
{
    NSMutableDictionary *position = [[NSMutableDictionary alloc] initWithCapacity:4];
    CGFloat scaleFactor = self.weexInstance.pixelScaleFactor;
    if (![self isViewLoaded]) {
        return;
    }
    if (!CGRectEqualToRect(self.view.frame, CGRectZero)) {
        CGRect frame = [self.view.superview convertRect:self.view.frame toView:self.view.window];
        position[@"x"] = @(frame.origin.x/scaleFactor);
        position[@"y"] = @(frame.origin.y/scaleFactor);
        position[@"width"] = @(frame.size.width/scaleFactor);
        position[@"height"] = @(frame.size.height/scaleFactor);
    }
    [self fireEvent:@"click" params:@{@"position":position}];
}

#pragma mark - Swipe event

- (void)addSwipeEvent
{
    if (_swipeGestures) {
        return;
    }
    
    _swipeGestures = [NSMutableArray arrayWithCapacity:4];
    
    // It's a little weird because the UISwipeGestureRecognizer.direction property is an options-style bit mask, but each recognizer can only handle one direction
    SEL selector = @selector(onSwipe:);
    UISwipeGestureRecognizer *upSwipeRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self
                                                                                            action:selector];
    upSwipeRecognizer.direction = UISwipeGestureRecognizerDirectionUp;
    upSwipeRecognizer.delegate = self;
    [_swipeGestures addObject:upSwipeRecognizer];
    [self.view addGestureRecognizer:upSwipeRecognizer];
    
    UISwipeGestureRecognizer *downSwipeRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self
                                                                                              action:selector];
    downSwipeRecognizer.direction = UISwipeGestureRecognizerDirectionDown;
    downSwipeRecognizer.delegate = self;
    [_swipeGestures addObject:downSwipeRecognizer];
    [self.view addGestureRecognizer:downSwipeRecognizer];
    
    UISwipeGestureRecognizer *rightSwipeRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self
                                                                                               action:selector];
    rightSwipeRecognizer.direction = UISwipeGestureRecognizerDirectionRight;
    rightSwipeRecognizer.delegate = self;
    [_swipeGestures addObject:rightSwipeRecognizer];
    [self.view addGestureRecognizer:rightSwipeRecognizer];
    
    UISwipeGestureRecognizer *leftSwipeRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self
                                                                                              action:selector];
    leftSwipeRecognizer.direction = UISwipeGestureRecognizerDirectionLeft;
    leftSwipeRecognizer.delegate = self;
    [_swipeGestures addObject:leftSwipeRecognizer];
    [self.view addGestureRecognizer:leftSwipeRecognizer];
}

- (void)removeSwipeEvent
{
    if (_swipeGestures == nil) {
        return;
    }
  
    @try {
        for (UISwipeGestureRecognizer *recognizer in _swipeGestures) {
            recognizer.delegate = nil;
            if([self isViewLoaded]) {
                if ([[self.view gestureRecognizers] containsObject:recognizer]) {
                    [self.view removeGestureRecognizer:recognizer];
                }
            }
            [recognizer removeTarget:self action:@selector(onSwipe:)];
        }
    }@catch(NSException *exception) {
        WXLog(@"%@", exception);
    }
    _swipeGestures = nil;
}

- (void)onSwipe:(UISwipeGestureRecognizer *)gesture
{
    if (![self isViewLoaded]) {
        return;
    }
    
    UISwipeGestureRecognizerDirection direction = gesture.direction;
    
    NSString *directionString;
    switch(direction) {
        case UISwipeGestureRecognizerDirectionLeft:
            directionString = @"left";
            break;
        case UISwipeGestureRecognizerDirectionRight:
            directionString = @"right";
            break;
        case UISwipeGestureRecognizerDirectionUp:
            directionString = @"up";
            break;
        case UISwipeGestureRecognizerDirectionDown:
            directionString = @"down";
            break;
        default:
            directionString = @"unknown";
            break;
    }
    
    CGPoint screenLocation = [gesture locationInView:self.view.window];
    CGPoint pageLoacation = [gesture locationInView:self.weexInstance.rootView];
    NSDictionary *resultTouch = [self touchResultWithScreenLocation:screenLocation pageLocation:pageLoacation identifier:gesture.wx_identifier];
    [self fireEvent:@"swipe" params:@{@"direction":directionString, @"changedTouches":resultTouch ? @[resultTouch] : @[]}];
}

#pragma mark - Long Press

- (void)addLongPressEvent
{
    if (!_longPressGesture) {
        _longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(onLongPress:)];
        _longPressGesture.delegate = self;
        [self.view addGestureRecognizer:_longPressGesture];
    }
}

- (void)removeLongPressEvent
{
    if (_longPressGesture) {
        _longPressGesture.delegate = nil;
        if ([self isViewLoaded]) {
            if([[self.view gestureRecognizers] containsObject:_longPressGesture]) {
                [self.view removeGestureRecognizer:_longPressGesture];
            }
        }
        @try {
            [_longPressGesture removeTarget:self action:@selector(onLongPress:)];
        }@catch(NSException * exception) {
            WXLog(@"%@", exception);
        }
        _longPressGesture = nil;
    }
}

- (void)onLongPress:(UILongPressGestureRecognizer *)gesture
{
    if (![self isViewLoaded]) {
        return;
    }
    
    if (gesture.state == UIGestureRecognizerStateBegan) {
        CGPoint screenLocation = [gesture locationInView:self.view.window];
        CGPoint pageLoacation = [gesture locationInView:self.weexInstance.rootView];
        NSDictionary *resultTouch = [self touchResultWithScreenLocation:screenLocation pageLocation:pageLoacation identifier:gesture.wx_identifier];
        [self fireEvent:@"longpress" params:@{@"changedTouches":resultTouch ? @[resultTouch] : @[]}];
    } else if (gesture.state == UIGestureRecognizerStateEnded) {
        gesture.wx_identifier = nil;
    }
}

#pragma mark - Pan

- (void)addPanGesture
{
    if (!_panGesture) {
        _panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(onPan:)];
        _panGesture.delegate = self;
        [self.view addGestureRecognizer:_panGesture];
    }
}

- (void)addPanStartEvent
{
    _listenPanStart = YES;
    [self addPanGesture];
}

- (void)addPanMoveEvent
{
    _listenPanMove = YES;
    [self addPanGesture];
}

- (void)addPanEndEvent
{
    _listenPanEnd = YES;
    [self addPanGesture];
}

- (void)addHorizontalPanEvent
{
    _listenHorizontalPan = YES;
    [self addPanGesture];
}

- (void)addVerticalPanEvent
{
    _listenVerticalPan = YES;
    [self addPanGesture];
}


- (void)onPan:(UIPanGestureRecognizer *)gesture
{
    if (![self isViewLoaded]) {
        return;
    }
    
    CGPoint screenLocation = [gesture locationInView:self.view.window];
    CGPoint pageLoacation = [gesture locationInView:self.weexInstance.rootView];
    NSString *eventName;
    NSString *state = @"";
    NSDictionary *resultTouch = [self touchResultWithScreenLocation:screenLocation pageLocation:pageLoacation identifier:gesture.wx_identifier];
    
    if (gesture.state == UIGestureRecognizerStateBegan) {
        if (_listenPanStart) {
            eventName = @"panstart";
        }
        state = @"start";
    } else if (gesture.state == UIGestureRecognizerStateEnded) {
        if (_listenPanEnd) {
            eventName = @"panend";
        }
        state = @"end";
        gesture.wx_identifier = nil;
    } else if (gesture.state == UIGestureRecognizerStateChanged) {
        if (_listenPanMove) {
             eventName = @"panmove";
        }
        state = @"move";
    } else if (gesture.state == UIGestureRecognizerStateCancelled) {
        state = @"cancel";
    }
    
    CGPoint translation = [_panGesture translationInView:self.view];
    
    if (_listenHorizontalPan && (gesture.state != UIGestureRecognizerStateBegan || fabs(translation.y) <= fabs(translation.x))) {
        [self fireEvent:@"horizontalpan" params:@{@"state":state, @"changedTouches":resultTouch ? @[resultTouch] : @[]}];
    }
        
    if (_listenVerticalPan && (gesture.state != UIGestureRecognizerStateBegan || fabs(translation.y) >= fabs(translation.x))) {
        [self fireEvent:@"verticalpan" params:@{@"state":state, @"changedTouches":resultTouch ? @[resultTouch] : @[]}];
    }
        
    if (eventName) {
        [self fireEvent:eventName params:@{@"changedTouches":resultTouch ? @[resultTouch] : @[]}];
    }
}

- (void)removePanStartEvent
{
    _listenPanStart = NO;
    [self checkRemovePanGesture];
}

- (void)removePanMoveEvent
{
    _listenPanMove = NO;
    [self checkRemovePanGesture];
}

- (void)removePanEndEvent
{
    _listenPanEnd = NO;
    [self checkRemovePanGesture];
}

- (void)removeHorizontalPanEvent
{
    _listenHorizontalPan = NO;
    [self checkRemovePanGesture];
}

- (void)removeVerticalPanEvent
{
    _listenVerticalPan = NO;
    [self checkRemovePanGesture];
}

- (void)checkRemovePanGesture
{
    if (_panGesture
        && !_listenPanStart && !_listenPanMove && !_listenPanEnd
        && !_listenHorizontalPan && !_listenVerticalPan
        ) {
        
        if ([self isViewLoaded]) {
            if ([[self.view gestureRecognizers] containsObject:_panGesture]) {
                [self.view removeGestureRecognizer:_panGesture];
            }
        }
        
        _panGesture.delegate = nil;
        @try {
            [_panGesture removeTarget:self action:@selector(onPan:)];
        }@catch(NSException * exception) {
            WXLog(@"%@", exception);
        }
        _panGesture = nil;
    }
}

#pragma mark - Touch Event

- (WXTouchGestureRecognizer *)touchGesture
{
    if (!_touchGesture) {
        _touchGesture = [[WXTouchGestureRecognizer alloc] initWithComponent:self];
        _touchGesture.delegate = self;
        [self.view addGestureRecognizer:_touchGesture];
    }
    return _touchGesture;
}

- (void)addTouchStartEvent
{
    self.touchGesture.listenTouchStart = YES;
}

- (void)addTouchMoveEvent
{
    self.touchGesture.listenTouchMove = YES;
}

- (void)addTouchEndEvent
{
    self.touchGesture.listenTouchEnd = YES;
}

- (void)addTouchCancelEvent
{
    self.touchGesture.listenTouchCancel = YES;
}

- (void)removeTouchStartEvent
{
    _touchGesture.listenTouchStart = NO;
    [self checkRemoveTouchGesture];
}

- (void)removeTouchMoveEvent
{
    _touchGesture.listenTouchMove = NO;
    [self checkRemoveTouchGesture];
}

- (void)removeTouchEndEvent
{
    _touchGesture.listenTouchEnd = NO;
    [self checkRemoveTouchGesture];
}

- (void)removeTouchCancelEvent
{
    _touchGesture.listenTouchCancel = NO;
    [self checkRemoveTouchGesture];
}

- (void)checkRemoveTouchGesture
{
    if (_touchGesture && !_touchGesture.listenTouchStart && !_touchGesture.listenTouchMove && !_touchGesture.listenTouchEnd && !_touchGesture.listenTouchCancel && !_touchGesture.listenPseudoTouch) {
        _touchGesture.delegate = nil;
        if ([self isViewLoaded]) {
            if ([[self.view gestureRecognizers] containsObject:_touchGesture]) {
                [self.view removeGestureRecognizer:_touchGesture];
            }
        }
        _touchGesture = nil;
    }
}

- (BOOL)gestureShouldStopPropagation:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
    if(touch.wx_stopPropagation && [touch.wx_stopPropagation isEqualToNumber:@1]){
        return NO;
    }
    else
    {
        if (_listenStopPropagation)
        {
            NSString *ref = _templateComponent ? _templateComponent.ref : self.ref;
            CGPoint screenLocation = [touch locationInView:touch.window];
            CGPoint pageLocation = [touch locationInView:self.weexInstance.rootView];
            NSDictionary *resultTouch = [self touchResultWithScreenLocation:screenLocation pageLocation:pageLocation identifier:touch.wx_identifier];
            NSString *touchState;
            if (touch.phase == UITouchPhaseBegan) {
                touchState = @"start";
            }
            else if (touch.phase == UITouchPhaseMoved){
                touchState = @"move";
            }
            else{
                touchState = @"end";
            }
            BOOL stopPropagation = [[WXEventManager sharedManager]stopPropagation:self.weexInstance.instanceId ref:ref type:_stopPropagationName params:@{@"changedTouches":resultTouch ? @[resultTouch] : @[],@"action":touchState}];
            touch.wx_stopPropagation = stopPropagation ? @1 : @0;
            
            //only custom event on custom component will make not receive touch
            //you can use custom-event="yes" to enable this feature
            return _customEvent ? !stopPropagation : YES;
        }
    }
    return YES;
}

#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
    return [self gestureShouldStopPropagation:gestureRecognizer shouldReceiveTouch:touch];
}

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
    if (gestureRecognizer == _panGesture) {
        CGPoint translation = [_panGesture translationInView:self.view];
        if (_listenHorizontalPan && !_listenVerticalPan && fabs(translation.y) > fabs(translation.x)) {
            return NO;
        }
    }
    return YES;
}

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    NSString * panGestureRecog = [NSString stringWithFormat:@"%@%@%@%@%@%@",@"UIScrollV", @"iewPanG", @"estur",@"eRecog",@"nize",@"r"];
    NSString * textTap = [NSString stringWithFormat:@"%@%@%@%@%@",@"UITe",@"xtTa",@"pReco",@"gniz",@"er"];
    // trigger touches
    if ([gestureRecognizer isKindOfClass:[WXTouchGestureRecognizer class]]) {
        return YES;
    }
    // swipe and scroll
    if ([gestureRecognizer isKindOfClass:[UISwipeGestureRecognizer class]] && [otherGestureRecognizer isKindOfClass:NSClassFromString(panGestureRecog)]) {
        return YES;
    }
    // onclick and textviewInput
    if ([gestureRecognizer isKindOfClass:[UITapGestureRecognizer class]] && [otherGestureRecognizer isKindOfClass: NSClassFromString(textTap)]) {
        return YES;
    }
    
    return NO;
}

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRequireFailureOfGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    if ([gestureRecognizer isKindOfClass:[UITapGestureRecognizer class]] &&
        [otherGestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]]) {
        if (otherGestureRecognizer.state != UIGestureRecognizerStateFailed) {
            if ([gestureRecognizer view].wx_component != nil && [otherGestureRecognizer view].wx_component != nil) {
                return YES;
            }
        }
    }
    
    return NO;
}

#pragma mark - Utils

- (NSDictionary *)touchResultWithScreenLocation:(CGPoint)screenLocation pageLocation:(CGPoint)pageLocation identifier:(NSNumber *)identifier
{
    NSMutableDictionary *resultTouch = [[NSMutableDictionary alloc] initWithCapacity:5];
    CGFloat scaleFactor = self.weexInstance.pixelScaleFactor;
    resultTouch[@"screenX"] = @(screenLocation.x/scaleFactor);
    resultTouch[@"screenY"] = @(screenLocation.y/scaleFactor);
    resultTouch[@"pageX"] = @(pageLocation.x/scaleFactor);
    resultTouch[@"pageY"] = @(pageLocation.y/scaleFactor);
    resultTouch[@"identifier"] = identifier;
    
    return resultTouch;
}

// find virtual component's root component
- (WXComponent*)getRecycleListComponent
{
    if ([self isKindOfClass:[WXRecycleListComponent class]]) {
        return self;
    }
    if ([self.ref isEqualToString:WX_SDK_ROOT_REF]) {
        return nil;
    }
    return [self.supercomponent getRecycleListComponent];
}

@end

@implementation WXTouchGestureRecognizer
{
    __weak WXComponent *_component;
    NSUInteger _touchIdentifier;
}

- (instancetype)initWithTarget:(id)target action:(SEL)action
{
    return [self initWithComponent:nil];
}

- (instancetype)initWithComponent:(WXComponent *)component
{
    if (self = [super initWithTarget:self action:@selector(touchResponse:)]) {
        _component = component;
        
        _listenTouchStart = NO;
        _listenTouchEnd = NO;
        _listenTouchMove = NO;
        _listenTouchCancel = NO;
        
        self.cancelsTouchesInView = NO;
    }
    
    return self;
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [super touchesBegan:touches withEvent:event];
    
    if (_listenTouchStart) {
        [self fireTouchEvent:@"touchstart" withTouches:touches];
    }
    if(_listenPseudoTouch) {
        NSMutableDictionary *styles = [_component getPseudoClassStyles:@"active"];
        [_component updatePseudoClassStyles:styles];
    }

}

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [super touchesMoved:touches withEvent:event];
    
    if (_listenTouchMove) {
        [self fireTouchEvent:@"touchmove" withTouches:touches];
    }
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    
    [super touchesEnded:touches withEvent:event];
    
    if (_listenTouchEnd) {
        [self fireTouchEvent:@"touchend" withTouches:touches];
    }
    if(_listenPseudoTouch) {
        [self recoveryPseudoStyles:_component.styles];
    }

}

- (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [super touchesCancelled:touches withEvent:event];
    
    if (_listenTouchCancel) {
        [self fireTouchEvent:@"touchcancel" withTouches:touches];
    }
    if(_listenPseudoTouch) {
        [self recoveryPseudoStyles:_component.styles];
    }
}

- (void)fireTouchEvent:(NSString *)eventName withTouches:(NSSet<UITouch *> *)touches
{
    if (_component == nil) {
        return;
    }
    
    NSMutableArray *resultTouches = [NSMutableArray new];
    
    CGPoint accmOffset = CGPointZero;
    UIView* rootView = _component.weexInstance.rootView;
//    UIView* view = self.view;
//    while (view && view != rootView) {
//        if ([view isKindOfClass:[UIScrollView class]]) {
//            CGPoint offset = ((UIScrollView*)view).contentOffset;
//            accmOffset.x += offset.x;
//            accmOffset.y += offset.y;
//        }
//        view = view.superview;
//    }
    
    for (UITouch *touch in touches) {
        CGPoint screenLocation = [touch locationInView:touch.window];
        CGPoint pageLocation = [touch locationInView:rootView];
        pageLocation.x += accmOffset.x;
        pageLocation.y += accmOffset.y;
      
        if (!touch.wx_identifier) {
            touch.wx_identifier = @(_touchIdentifier++);
        }
        NSDictionary *resultTouch = [_component touchResultWithScreenLocation:screenLocation pageLocation:pageLocation identifier:touch.wx_identifier];
        NSMutableDictionary * mutableResultTouch = [resultTouch mutableCopy];
        
        float value = touch.force*60;
        float maxValue = touch.maximumPossibleForce*60;
        if (touch.maximumPossibleForce) {
            // the forece value will be range 1 from 0.
            [mutableResultTouch setObject:[NSNumber numberWithFloat:value/maxValue] forKey:@"force"];
        }else {
            [mutableResultTouch setObject:[NSNumber numberWithFloat:0.0] forKey:@"force"];
        }
        
        if (mutableResultTouch) { // component is nil, mutableResultTouch will be nil
            [resultTouches addObject:mutableResultTouch];
        }
    }
    
    [_component fireEvent:eventName params:@{@"changedTouches":resultTouches ?: @[]}];
}

- (void)recoveryPseudoStyles:(NSDictionary *)styles
{
    [_component recoveryPseudoStyles:styles];
}

- (void)touchResponse:(UIGestureRecognizer *)gesture
{
    
}

@end

 weex中Vue设置空间样式，使用style=""、:style="{}"、class="" 三者是有一些区别的 使用中发现在一个负责一些的页面上 flex设置显示了三种不同的效果，其中class=""是期望的效果