Giter Club home page Giter Club logo

weex's Introduction

Weex

A framework for building Mobile cross-platform UI.

Build Status

Distribution

Support Android 4.1 (API 16), iOS 9.0+ and WebKit 534.30+.

platform status
Android Maven Central
iOS Pod version Carthage compatible
Web npm

Build from Source

How To Build

Contribution

Please read Contributing Guide for more information.

License

Apache License 2.0

weex's People

Contributors

acton393 avatar atomtong avatar bluebird78999 avatar boboning avatar cxfeng1 avatar cxfeng1-zz avatar darin726 avatar doumafang avatar erha19 avatar fkysly avatar gurisxie avatar hanks10100 avatar jianhan-he avatar jinjiang avatar kfeagle avatar lucky-chen avatar luics avatar lvscar avatar miomin avatar misakuo avatar mrraindrop avatar sospartan avatar tancy avatar terrykingcha avatar wqyfavor avatar wrmswindmill avatar xkli avatar yangshengtao avatar yorkshen avatar zshshr 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

weex's Issues

html5 error on dev branch

In dev branch:

  1. npm update weex-transformer
  2. npm run serve
  3. open http://localhost:12580/index.html?page=./examples/build/index.js&loader=xhr

all components should have a standard event handler style

In videoDemo.we, the event handler on the ui-button is like

<ui-button value="Pause" click="{{pause}}"></ui-button>    // uses click

but in the WEEX document, the grammar of the event handler is like onclick="".

so maybe we need a standard and agreed event handler API

video tag bugs on Android

first, src https

<video  src="//cloud.video.taobao.com/play/u/522794875/p/2/e/6/t/1/d/ld/fv/2/23335165.mp4"
             auto-play="true">
</video>

On Android Weex Playground, //cloud.video.taobao.com/play/u/522794875/p/2/e/6/t/1/d/ld/fv/2/23335165.mp4 will cause load failure.

second, video behaviors strange in position:sticky and position:absolute

gradle clean failed

in directory D:\weex\android\playground\app , i execute gradle clean , failed!
i hope weex can used same version build-tools,at playground and sdk

D:\weex\android\playground\app>
D:\weex\android\playground\app>gradle clean
Observed package id 'build-tools;20.0.0' in inconsistent location 'D:\android-sdk-windows\build-tools\android-4.4W' (Expected 'D:\android-sdk-windows\build-tools\20.0.0')
Download https://plugins.gradle.org/m2/gradle/plugin/nl/javadude/gradle/plugins/license-gradle-plugin/0.12.1/license-gradle-plugin-0.12.1.jar

FAILURE: Build failed with an exception.

BUILD FAILED

Total time: 5 mins 21.425 secs

video tag auto-play attribute bug

Q:Can I Speak Chinese...? A:Yes, U can...

ok,说一下现在使用video标签的感受,我们希望自由控制组件的渲染的时机。

<video
if="videoRender"
class="video" 
onpause="onpause"
onstart="onstart"
onfinish="onfinish"
onfail="onfail" src="http://cloud.video.taobao.com/play/u/522794875/p/2/e/6/t/1/d/ld/fv/2/23335165.mp4"
auto-play="auto"
play-status="{{playStatus}}">
</video>

我希望通过videoRender来控制组件的加载时机,不让mp4文件做无谓的下载。
但是在videoRender设为true的时候,组件初始化,但是视频没有自动加载(auto-play="auto"失效),
使用setTimeout的方式也不能控制视频的自动播放。

参考问题代码

<template>
  <scroller>
    <div class="video-wrap">
      <video if="videoRender" class="video" onpause="onpause" onstart="onstart" onfinish="onfinish" onfail="onfail"
             src="http://cloud.video.taobao.com/play/u/522794875/p/2/e/6/t/1/d/ld/fv/2/23335165.mp4"
             auto-play="false" play-status="{{playStatus}}">
      </video>
      <div class="video-placeholder"></div>
      <div class="video-control">
        <text class="close-btn">&times;</text>
      </div>
    </div>

    <div style="flex-direction: row; justify-content: center;">
      <ui-button value="Init" click="{{init}}"></ui-button>
      <ui-button value="Pause" click="{{pause}}" style="margin-left:20px;"></ui-button>
      <ui-button value="Play" click="{{play}}" type="primary" style="margin-left:20px;"></ui-button>
    </div>
    <text style="height:2000px;background: #333333;">

    </text>
  </scroller>
