Skip to content

Commit 68b75c4

Browse files
JinjiangJinjiang
committed
Merge branch 'jsfm-feature-vue' into jsfm-feature-build-vue
2 parents 57d9f55 + dc4f879 commit 68b75c4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+3670
-3
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Weex
22

3+
*note: just use `npm run vue` after `npm install` to run vue 2.0*
4+
35
> A framework for building Mobile cross-platform UI.
46
57
[![CircleCI](https://circleci.com/gh/alibaba/weex/tree/dev.svg?style=svg&circle-token=b83b047a3a01f6ec26458a455530a5ddc261925f)](https://circleci.com/gh/alibaba/weex/tree/dev) [![Gitter](https://img.shields.io/gitter/room/weexteam/cn.svg?maxAge=2592000)](https://gitter.im/weexteam) <sub>(English Gitter)</sub> [![Gitter](https://img.shields.io/gitter/room/weexteam/cn.svg?maxAge=2592000)](https://gitter.im/weexteam/cn) <sub>(Chinese 中文聊天室)</sub>

‎build/webpack.examples.vue.config.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
var path = require('path');
2+
var fs = require('fs');
3+
var webpack = require('webpack');
4+
5+
var entry = {};
6+
7+
function walk(dir) {
8+
dir = dir || '.'
9+
var directory = path.join(__dirname, '../examples', dir);
10+
fs.readdirSync(directory)
11+
.forEach(function(file) {
12+
var fullpath = path.join(directory, file);
13+
var stat = fs.statSync(fullpath);
14+
var extname = path.extname(fullpath);
15+
if (stat.isFile() && extname === '.vue') {
16+
var name = path.join('examples', 'build', dir, path.basename(file, extname));
17+
entry[name] = fullpath + '?entry=true';
18+
} else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
19+
var subdir = path.join(dir, file);
20+
walk(subdir);
21+
}
22+
});
23+
}
24+
25+
walk();
26+
27+
var banner = '// { "framework": "Vue" }\n'
28+
29+
var bannerPlugin = new webpack.BannerPlugin(banner, {
30+
raw: true
31+
})
32+
33+
module.exports = {
34+
entry: entry,
35+
output : {
36+
path: '.',
37+
filename: '[name].js'
38+
},
39+
module: {
40+
loaders: [
41+
{
42+
test: /\.vue(\?[^?]+)?$/,
43+
loader: 'weex-vue-loader'
44+
}
45+
]
46+
},
47+
plugins: [bannerPlugin]
48+
}

‎examples/vue/include/example-list-item.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<wxc-list-item v-on:click="redirect">
3+
<text class="item-txt">{{ title }}</text>
4+
</wxc-list-item>
5+
</template>
6+
7+
<style>
8+
.item-txt {
9+
font-size: 48px;
10+
color: #555;
11+
}
12+
</style>
13+
14+
<script>
15+
var event = require('@weex-module/event')
16+
module.exports = {
17+
components: {
18+
'wxc-list-item': require('./wxc-list-item.vue')
19+
},
20+
props: {
21+
title: {
22+
default: '456'
23+
},
24+
url: {
25+
default: ''
26+
}
27+
},
28+
methods: {
29+
redirect: function() {
30+
event.openURL(this.url)
31+
}
32+
}
33+
}
34+
</script>

‎examples/vue/include/example-list.vue

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<list>
3+
<cell v-for="item in items" append="tree">
4+
<example-list-item :title="item.title" :url="item.url"></example-list-item>
5+
</cell>
6+
</list>
7+
</template>
8+
9+
<script>
10+
module.exports = {
11+
components: {
12+
'example-list-item': require('./example-list-item.vue')
13+
},
14+
props: {
15+
dir: {
16+
default: 'examples'
17+
}, // examples, test ...
18+
items: {
19+
default: [
20+
{name: 'hello', title: 'Hello World', url: ''}
21+
]
22+
}
23+
},
24+
created: function() {
25+
var bundleUrl = this.$getConfig().bundleUrl;
26+
console.log('hit', bundleUrl);
27+
var nativeBase;
28+
var isAndroidAssets = bundleUrl.indexOf('your_current_IP') >= 0;
29+
var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
30+
if (isAndroidAssets) {
31+
nativeBase = 'file://assets/';
32+
}
33+
else if (isiOSAssets) {
34+
// file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/
35+
// file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/
36+
nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
37+
}
38+
else {
39+
var host = 'localhost:12580';
40+
var matches = /\/\/([^\/]+?)\//.exec(this.$getConfig().bundleUrl);
41+
if (matches && matches.length >= 2) {
42+
host = matches[1];
43+
}
44+
nativeBase = '//' + host + '/' + this.dir + '/build/';
45+
}
46+
var h5Base = './index.html?page=./' + this.dir + '/build/';
47+
// in Native
48+
var base = nativeBase;
49+
if (typeof window === 'object') {
50+
// in Browser or WebView
51+
base = h5Base;
52+
}
53+
54+
for (var i in this.items) {
55+
var item = this.items[i];
56+
if (!item.url) {
57+
item.url = base + item.name + '.js';
58+
}
59+
}
60+
// see log in Android Logcat
61+
if (this.items.length) console.log('hit', this.items[0].url);
62+
}
63+
}
64+
</script>

‎examples/vue/include/foo.vue

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<text>{{ title }}</text>
3+
</template>
4+
5+
<script>
6+
module.exports = {
7+
props: ['title'],
8+
data: function () {
9+
return {title: 'x'}
10+
}
11+
}
12+
</script>

‎examples/vue/include/h1.vue

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<text class="h1">{{value}}</text>
3+
</template>
4+
5+
<style>
6+
.h1 {font-size: 64px; font-weight: bold;
7+
padding: 20px; margin-top: 20px; margin-bottom: 20px;
8+
background-color: #eee;}
9+
</style>
10+
11+
<script>
12+
exports.props = ['value']
13+
</script>

‎examples/vue/include/h2.vue

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<text class="h2">{{value}}</text>
3+
</template>
4+
5+
<style>
6+
.h2 {font-size: 48px; font-weight: bold;
7+
padding: 20px; margin-top: 20px; margin-bottom: 20px;
8+
background-color: #eee;}
9+
</style>
10+
11+
<script>
12+
exports.props = ['value']
13+
</script>

‎examples/vue/include/h3.vue

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<text class="h3">{{value}}</text>
3+
</template>
4+
5+
<style>
6+
.h3 {font-size: 36px; font-weight: bold;
7+
padding: 20px; margin-top: 20px; margin-bottom: 20px;
8+
background-color: #eee;}
9+
</style>
10+
11+
<script>
12+
exports.props = ['value']
13+
</script>

‎examples/vue/include/wxc-list-item.vue

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div
3+
class="item" :style="{'background-color': bgColor}"
4+
v-on:click="click"
5+
v-on:touchstart="touchstart" v-on:touchend="touchend">
6+
<slot></slot>
7+
</div>
8+
</template>
9+
10+
<script>
11+
module.exports = {
12+
data: function () {
13+
return {
14+
bgColor: '#ffffff'
15+
}
16+
},
17+
methods: {
18+
click: function () {
19+
this.$emit('click')
20+
},
21+
touchstart: function() {
22+
// FIXME android touch
23+
// TODO adaptive opposite bgColor
24+
// this.bgColor = '#e6e6e6';
25+
},
26+
touchend: function() {
27+
// FIXME android touchend not triggered
28+
// this.bgColor = '#ffffff';
29+
}
30+
}
31+
}
32+
</script>
33+
34+
<style>
35+
.item {
36+
padding-top: 25px;
37+
padding-bottom: 25px;
38+
padding-left: 35px;
39+
padding-right: 35px;
40+
height: 160px;
41+
justify-content: center;
42+
/*margin-bottom: 1px; FUTURE */
43+
border-bottom-width: 1px;
44+
border-color: #dddddd;
45+
}
46+
</style>

‎examples/vue/index.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<example-list :items="items" dir="examples"></example-list>
3+
</template>
4+
5+
<script>
6+
module.exports = {
7+
components: {
8+
'example-list': require('./include/example-list.vue')
9+
},
10+
data: {
11+
items: [
12+
// `name` key is the example filename without '.vue'
13+
{name: 'vue/syntax/hello-world', title: 'Hello World'},
14+
{name: 'vue/showcase/itemlist', title: 'List'},
15+
{name: 'vue/showcase/calculator', title: 'Calculator'},
16+
{name: 'vue/showcase/new-fashion', title: 'Activity Page'}
17+
]
18+
}
19+
}
20+
</script>

‎examples/vue/showcase/calculator.vue

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<template>
2+
<div style="padding: 5px;">
3+
<text class="result">{{result}}</text>
4+
<div class="row">
5+
<text class="btn" @click="input">1</text>
6+
<text class="btn" @click="input">2</text>
7+
<text class="btn" @click="input">3</text>
8+
<text class="btn btn-operator" @click="input">+</text>
9+
</div>
10+
<div class="row">
11+
<text class="btn" @click="input">4</text>
12+
<text class="btn" @click="input">5</text>
13+
<text class="btn" @click="input">6</text>
14+
<text class="btn btn-operator" @click="input">-</text>
15+
</div>
16+
<div class="row">
17+
<text class="btn" @click="input">7</text>
18+
<text class="btn" @click="input">8</text>
19+
<text class="btn" @click="input">9</text>
20+
<text class="btn btn-operator" @click="input">*</text>
21+
</div>
22+
<div class="row">
23+
<text class="btn" @click="input">0</text>
24+
<text class="btn" @click="input">.</text>
25+
<text class="btn" @click="clear">AC</text>
26+
<text class="btn btn-operator" @click="calculate">=</text>
27+
</div>
28+
</div>
29+
</template>
30+
31+
<style>
32+
.row {
33+
flex-direction: row;
34+
}
35+
36+
.result {
37+
text-align: right;
38+
background-color: #666;
39+
font-size: 40px;
40+
color: white;
41+
}
42+
43+
.btn {
44+
flex: 1;
45+
text-align: center;
46+
background-color: #eee;
47+
font-size: 36px;
48+
}
49+
50+
.btn, .result {
51+
height: 100px;
52+
padding: 30px;
53+
margin: 5px;
54+
}
55+
56+
.btn-operator {
57+
background-color: #669;
58+
font-size: 40px;
59+
color: white;
60+
}
61+
</style>
62+
63+
<script>
64+
var OP = ['+', '-', '*', '/'];
65+
module.exports = {
66+
data: {
67+
result: '',
68+
inputs: []
69+
},
70+
methods: {
71+
input: function(e) {
72+
var value = e.target.attr['value'];
73+
var inputs = this.inputs;
74+
var lastOne = inputs.length ? inputs[inputs.length - 1] : '';
75+
if (OP.indexOf(lastOne) > -1 && OP.indexOf(value) > -1) {
76+
return;
77+
}
78+
inputs.push(value);
79+
var buf = [], char;
80+
for (var i = 0; i < inputs.length; i++) {
81+
char = inputs[i];
82+
if (OP.indexOf(char) > -1) {
83+
char = ' ' + char + ' ';
84+
}
85+
buf.push(char);
86+
}
87+
this.result = buf.join('');
88+
},
89+
calculate: function() {
90+
var result = eval(this.result);
91+
this.inputs = [result];
92+
this.result = result;
93+
},
94+
clear: function() {
95+
this.inputs = [];
96+
this.result = '';
97+
}
98+
}
99+
}
100+
</script>

0 commit comments

Comments
 (0)