Git Product home page Git Product logo

incubator-weex-ui's Introduction

Weex Ui

中文 | English

Build Status npm NPM downloads NPM all downloads CNPM all downloads GitHub last commit GitHub closed issues Package Quality Join the chat at https://gitter.im/alibaba-weex-ui/chat

A rich interactive, lightweight, high performance UI library based on Weex.

Docs

Demo

Try it with Fliggy, Taobao, Tmall, Weex Playground or any browsers now!

Installation

npm i weex-ui -S

Usage

<template>
  <div>
    <wxc-button text="Open Popup"
                @wxcButtonClicked="buttonClicked">
    </wxc-button>
    <wxc-popup width="500"
               pos="left"
               :show="isShow"
               @wxcPopupOverlayClicked="overlayClicked">
    </wxc-popup>
  </div>
</template>

<script>
  import { WxcButton, WxcPopup } from 'weex-ui';
  // or
  // import WxcButton from 'weex-ui/packages/wxc-button';
  // import WxcPopup from 'weex-ui/packages/wxc-popup';
  module.exports = {
    components: { WxcButton, WxcPopup },
    data: () => ({
      isShow: false
    }),
    methods: {
      buttonClicked () {
        this.isShow = true;
      },
      overlayClicked () {
        this.isShow = false;
      }
    }
  };
</script>

Before use

In order to not pack all the components, you need to use babel-plugin-component to import the specified component. At the same time, if you haven't installed babel-preset-stage-0, it's necessary to install it.

npm i babel-preset-stage-0 babel-plugin-component -D
{
    "presets": ["es2015", "stage-0"],
    "plugins": [
        [
            "component",
            {
                "libraryName": "weex-ui",
                "libDir": "packages",
                "style": false
            }
        ]
    ]
}

More

  • If babel-loader in webpack.config.js has a exclude for node_modules, please turn on for weex-ui as exclude: /node_modules(?!(\/|\\).*(weex).*)/.
  • In order to get the latest features, please focus on the ChangeLog and often update weex-ui to the latest.
  • Many questions can be found in the faq and issue list, if you find a new bug, just file an issue.
  • More experience in Weex construction can be learned from Weex + Ui - Weex Conf 2018, welcome to translate it.

Development

npm i
npm run start

Once it has been compiled, a browser window will be opened automatically. You can switch to developer mode to see the demo. And there will be a QR code that you can use to try the demo on your phone in the console.

Support

  • Use Weex Ui in your daily work.
  • Star it if you like.
  • Join the chat at DingTalk to help solve weex problems.

Contribution

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our Contributing Guide before making a pull request.

Thank you to all the people who already contributed to Weex Ui!

License

  • The Apache License
  • Please feel free to use and contribute to the development.

incubator-weex-ui's People

Contributors

brickcarvingartist avatar chownation avatar coderlt avatar dannyfeliz avatar dependabot[bot] avatar dseeker avatar erhu1993 avatar gjjdd avatar i1mt avatar indreklasn avatar jieexu avatar liangwei88 avatar liuyunwei avatar marekchen avatar mintunitish avatar mzl980425 avatar plasusu avatar reedsun avatar shinriyo avatar snyk-bot avatar songjinzhong avatar tw93 avatar wang1433256766 avatar warjy avatar weue avatar wjun94 avatar yhspehy avatar zhongwang2008 avatar zweipix avatar zwwill avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

incubator-weex-ui's Issues

weex-ui可以打包成HTML5的发布包吗?

weex-ui可以打包成HTML5的发布包吗?跑哪个命令可以直接生成html的发布包?
weex号称可以三端统一,但找了好久,只看到用浏览器调试页面的文档,看不到可以打包成html5发布包的相关文档......

引用weex-ui组件android界面显示空白,除了example例子还没成功运行过