</template>

<style>
  .video-wrap {
    width:750px;
    height:460px;
  }
  .video-placeholder {
    width:0;
    height:0;
  }
  .video-ready {
    width:750px;
    height:460px;
  }
  .video {
    position: fixed;
    top:0;
    z-index: 100;
    width: 750px;
    height: 460px;
    margin-bottom: 80px;
  }
</style>

<script>
  module.exports = {
    data: {
      playStatus: 'stop',
      videoRender:false
    },
    methods: {
      init: function() {
        var self = this;
        self.videoRender = true;
        setTimeout(function() {
          self.playStatus = 'play';
        },500);
      },
      pause: function() {
        this.playStatus = 'pause';
      },
      play: function() {
        this.playStatus = 'play';
      },
      onpause: function() {
        this.$call('modal', 'toast', {'message': 'video pause'});
      },
      onstart: function() {
        this.$call('modal', 'toast', {'message': 'video start'});
      },
      onfinish: function() {
        this.$call('modal', 'toast', {'message': 'video finish'});
      },
      onfail: function() {
        this.$call('modal', 'toast', {'message': 'video fail'});
      }
    }
  };
</script>

can't install tnpm

After looking the doc of Weex, I found that I need tnpm to install Weex-CLI tools, but when I install tnpm over npm, I found there is only a fake package in npm, and no result on Internet to resolve this problem.

When I install tnpm over npm, I got this message.

This is a fake package on official npm.
Perhaps you installed the wrong one.
Please visit urls below and use the right way to install tnpm
A1ib4b4: http://t.cn/Rysxjww
T3nC3nt: http://km.oa.com/articles/show/260990

But this 2 URL can't be opened.

[jsfm] try Vue 2.0 as new JS Framework

the long-term branch is jsfm-feature-vue and gonna be moved to repo alibaba/weex-vue-next

  • native dom node-ops
    • createElement (tagName)
    • createElementNS (namespace, tagName)
    • createTextNode (text)
    • insertBefore (parentNode, newNode, referenceNode)
    • removeChild (node, child)
    • appendChild (node, child)
    • parentNode (node)
    • nextSibling (node)
    • tagName (node)
    • setTextContent (node, text)
  • native dom modules
    • attr
    • style
    • class
    • event
  • first paint optimization
    • append="tree|node"
    • stream option
    • support sub components
  • multiple instance management
    • createInstance()
    • renderFinish
    • refreshInstance()
    • refreshFinish
    • destroyInstance()
  • register components and modules from native
    • registerComponents()
    • registerModules()
  • export virtual dom tree for debugging
    • getRoot()
  • callJS()
    • fireEvent()
    • callback()
  • weex-vue-loader
  • compiler
    • parse class/style
    • generate __r__
    • generate __s__
    • generate __m__
    • generate __t__
    • generate class/style
  • Vue 2.0 core enhancement
    • separate __h__ into renderElement & renderElementWithChildren
    • from text and static root to __t__ and __m__
    • style / class mechanism
    • text node to <text> (hacked)
    • stream option and append (atom) option (hacked)
  • adapt to Android engine

WXDomStatement is null

In WXDomManager.java line 493-502

  void createFinish(String instanceId) {
    if (!isDomThread()) {
      throw new WXRuntimeException("CreateFinish operation must be done in dom thread");
    }
    WXDomStatement statement = mDomRegistries.get(instanceId);
    if (statement == null) {
      return;
    }
    statement.createFinish();
  }

run serve in PC

npm run serve

