weex-flymeui

    0.1.25 • Public • Published

    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,并且在提交前记得阅读一下 贡献指南

    协议

    • 遵循 MIT 协议
    • 请自由地享受和参与开源

    Install

    npm i weex-flymeui

    DownloadsWeekly Downloads

    0

    Version

    0.1.25

    License

    MIT

    Unpacked Size

    6.53 MB

    Total Files

    329

    Last publish

    Collaborators

    • yanjiie