1.用weex create test创建weex项目
2.后续按照weex-ui提示做:
npm i weex-ui -S
import { WxcButton, WxcPopup } from 'weex-ui';
添加到index.vue里面
3.运行看效果 weexpack run android 不能显示出来
界面提示 : render error:-2013
log提示:10-12 10:47:11.022 19480-20668/com.alibaba.weex E/jsengine: ReportException :undefined:630: SyntaxError: Unexpected token (
10-12 10:47:11.025 19480-20668/com.alibaba.weex E/jsengine: ReportException : SyntaxError: Unexpected token (
at Jt ((weex):4:2004)
at Object.Dt [as createInstance] ((weex):3:31729)
at Object.R [as createInstance] ((weex):1:7385)
at global.(anonymous function) ((weex):7:1148)
10-12 10:47:11.026 19480-20668/com.alibaba.weex E/weex: reportJSException >>>> instanceId:1, exception function:createInstance, exception:SyntaxError: Unexpected token (

expressionBinding

any detail information or document about expressionBinding feature ? i can not find this feature in offical document website

and how can i import this module as you say in this readme?

thanks!

部分组件会报错

按照readme中的方式使用weex-ui,在导入部分组件的时候直接报错,发现是由于那些组件vue文件中使用了module.exports初始化,改成export default就不报错了,所以目前是直接copy源码修改了在使用。望修改

ReportException : Exception: SyntaxError: Unexpected keyword 'export'

Your development environment(weex、weex-toolkit、system and more.)

weex -v
v1.1.0-beta.6

  • weex-builder : v0.2.13-beta.4
  • weex-devtool : v0.3.2-beta.9
  • weex-previewer : v1.3.13-beta.9

Expected behavior and actual behavior.

  1. I hava update my weex-toolkit to latest version.

  2. I run the following command:
    $ weex debug **.vue
    or
    $ weex **.vue

  3. The website show nothing and has following error:
    Uncaught SyntaxError: Unexpected token export :8081/index.js:851
    line 851 is: export { default } from './index.vue';

  4. I scan the QR-Code with android phone, android Logcat output the following log
    ReportException : Exception: SyntaxError: Unexpected keyword 'export'
    at (global function):452
    Function@[native code]
    Function@[native code]
    w@(weex framework):4:1545
    a@(weex framework):3:30112
    (weex framework):8:22648

Steps to reproduce the problem.

WxcCell 打包错误 ERROR in XXX from UglifyJs Unexpected token: punc (() [XXX]

本来想用下WxcCell这个组件的,发现只要注册过WxcCell的组件打包就过不了

ERROR in goods-edit.js from UglifyJs
Unexpected token: punc (() [goods-edit.js:1574,17]

.babelrc里已经按照文档里写了

{
"presets": ["stage-3","es2015"],
"plugins": [
"transform-es2015-modules-commonjs",
"transform-export-extensions",
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages"
}
],
[
"transform-runtime",
{
"helpers": false,
"polyfill": false
}
]
]
}

其他组件倒是没有发现这个问题

我是刚建的一个weex 用官方的tookit,然后weex src/index.vue,报错 Uncaught SyntaxError: Unexpected token export;放到安卓手机里不显示

Hell123123o {{target}} Now, let's use vue to build your weex app.
<style> .wrapper { align-items: center; margin-top: 120px; } .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; } .logo { width: 360px; height: 156px; } .desc { padding-top: 20px; color:#888; font-size: 24px;} </style> <script> import { WxcButton, WxcPopup } from 'weex-ui'; export default { data: { target: 'World' }, components: { WxcButton, WxcPopup }, methods: { update: function (e) { this.target = 'Weex' console.log('target:', this.target) }, } } </script>

子组件改变父组件的值,父组件通过字面量定义的style,在回调后不会生效

封装了一个选项菜单,点击后会通过pick弹出选项, 第一次加载textarea的背景色为red,但通过onSelected回调后,textarea的背景色就会变成class里边定义的gray.代码如下

<template>
    <div class="wrapper">
        <option-text class="option"
                     @onSelected="selectedValue => item.value = selectedValue">
        </option-text>
        <textarea class="input" style="background-color: red"></textarea>
    </div>
</template>

<script>
    import optionText from '../../component/option-text.vue'
    export default {
        components: {
            optionText,
        },
        data() {
            return {
                item:{
                    value: 2,
                    remark: '备注4',
                }

            }
        },
        methods: {}
    }
</script>

<style scoped>

    .wrapper {
        width: 750px;
        background-color: white;
        flex-direction: column;
    }

    .option {
        height: 70px;
        width: 280px;
        margin: 5px;
    }

    .input {
        background-color: gray;
    }


</style>

但是如果通过动态绑定的方式如将textarea的代码修改为

<textarea class="input" :style="{backgroundColor: red}"></textarea>

这样就没问题了,这个是什么原因?

另外,顺便在问下两个问题,

  1. weex在国际化方面有相关的文档么?
  2. 下图这个报错是不支持三角函数么?,在webstorm中,可以设置么?
    image

一个按钮没有响应它的点击事件

Before you start writing a issue,Please make sure there have not the same issue.

Your development environment(weex、weex-toolkit、system and more.)

weex v1.1.0

Expected behavior and actual behavior.

一个最简单的例子, 一个按钮没有响应它的点击事件.

Steps to reproduce the problem.

1.安装weex & weex create xxx
2. cd 到 weex project 目录
3. npm i weex-ui -S
4. npm i babel-plugin-component -D
5. 替换该目录下的.babelrc
6. 修改index.vue, 添加一个按钮
7. npm run dev & npm run serve

归档.zip

请问你们是如何处理自定义标签的,比如mask

dialog的组件有一些问题,可能是自定义标签造成的,希望回答一下

Your development environment(weex、weex-toolkit、system and more.)

"dependencies": {
    "vue": "^2.1.10",
    "vue-router": "^2.1.1",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.0.1",
    "weex-ui": "^0.2.4",
    "weex-vue-render": "^0.12.3"
  },
"devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-plugin-component": "^0.10.1",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.26.1",
    "serve": "^1.4.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.10",
    "webpack": "^2.2.1",
    "weex-loader": "^0.4.4"
  }
  • node v8.9.1

  • weex、weex-toolkit都是根据最新的安装的,windows7

Expected behavior and actual behavior.

  • wxc-dialog组件根本无法显示
  • 官方demo的xc效果
    image
  • 自己的效果
    image

-如果我吧wxc-dialog组件的index.vue的mask标签改成div后是能正常的显示的
image

-然后就正常了
image

Steps to reproduce the problem.

  • npm run dev
  • npm run serve

Can't correctly build page using weex-ui

我自己写了个项目,看到weex-ui很好看,npm install weex-ui引入后
然后页面import { WxcSearchbar } from 'weex-ui' 后,运行起来怎么报错了
Uncaught Error: Module build failed: SyntaxError: Unexpected token (35:8)

at Object.<anonymous> (Search.web.js:1175)
at __webpack_require__ (Search.web.js:22)
at Object.<anonymous> (Search.web.js:6660)
at __webpack_require__ (Search.web.js:22)
at Object.module.exports.arrowIcon (Search.web.js:10649)
at __webpack_require__ (Search.web.js:22)
at Object.<anonymous> (Search.web.js:10542)
at __webpack_require__ (Search.web.js:22)
at Object.<anonymous> (Search.web.js:5933)
at __webpack_require__ (Search.web.js:22)

引用WxcPageCalendar 编译时报错

ERROR in invoice.js from UglifyJs
Unexpected token: name (TRADITIONAL_HOLIDAY) [invoice.js:1973,4]

ERROR in setting.js from UglifyJs
Unexpected token: name (TRADITIONAL_HOLIDAY) [setting.js:1206,4]

image url //gw.alicdn.com/tfs/TB1x18VpwMPMeJjy1XdXXasrXXa-21-36.png convert problem

Before you start writing a issue,Please make sure there have not the same issue.

Your development environment(weex、weex-toolkit、system and more.)

  • weex-android:0.16.0

Expected behavior and actual behavior.

  • since [email protected] image src changed to '//gw.alicdn.com/tfs/TB1x18VpwMPMeJjy1XdXXasrXXa-21-36.png',on android platform,this url convert to 'file://gw.alicdn.com/tfs/TB1x18VpwMPMeJjy1XdXXasrXXa-21-36.png'

Steps to reproduce the problem.

not work when set modules to false in babelrc

this is my babelrc:
{ "presets": [{ "es2015": { "modules": false }}, "stage-0"], "plugins": [ [ "component", { "libraryName": "weex-ui", "libDir": "packages" } ] ] }
it throw error:
00
i google this problem,and i guess the set modules=false cause this problem. does weex-ui component compat with this setting?
sorry for my poor vue and weex knowledge

Uncaught SyntaxError: Unexpected token export

不清楚什么原因,引入后使用组件报了Uncaught SyntaxError: Unexpected token export
module: {
rules: [{
test: /.vue$/
}, {
test: /.js$/,
use: [{
loader: 'babel-loader'
}],
exclude: /node_modules(?!/.(weex).)/
}]
}

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

Use of const in strict mode.

11-10 18:48:53.253 19142-19161/com.alibaba.weex E/jsengine: ReportException :undefined:92: SyntaxError: Use of const in strict mode.
11-10 18:48:53.253 19142-19161/com.alibaba.weex E/jsengine: ReportException : SyntaxError: Use of const in strict mode.
at Jt ((weex):4:2004)
at Object.Dt [as createInstance] ((weex):3:31729)
at Object.R [as createInstance] ((weex):1:7385)
at global.(anonymous function) ((weex):7:1148)
11-10 18:48:53.253 19142-19161/com.alibaba.weex E/weex: reportJSException >>>> instanceId:4, exception function:createInstance, exception:SyntaxError: Use of const in strict mode.

我知道这个问题应该简单,但是作为新转过来的,找不到问题,也搜不到 ,求解,求大神解惑

Popup 弹出的内容区域只有设置 width 的一半

Before you start writing a issue,Please make sure there have not the same issue.

一、Your development environment(weex、weex-toolkit、system and more.)

  • weex-toolkit
  • Mac OS

二、Expected behavior and actual behavior.

Expected behavior

弹出的内容区域等于设置的 width 值。
image

Actual behavior

弹出的内容区域只有设置 width 值的一半。

三、Steps to reproduce the problem.

使用通用 demo 就可以复现。

ERROR in index.web.js from UglifyJs Unexpected token: punc (() [index.web.js:10679,17]

chunk {0} index.web.js, index.web.js.map (index) 443 kB [entry] [rendered]
[45] .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!./src/index.vue 2.04 kB {0} [built]
[94] ./src/index.vue 1.47 kB {0} [built]
[95] .//vue-loader/lib/template-compiler.js?id=data-v-0d12c4ca!.//vue-loader/lib/selector.js?type=template&index=0!./src/index.vue 1.81 kB {0} [built]
[106] (webpack)/hot nonrecursive ^./log$ 160 bytes {0} [built]
[115] .//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js?id=data-v-0d12c4ca&scoped=true!.//vue-loader/lib/selector.js?type=styles&index=0!./src/index.vue 3.57 kB {0} [built]
[135] ./
/babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!.//weex-ui/packages/wxc-rich-text/index.vue 936 bytes {0} [built]
[141] .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0!./src/wxc-item.vue 5.75 kB {0} [built]
[147] .//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js?id=data-v-77bf1996&scoped=true!.//vue-loader/lib/selector.js?type=styles&index=0!./src/wxc-item.vue 15.1 kB {0} [built]
[148] ./
/weex-ui/packages/wxc-rich-text/index.vue 1.47 kB {0} [built]
[150] .//weex-ui/packages/wxc-special-rich-text/index.vue 1.48 kB {0} [built]
[151] ./src/wxc-item.vue 1.48 kB {0} [built]
[158] ./
/vue-loader/lib/template-compiler.js?id=data-v-77bf1996!.//vue-loader/lib/selector.js?type=template&index=0!./src/wxc-item.vue 3.06 kB {0} [built]
[164] ./
/vue-style-loader!.//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js?id=data-v-77bf1996&scoped=true!.//vue-loader/lib/selector.js?type=styles&index=0!./src/wxc-item.vue 1.4 kB {0} [built]
[165] ./
/weex-ui/packages/wxc-rich-text/index.js 38 bytes {0} [built]
[166] ./~/weex-ui/packages/wxc-special-rich-text/index.js 38 bytes {0} [built]
+ 126 hidden modules

ERROR in index.web.js from UglifyJs
Unexpected token: punc (() [index.web.js:10679,17]
Child html-webpack-plugin for "index.html":
chunk {0} index.html 963 bytes [entry]
+ 1 hidden modules
webpack: Failed to compile.

weex preview 运行报 Uncaught SyntaxError: Unexpected token export

首先恭喜weex终于有了官方的ui库,祝weex越来越好。

我迫不及待地试用了下,当我用以下命令测试的时候发现报了标题中的错。

weex src/index.vue

另外执行

weex run android

模拟器上打开后也是一直 loading 状态。

我当前的项目使用 weex-toolkit 脚手框工具生成,版本为:v1.0.9
测试页面很简单,就使用了 wxcButton

<template>
  <div class="wrapper">
    <wxc-button text="登录" type="normal" @wxcButtonClicked="onSubmit"></wxc-button>
  </div>  
</template>

<script>
var modal = weex.requireModule('modal')
import { wxcButton } from 'weex-ui'

export default {
  components: {
    wxcButton
  },
  data () {
    return {}
  },
  methods: {
    onSubmit () {
        modal.toast({message: 'login'})
    }
  }
}
</script>

<style>
.wrapper {
  display: flex;
  flex-direction: columns;
  align-items: center;
  justify-content: center;
}
</style>

看了下报错的地方,是因为 weex-ui 使用了如下的导出方式:

export { default } from './index.vue';

了解到可能的原因是 weex preview build 不支持 export 这种es6的方式。不知有没有比较好的处理方法?

到底是需要include还是exclude weex-ui

如果你的webpack.config.js中 babel-loader 配置有对 node_modules 进行 exclude 处理,需要排除掉 weex-ui 包才可以使用 exclude: /node_modules(?!/.(weex).)/。

排除了整个/node_modules,不就包含了/node_modules(?!/.(weex).)/吗?

编译js "use strict" 导致运行-2013

//"use strict";
Object.defineProperty(webpack_exports, "__esModule", { value: true });
const STYLE_MAP = {
taobao: {
backgroundColor: '#FF5000'
},
fliggy: {
backgroundColor: '#FFC900'
},
normal: {
backgroundColor: '#FFFFFF',
borderColor: '#A5A5A5',
borderWidth: '1px'
},
highlight: {
backgroundColor: '#FFFFFF',
borderColor: '#EE9900',
borderWidth: '1px'
}
};

编出的js文件中这行代码报错, 但是把"use strict";注释掉就OK了.这是源码的问题,还是编译出了问题?

wxc-ep-slider 提供的demo无法滚动

Before you start writing a issue,Please make sure there have not the same issue.

Your development environment(weex、weex-toolkit、system and more.)

Expected behavior and actual behavior.

Steps to reproduce the problem.

引入weex-ui报错

import WxcButton from './packages/wxc-button';

Uncaught SyntaxError: Unexpected token import

按钮模块引入不进来

wxc-tab-page这个组件怎么把main的内容放在上方.导航栏放在下方

wxc-tab-page这个组件一般显示的是nav导航栏在上方,main内容在下方.
wxc-tab-page这个组件怎么把main的内容放在上方.nav导航栏放在最下方
看了一下属性,没有这个属性功能.看了组件的源码 要引多重js.
所以勉强用了绝对定位定到最下面.把main隐藏了.自己再手写一个main,所以就没有左右滑动的效果.
发帖问问大神们怎么解决的

引入weex-ui组件,执行weex debug访问不了页面?

在页面中引入weex-ui组件,weex debug调试时发现页面空白,但是去掉weex-ui组件就可以正常显示;我把weex-ui的组件(比如weex-ui/packages/wxc-button文件夹)放入自己项目中,然后在页面中引入,调试就可以正常显示。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.