modify CURRENT_IP to PC ip like 172.18.23.41 in WXMainActivity ,then will call createFinish,but mDomRegistries.get(instanceId) will get null

Toast(modal) behavior is different from native toast

In Android native Toast, if one toast is still showing, and the second one comes, the first one will soon be replaced (may with a crash animation)

While in weex, the second toast (or you may call it modal) can appear only if the first completes its showing duration. This problem is more serious if we have a sequence of toast, which makes user have a wait a long long time to see all toasts.

can't transfer attribute "onclick" to child component

<element name="foo">
  <template>
    <container style="margin-top: 40px;margin-bottom: 40px;">
      <text onclick={{onclick}}>Bind onclick, failed</text>
    </container>
  </template>
</element>

<element name="bar">
  <template>
    <container>
      <text onclick={{click}}>Bind other prop, succeed</text>
    </container>
  </template>
</element>

<template>
  <container>
    <foo onclick={{clicked}}></foo>
    <bar click={{clicked}}></bar>
    <!--<text onclick="{{clicked}}">bind onclick prop</text>-->
  </container>
</template>

<script>
  module.exports = {
    methods: {
      clicked: function() {
        this.$call('modal', 'toast', {'message': 'clicked!'});
      }
    }
  }
</script>

npm install failed

OS X 10.11

/bin/sh ./bin/install-hooks.sh

ln: .git/hooks/pre-commit: No such file or directory
ln: .git/hooks/commit-msg: No such file or directory
ln: .git/hooks/pre-push: No such file or directory

npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/Cellar/node/0.12.7/bin/node" "/usr/local/bin/npm" "run" "install:githooks"
npm ERR! node v5.10.1
npm ERR! npm v3.8.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] install:githooks: /bin/sh ./bin/install-hooks.sh
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install:githooks script '/bin/sh ./bin/install-hooks.sh'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! /bin/sh ./bin/install-hooks.sh
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs weex
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/gitProject/weexs/npm-debug.log

npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/Cellar/node/0.12.7/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v5.10.1
npm ERR! npm v3.8.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: npm run install:js-framework && npm run install:h5-render && npm run install:githooks
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'npm run install:js-framework && npm run install:h5-render && npm run install:githooks'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run install:js-framework && npm run install:h5-render && npm run install:githooks
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs weex
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/gitProject/weexs/npm-debug.log

error: `npm run serve`

> [email protected] build:copy2sdk /Users/luics/Documents/proj/sandbox/weex
> cp -vf ./src/js-framework/dist/index.js ./android/sdk/assets/main.js

