Home

Awesome

Weex FlymeUI

Travis GitHub last commit npm license

Flyme Design

遵循 Flyme 系统设计风格、基于 Weex 的跨平台通用组件库。

安装

npm i weex-flymeui -S

使用

<template>
  <div>
    <fm-button @buttonClick="buttonClicked" theme="blue">安装</fm-button>
  </div>
</template>

<script>
  import { FmButton } from 'weex-flymeui';
  // 或者 import FmButton from 'weex-flymeui/packages/fm-button';
  export default {
    components: { FmButton },
    methods: {
      buttonClicked () {
        // enter your code
      }
    }
  };
</script>

使用前

如果你不想打包所有的组件，需要使用 babel-plugin-component 来只引入需要的组件打包，同时如果没有安装 babel-preset-stage-0，也需要一并安装。

npm i babel-preset-stage-0 babel-plugin-component  -D

// 增加一个plugins的配置到 .babelrc 中
{
    "presets": ["es2015", "stage-0"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-flymeui",
        "libDir": "packages",
        "style": false
      }
    ]
  ]
}

运行 Demo

npm i
npm run start

一旦编译完成后，将会自动打开一个浏览器，你可以在浏览器打开开发者工具，这时候在 console 中你可以看到一个预览二维码，直接使用你的 Weex App 扫码就可以看到 Demo 效果。

Weex-toolkit

如果你使用 weex-toolkit 来开发你的Weex项目，你需要向 .babelrc 文件中加入 'state-0' 和 'babel-plugin-component'

npm i babel-preset-stage-0 babel-plugin-component -D

{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-flymeui",
        "libDir": "packages"
      }
    ]
  ]
}

需要注意的地方

?> 目前部分组件没有进行 iOS 的适配，欢迎 提交 Issue 或 PR

!> Weex-FlymeUI 组件均以 1080px 屏幕宽度作为基准尺寸，请在入口文件或者父组件设置 viewport。

index.js

const meta = weex.requireModule('meta')
// 配置 viewport 的宽度为 1080px
meta.setViewport({  
  width: 1080px
})

index.html

<!-- 添加以下 meta -->
<meta name="weex-viewport" content="1080"/>

贡献代码

我们致力于 Flyme 设计在移动领域的推广，同时在寻找志同道合的朋友。如果你在使用中发现任何问题或有更好的想法，欢迎提交 pull request，并且在提交前记得阅读一下 贡献指南。

协议