weex填坑注意事项

[Somnusochi]

记录项目从vue2.0拓展到weex

• 不支持p标签，p居然不能设置font-size，文字显示一律改用text标签：<text></text>
• padding border margin等属性不支持简写，请使用padding-top padding-right padding-bottom padding-left;
• :class不能使用对象语法应该使用数组语法，数组写法:class="[type === 'index' ? 'active' : '']"✔️；对象写法:class="{active: type === 'index'}"❌，且数组写法一次只能判断添加一个类，:class="[type === 'index' ? 'active disabled' : '']"❌
• 图片一定需要写宽高且不能使用img简写只能用image标签
• 务必使用weex提供的所支持的标签，譬如div text（html5标签语义化一夜回到解放前，毕竟不用SEO），在weex提供的內建组件中，譬如scroller 之类的，使用weex不支持的标签在native端可能会导致dom元素直接消失
• vue语法的weex-components
• stream请求封装
• DOM元素只支持单个类设置样式

<div class="warpper">
  <text class="warpper_context>text</text>
</div>

.warpper .warpper_context ❌
  color:#fff; //native端无效

.warpper_context ✔️
  color:#fff; // native端有效

• 默认为flex布局，务必设置flex-direction属性
• 不支持display: none，即不支持v-show，需要替换成v-if
• 对于多个inline-block元素的布局无法有效实现
• 对于css不支持.active.active增加css选择器权重的写法
• iOS: modal.toast无法显示浮层提示

WXModalUIModule.m
- (void)toast:(NSString *)message duration:(double)duration
{
    WXAssertMainThread();
    //UIView *superView =  [[[UIApplication sharedApplication] windows] objectAtIndex:0];
    UIView *superView = [[[UIApplication sharedApplication] windows] lastObject];
    if (!superView) {
        superView =  self.weexInstance.rootView;
    }
    UIView *toastView = [self toastViewForMessage:message superView:superView];
    WXToastInfo *info = [WXToastInfo new];
    info.toastView = toastView;
    info.superView = superView;
    info.duration = duration;
    [[WXToastManager sharedManager].toastQueue addObject:info];
    
    if (![WXToastManager sharedManager].toastingView) {
        [self showToast:toastView superView:superView duration:duration];
    }
}

• weex-vue-navigator 使用vue-router的情况下在native端实现原生多页应用的体验（用了一下存在内存泄露的问题待解决）
• iOS端顶部渲染20px的问题
• 值得注意的函数执行顺序

    getSkuList() {
      const _this = this;
       _this.skuList = [];
       console.log('aaa');
      storage.setItem('skuList', _this.skuList, event => {
        console.log('set success');
      });
      storage.getItem('skuList', event => {
        console.log('get value')
        if (event.data) {
          _this.skuList = event.data;
        }
      });
      console.log('bbb');
    }

运行结果
aaa
bbb
set success
get value

• storage存储的内容应该转为字符串，取的内容转化为json对象

let skuList = [{
        skuId: 2696,
        count: 1,
        createTime: 1490688258
      }, {
        skuId: 2970,
        count: 1,
        createTime: 1490688272
      }, {
        skuId: 2971,
        count: 1,
        createTime: 1490688272
      }, {
        skuId: 2972,
        count: 1,
        createTime: 1490688272
      }];
      skuList = JSON.stringify(skuList);
      storage.setItem('skuList', skuList, event => {
        console.log('set success');
      });
      storage.getItem('skuList', event => {
        console.log('get value:', event.data)
        if (event.data) {
          _this.skuList = JSON.parse(event.data);
        }
      });

• router-view需要包裹在div标签中