cp: ./android/sdk/assets/main.js: No such file or directory

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build:copy2sdk"
npm ERR! node v4.2.6
npm ERR! npm  v2.14.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:copy2sdk: `cp -vf ./src/js-framework/dist/index.js ./android/sdk/assets/main.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:copy2sdk script 'cp -vf ./src/js-framework/dist/index.js ./android/sdk/assets/main.js'.
npm ERR! This is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cp -vf ./src/js-framework/dist/index.js ./android/sdk/assets/main.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/luics/Documents/proj/sandbox/weex/npm-debug.log

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v4.2.6
npm ERR! npm  v2.14.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `npm run build:js-framework && npm run build:h5-render && npm run build:copy2sdk`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'npm run build:js-framework && npm run build:h5-render && npm run build:copy2sdk'.
npm ERR! This is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run build:js-framework && npm run build:h5-render && npm run build:copy2sdk
npm ERR! You can get their info via:
npm ERR!     npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/luics/Documents/proj/sandbox/weex/npm-debug.log

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "serve"
npm ERR! node v4.2.6
npm ERR! npm  v2.14.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] serve: `npm run dev && npm run build && serve ./ -p 12580`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script 'npm run dev && npm run build && serve ./ -p 12580'.
npm ERR! This is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run dev && npm run build && serve ./ -p 12580
npm ERR! You can get their info via:
npm ERR!     npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/luics/Documents/proj/sandbox/weex/npm-debug.log

img will not be shown unless width and height were both set

img will not be shown unless width and height were both set.

<style> .grey {background-color:#888888;} .red {color:#FF0000;} .i { width:20px; height:20px;} .width { width:200;} .height { height:200;} </style>
    <img src='https://www.gstatic.com/webp/gallery/1.sm.webp' />
    <img class='width' src='https://www.gstatic.com/webp/gallery/1.sm.webp' />
    <img class='height' src='https://www.gstatic.com/webp/gallery/1.sm.webp' />

imgs above will not be shown.

npm run transform error

ERROR in ./test/indexItem.we?entry=true
Error: Line 1: Unexpected token ILLEGAL

ERROR in ./test/indexItem.we?entry=true
Module build failed:

ERROR in ./examples/common.we?entry=true
Module not found: Error: Cannot resolve module 'F:workspaceweexexamplesstyle-box
.we' in F:\workspace\weex\examples
@ ./examples/common.we?entry=true 2:0-50

ERROR in ./examples/index.we?entry=true
Module not found: Error: Cannot resolve module 'F:workspaceweexexamplesexample-l
ist.we' in F:\workspace\weex\examples
@ ./examples/index.we?entry=true 2:0-53

ERROR in ./examples/example-list.we?entry=true
Module not found: Error: Cannot resolve module 'F:workspaceweexexamplesexample-l
ist-item.we' in F:\workspace\weex\examples
@ ./examples/example-list.we?entry=true 2:0-58

ERROR in ./examples/style-box.we?entry=true
Module not found: Error: Cannot resolve module 'F:workspaceweexexamplesstyle-ite
m.we' in F:\workspace\weex\examples
@ ./examples/style-box.we?entry=true 2:0-51

ERROR in ./examples/slider-page.we?entry=true
Module not found: Error: Cannot resolve module 'F:workspaceweexexamplesslider-it
em.we' in F:\workspace\weex\examples
@ ./examples/slider-page.we?entry=true 2:0-52

ERROR in ./test/index.we?entry=true
Module not found: Error: Cannot resolve module 'F:workspaceweex estindexitem.we'
in F:\workspace\weex\test
@ ./test/index.we?entry=true 2:0-46

ERROR in ./examples/slider-demo.we?entry=true
Module not found: Error: Cannot resolve module 'F:workspaceweexexamplesslider-pa
ge.we' in F:\workspace\weex\examples
@ ./examples/slider-demo.we?entry=true 2:0-52

npm run serve error

npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "serve"
npm ERR! node v4.2.2
npm ERR! npm v2.14.7
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] serve: npm run dev && npm run build && serve ./ -p 12580
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] serve script 'npm run dev && npm run build && serve ./ -p 12580'.
npm ERR! This is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run dev && npm run build && serve ./ -p 12580
npm ERR! You can get their info via:
npm ERR! npm owner ls weex
npm ERR! There is likely additional logging output above.

thanks

typo: We agrees that you...

At top of README.md: We agrees that you... should be We agree. The paragraph following has some problems:

We agrees that you may discuss technical information about Weex, except that you may not fork Weex to public repository , write public reviews or post screen shots using information from current repository(https://github.com/alibaba/weex) , redistribute weex within any form.

WXComponentFactory error type:[indexitem] class not found

in file ./weex/android/playground/app/src/main/java/com/alibaba/weex/WXMainActivity.java
change line from

private static String CURRENT_IP="your_current_IP"; // your_current_IP

to

private static String CURRENT_IP="192.168.31.240"; // your_current_IP

occur

04-24 01:09:37.495 12641-12675/com.alibaba.weex E/weex: WXComponentFactory error type:[indexitem] class not found

in logcat

and I can get page title(Weex HTML5) from http://192.168.31.240:12580/ in my browser(UC) by the same phone.

the git branch is 5439a0b

slider demo doesn't work properly

In the slider demo(Android),you can slide to next one and it will back to the first when it reach the end(loop),that's right,but if you slide to prev one at first then it doesn't work(can't slide to the last).
Is this a bug or it just work properly?

scrollToElement doesn't work in Android

code example:

<template>
  <scroller>
    <text id="top" style="height: 10000;">Hello, World!</text>
    <text onclick="gotoTop">Goto top</text>
  </scroller>
</template>

<script>
  var dom = require('@weex-module/dom')
  module.exports = {
    methods: {
      gotoTop: function () {
        var top = this.$el('top')
        dom.scrollToElement(top)
      }
    }
  }
</script>

npm install error

windows7 cmd cd weex-master , then excute npm install

[email protected] postinstall C:\work\weex-master
npm run install:js-framework && npm run install:h5-render && npm run install:g
ithooks

[email protected] install:js-framework C:\work\weex-master
cd ./src/js-framework && npm install && cd ../../

[email protected] install:h5-render C:\work\weex-master
cd ./src/h5-render && npm install && cd ../../

[email protected] install:githooks C:\work\weex-master
/bin/sh ./bin/install-hooks.sh

系统找不到指定的路径。

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\work\\nodejs\\node.exe" "C:\\work\\nodejs\\node_modules\\npm\
\bin\\npm-cli.js" "run" "install:githooks"
npm ERR! node v4.4.3
npm ERR! npm  v2.15.1
npm ERR! code ELIFECYCLE
npm ERR! [email protected] install:githooks: `/bin/sh ./bin/install-hooks.sh`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install:githooks script '/bin/sh ./bin/install
-hooks.sh'.
npm ERR! This is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     /bin/sh ./bin/install-hooks.sh
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs weex
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR!     npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\work\weex-master\npm-debug.log

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\work\\nodejs\\node.exe" "C:\\work\\nodejs\\node_modules\\npm\
\bin\\npm-cli.js" "install"
npm ERR! node v4.4.3
npm ERR! npm  v2.15.1
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: `npm run install:js-framework && npm run instal
l:h5-render && npm run install:githooks`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'npm run install:js-framewo
rk && npm run install:h5-render && npm run install:githooks'.
npm ERR! This is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run install:js-framework && npm run install:h5-render && npm ru
n install:githooks
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs weex
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR!     npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\work\weex-master\npm-debug.log

How to install tnpm?

I'm try to install weex by command line:
npm install tnpm

Then try to install weex CLI toolchain
sudo tnpm install -g @ali/weex-toolkit
Tips are as follows:
This is a fake package on official npm. Perhaps you installed the wrong one. Please visit urls below and use the right way to install tnpm A1ib4b4: http://t.cn/Rysxjww T3nC3nt: http://km.oa.com/articles/show/260990
But I can't open that urls.

transformer 貌似有异常

OS:windows 10
Node: v5.0.0
Branch: weex [dev]

> git clone https://github.com/alibaba/weex
> cd weex
> npm install

上面的命令都正常,执行npm run serve 错误
transformer 貌似有异常,查了一下issues,貌似没人遇到这个问题

C:\Users\Administrator\Desktop\test\weex [dev]> npm run serve

> [email protected] serve C:\Users\Administrator\Desktop\test\weex
> npm run dev && npm run build && serve ./ -p 12580

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

> [email protected] dev C:\Users\Administrator\Desktop\test\weex
> npm run clean && npm run transform

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

> [email protected] clean C:\Users\Administrator\Desktop\test\weex
> npm run clean:examples && npm run clean:test

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

> [email protected] clean:examples C:\Users\Administrator\Desktop\test\weex
> echo "\033[36;1m[Clean]\033[0m \033[33mexamples\033[0m" && rm -vf examples/build/*

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
"\033[36;1m[Clean]\033[0m \033[33mexamples\033[0m"
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

> [email protected] clean:test C:\Users\Administrator\Desktop\test\weex
> echo "\033[36;1m[Clean]\033[0m \033[33mtest\033[0m" && rm -vf test/build/*

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
"\033[36;1m[Clean]\033[0m \033[33mtest\033[0m"
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

> [email protected] transform C:\Users\Administrator\Desktop\test\weex
> npm run transform:examples && npm run transform:test

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

> [email protected] transform:examples C:\Users\Administrator\Desktop\test\weex
> transformer -g WARNING examples/*.we -o examples/build

▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
fs.js:584
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open 'C:\Users\Administrator\Desktop\test\weex\examples\*.we'
    at Error (native)
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:431:33)
    at C:\Users\Administrator\Desktop\test\weex\node_modules\weex-transformer\bin\transformer.js:62:20
    at Array.forEach (native)
    at Object.<anonymous> (C:\Users\Administrator\Desktop\test\weex\node_modules\weex-transformer\bin\transformer.js:54:14)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

npm ERR! Windows_NT 10.0.10240
npm ERR! argv "D:\\ProgramFiles\\nodejs\\node.exe" "D:\\ProgramFiles\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "transform:examples"
npm ERR! node v5.0.0
npm ERR! npm  v3.3.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] transform:examples: `transformer -g WARNING examples/*.we -o examples/build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] transform:examples script 'transformer -g WARNING examples/*.we -o examples/build'.
npm ERR! This is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     transformer -g WARNING examples/*.we -o examples/build
npm ERR! You can get their info via:
npm ERR!     npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Administrator\Desktop\test\weex\npm-debug.log
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

npm ERR! Windows_NT 10.0.10240
npm ERR! argv "D:\\ProgramFiles\\nodejs\\node.exe" "D:\\ProgramFiles\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "transform"
npm ERR! node v5.0.0
npm ERR! npm  v3.3.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] transform: `npm run transform:examples && npm run transform:test`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] transform script 'npm run transform:examples && npm run transform:test'.
npm ERR! This is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run transform:examples && npm run transform:test
npm ERR! You can get their info via:
npm ERR!     npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Administrator\Desktop\test\weex\npm-debug.log
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

npm ERR! Windows_NT 10.0.10240
npm ERR! argv "D:\\ProgramFiles\\nodejs\\node.exe" "D:\\ProgramFiles\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v5.0.0
npm ERR! npm  v3.3.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `npm run clean && npm run transform`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'npm run clean && npm run transform'.
npm ERR! This is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run clean && npm run transform
npm ERR! You can get their info via:
npm ERR!     npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Administrator\Desktop\test\weex\npm-debug.log
▀ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

npm ERR! Windows_NT 10.0.10240
npm ERR! argv "D:\\ProgramFiles\\nodejs\\node.exe" "D:\\ProgramFiles\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "serve"
npm ERR! node v5.0.0
npm ERR! npm  v3.3.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] serve: `npm run dev && npm run build && serve ./ -p 12580`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script 'npm run dev && npm run build && serve ./ -p 12580'.
npm ERR! This is most likely a problem with the weex package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run dev && npm run build && serve ./ -p 12580
npm ERR! You can get their info via:
npm ERR!     npm owner ls weex
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Administrator\Desktop\test\weex\npm-debug.log

npm-debug.log文件

0 info it worked if it ends with ok
1 verbose cli [ 'D:\\ProgramFiles\\nodejs\\node.exe',
1 verbose cli   'D:\\ProgramFiles\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'serve' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle [email protected]~preserve: [email protected]
6 silly lifecycle [email protected]~preserve: no script for preserve, continuing
7 info lifecycle [email protected]~serve: [email protected]
8 verbose lifecycle [email protected]~serve: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~serve: PATH: D:\ProgramFiles\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\Administrator\Desktop\test\weex\node_modules\.bin;C:\Users\Administrator\AppData\Local\GitHub\PortableGit_25d850739bc178b2eb13c3e2a9faafea2f9143c0\cmd;C:\Users\Administrator\AppData\Local\GitHub\PortableGit_25d850739bc178b2eb13c3e2a9faafea2f9143c0\usr\bin;C:\Users\Administrator\AppData\Local\GitHub\PortableGit_25d850739bc178b2eb13c3e2a9faafea2f9143c0\usr\share\git-tfs;C:\Users\Administrator\AppData\Local\Apps\2.0\3CTLBDXD.5RC\HQ07DP3A.MC2\gith..tion_317444273a93ac29_0003.0000_c74cce3a838f9354;C:\Users\Administrator\AppData\Local\GitHub\lfs-amd64_1.1.0;C:\Windows\Microsoft.NET\Framework\v4.0.30319;C:\Users\Administrator\AppData\Local\Apps\2.0\3CTLBDXD.5RC\HQ07DP3A.MC2\gith..tion_317444273a93ac29_0003.0000_c74cce3a838f9354\NativeBinaries\x86;C:\ProgramData\Oracle\Java\javapath;C:\Python27\;C:\Python27\Scripts;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\TortoiseSVN\bin;D:\ProgramFiles\nodejs\;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Java\jdk1.8.0_66\bin;C:\Cocos\frameworks\cocos2d-x-3.9\tools\cocos2d-console\bin;D:\ProgramFiles\nodejs;D:\ProgramFiles\MongoDB\Server\3.0\bin;C:\Users\Administrator\AppData\Roaming\npm;C:\Users\Administrator\AppData\Local\atom\bin;C:\Program Files\Docker Toolbox
10 verbose lifecycle [email protected]~serve: CWD: C:\Users\Administrator\Desktop\test\weex
11 silly lifecycle [email protected]~serve: Args: [ '/d /s /c',
11 silly lifecycle   'npm run dev && npm run build && serve ./ -p 12580' ]
12 silly lifecycle [email protected]~serve: Returned: code: 1  signal: null
13 info lifecycle [email protected]~serve: Failed to exec serve script
14 verbose stack Error: [email protected] serve: `npm run dev && npm run build && serve ./ -p 12580`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (D:\ProgramFiles\nodejs\node_modules\npm\lib\utils\lifecycle.js:233:16)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at EventEmitter.emit (events.js:172:7)
14 verbose stack     at ChildProcess.<anonymous> (D:\ProgramFiles\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at ChildProcess.emit (events.js:172:7)
14 verbose stack     at maybeClose (internal/child_process.js:818:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\Users\Administrator\Desktop\test\weex
17 error Windows_NT 10.0.10240
18 error argv "D:\\ProgramFiles\\nodejs\\node.exe" "D:\\ProgramFiles\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "serve"
19 error node v5.0.0
20 error npm  v3.3.6
21 error code ELIFECYCLE
22 error [email protected] serve: `npm run dev && npm run build && serve ./ -p 12580`
22 error Exit status 1
23 error Failed at the [email protected] serve script 'npm run dev && npm run build && serve ./ -p 12580'.
23 error This is most likely a problem with the weex package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     npm run dev && npm run build && serve ./ -p 12580
23 error You can get their info via:
23 error     npm owner ls weex
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Data querying and manipulation with a server

How does Weex communicate with a server?

Would you be interested in building in a GraphQL API or can one be added? This would allow the weex components to have the data query definitions within them too! I am not the best JS programmer, but I think this example expresses the idea. It is probably wrong though and has wide reaching engineering implications, I know. Still.... 😄

<template>
  <div style="flex-direction: column;">
    <slider class="slider" interval="{{intervalValue}}" auto-play="{{isAutoPlay}}" >
      <div class="slider-pages" repeat="{{itemList}}" onclick="goWeexSite" >
        <image class="thumb" src="{{pictureUrl}}"></image>
        <text class="title">{{title}}</text>
      </div>
    </slider>

  <div class="container" onclick="goWeexSite" >
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
       <text class="title">JavaScript</text>
    </div>
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3uo9"></image>
       <text class="title">Java</text>
    </div>
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE31hq"></image>  
       <text class="title">Objective C</text>
    </div>
  </div>
</template>

<style>
  .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb {width: 200; height: 200; }
  .title {text-align: center ; flex: 1; color: grey; font-size: 50; }
  .slider {
        margin: 18;
        width: 714;
        height: 230;
  }
  .slider-pages {
        flex-direction: row;
        width: 714;
        height: 200;
  }  
</style>

<script>
module.exports = {
    data: sliderDemo,
    methods: {
      goWeexSite: function () {
        this.$openURL('http://alibaba.github.io/weex/')
      }       
    }
}
</script>

<data>
  weexQL.createContainer(SliderDemo, {
  fragments: {
    sliderDemo: () => weexQL.query
      fragment on SliderDemo {
          intervalValue,
          isShowIndicators,
          isAutoPlay,
          itemList{...}
      }
  }
</data>

I just think the concept of GraphQL and how Relay works with React is exceptional. It puts everything anyone might need to think about in one single file.

Scott

[Discuss] eventTarget and Element.getBoundingClientRect() feature support

在一些复杂的交互场景中,例如网易新闻中的「点击文章中的视频占位图,展开播放视频」的效果,需要获取到当前点击的占位图的位置,因此需要WEEX在点击eventTarget的时候通过类似DOM操作getBoundingClientRect来获取元素距离屏幕视野top和left的位置值,然后再创建动画,因此,需要weex提供类似getBoundingClientRect这样的api,返回被点击元素的top,left,width,height的值

npm run serve报错

[email protected] build /Users/sh/Desktop/wbc_learn/weex-dev
npm run build:js-framework && npm run build:h5-render

[email protected] build:js-framework /Users/sh/Desktop/wbc_learn/weex-dev
cd ./src/js-framework && npm run build && cd ../../

[email protected] build /Users/sh/Desktop/wbc_learn/weex-dev/src/js-framework
webpack --config ./webpack.config.js

module.js:341
throw err;
^

Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object. (/Users/sh/Desktop/wbc_learn/weex-dev/src/js-framework/webpack.config.js:1:77)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)

第一次运行出现:ReferenceError: __weex_define__ is not defined

**Platform:Windows

Android Studio logcat message:**

04-27 15:01:09.739 19279-19279/com.alibaba.weex E/WXTBUtil: isSupportSmartBar:false
04-27 15:01:09.740 19279-19279/com.alibaba.weex E/WXTBUtil: actionbar:147
04-27 15:01:09.740 19279-19279/com.alibaba.weex E/WXTBUtil: status:63
04-27 15:01:09.741 19279-19279/com.alibaba.weex E/WXTBUtil: height:1584
04-27 15:01:09.799 19279-19934/com.alibaba.weex E/jsengine: ReportException :undefined:49: ReferenceError: weex_define is not defined
04-27 15:01:09.800 19279-19934/com.alibaba.weex E/jsengine: ReportException : ReferenceError: weex_define is not defined
at Object.eval (eval at init (unknown source), :49:3)
at webpack_require (eval at init (unknown source), :22:30)
at eval (eval at init (unknown source), :42:18)
at eval (eval at init (unknown source), :45:10)
at AppInstance.init (:6557:4)
at createInstance (:2021:24)
04-27 15:01:09.801 19279-19934/com.alibaba.weex E/weex: reportJSException >>>> instanceId:3, exception function:createInstance, exception:ReferenceError: weex_define is not defined

qq 20160427150415

INSTALL_FAILED_NO_MATCHING_ABIS

Throw error when launch from android studio:

Installing com.alibaba.weex
DEVICE SHELL COMMAND: pm install -r "/data/local/tmp/com.alibaba.weex"
    pkg: /data/local/tmp/com.alibaba.weex
Failure [INSTALL_FAILED_NO_MATCHING_ABIS]

img doesn't support data url

.i { width:20px; height:20px;}

<img class='i' src='data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7' / >
Nothing show.

android sdk cannot be build standalone

weex android sdk current cannot be built standalone as the root build.gradle which defines

allprojects {
    repositories {
        jcenter()
    }
}

is in playground directory.

2016-04-22 21 52 23

See the screeshot, some dependency cannot be found.

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.