weex-style-loader: 给你熟悉的style开发体验

简介: > 使用`weex`开发了两个项目,感受到了其跨平台动态性的强大;另一最直接的感受就是,作为一名前端,不能像平常那样编写`css` ,要不定义`内联style`,要不定义`single-class selector`,绞尽脑汁去给每个标签起`className` 像这样 ```html .mod-app-entry { ... } .entry-item

使用weex开发了两个项目,感受到了其跨平台动态性的强大;另一最直接的感受就是,作为一名前端,不能像平常那样编写css ,要不定义内联style,要不定义single-class selector,绞尽脑汁去给每个标签起className

像这样

<style>
  .mod-app-entry {
    ...
  }
  .entry-item {
    ...
  }
  .entry-img {
    ...
  }
  .entry-txt {
    ...
  }
</style>
<template>
  <div class="mod-app-entry">
    <a class="entry-item" repeat="{{list}}" href="{{jumpUrl}}">
      <image class="entry-img" src="{{imgUrl}}"></image>
      <text class="entry-txt">{{title}}</text>
    </a>
  </div>
</template>

作为前端,这样子臣妾做不到

笔者更希望能跟熟悉的味道一样

  • 使用任意选择器,元素选择器、组合选择器;
  • 使用继承

像这样

<style>
  .mod-app-entry {
    /*定义全局样式*/
    color: #999;
    font-size: 24;
  }
  a {
    ...
  }
  image {
    ...
  }
  .mod-app-entry text {
    /*覆盖color:#999,继承font-size:24*/
    color: #f00;
    text-align: center;
  }
</style>
<template>
  <div class="mod-app-entry">
    <a repeat="{{item in list}}" href="{{item.pluginUrl}}">
      <image src="{{item.imgUrl}}"></image>
      <text>{{item.title}}</text>
    </a>
  </div>
</template>

味道还是熟悉的好,可是该怎么做呢?

幸好,weex提供的weex-loader支持webpack打包,于是并有了编写weex-style-loader的想法

将我们平常编写的 style 转换成single class selecor style,这样就可以愉快地开发weex

使用

安装loader

tnpm install @ali/weex-style-loader --save-dev

配合weex-tookit脚手架,在webpack中添加loader

loaders: [
  {
    test: /\.we(\?[^?]+)?$/,
    loaders: ['weex-loader', '@ali/weex-style-loader']
  }
]

让我们看看weex-style-loader转换后的代码是否符合大爷的需求

<style>
.mod-app-entry {
  color: #999;
  font-size: 24;
}
.weex-element-increment-1 {
  ...
}
.weex-element-increment-2 {
  ...
}
.weex-element-increment-3 {
  text-align: center;
  color: #f00;
  font-size: 24;
}
</style>
<template>
  <div class="mod-app-entry">
    <a repeat="{{item in list}}" href="{{item.pluginUrl}}" class="weex-element-increment-1">
      <image src="{{item.imgUrl}}" class="weex-element-increment-2"></image>
      <text class="weex-element-increment-3">{{item.title}}</text>
    </a>
  </div>
</template>

展望

在此基础上,类似vue支持<style lang="less"></style>,就可以使用lesssass预处理器了
敬请期待

目录
相关文章
|
移动开发 JavaScript weex
weex-修改style的几种方法
weex-修改style的几种方法
162 0
weex-修改style的几种方法
|
5月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
348 2
|
5月前
|
移动开发 前端开发 weex
移动端混合开发技术:React Native、Weex、Flutter 之争
在移动应用开发领域,React Native、Weex 和 Flutter 是备受关注的混合开发技术。本文将对它们进行全面比较与评估,以帮助开发者做出明智的选择。我们将从开发生态、性能、跨平台能力和易用性等方面进行比较,为读者提供全面的参考和指导。
|
5月前
|
移动开发 Dart 前端开发
移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动应用的开发已经成为现代社会中的重要一环。本文将比较并评估三种主流的移动端混合开发技术:React Native、Weex和Flutter。通过对它们的特点、优势和劣势的分析,帮助开发者在选择适合自己项目的技术方案时做出明智的决策。
|
5月前
|
移动开发 开发框架 前端开发
移动端混合开发技术探析:React Native、Weex、Flutter的比较与选择
随着移动应用开发的高速发展,混合开发技术成为了一种备受关注的选择。本文将对移动端混合开发技术中的React Native、Weex和Flutter进行比较与探讨,分析它们在性能、开发体验、生态系统和跨平台支持等方面的差异,以及如何根据项目需求进行选择。
193 1
|
移动开发 JSON JavaScript
weex开发 - VS Code解除格式警告
weex开发 - VS Code解除格式警告
113 0
weex开发 - VS Code解除格式警告
|
移动开发 JavaScript weex
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
299 0
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
|
weex-ui 移动开发 JavaScript
weex开发-使用weex-ui绑定事件源注意事项
weex开发-使用weex-ui绑定事件源注意事项
141 0
|
移动开发 JavaScript weex
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
200 0
|
移动开发 编解码 weex
weex开发 - 加载index.js崩溃,白屏(may it has been destroyed so method:fireEvent is ignored,Url must be passe)
weex开发 - 加载index.js崩溃,白屏(may it has been destroyed so method:fireEvent is ignored,Url must be passe)
335 0
下一篇
无影云桌面