Hello Weex
简介
hello-weex包括一个Weex App,和自己扩展的WeexiOSKit。
weex version为 v0.7.0 - 10月16日的版本
Weex App 的代码位于 examples目录下
WeexiOSKit的代码位于 ios/playground/WeexDemo/WeexiOSKit目录下
运行
- 环境
0. 安装 Node.js 4.0+
0. 在根目录下
0.
npm install
, 安装工程 0../start
到这里web版已经运行起来,浏览器输入http://localhost:12580/
就能看到了。 0. Install iOS Environment 0. Install CocoaPods - 运行 iOS playground
0.
cd ios/playground
0.pod install
0. 在 Xcode里打开WeexDemo.xcworkspace
0. 点击Xcode的 (Run
按钮) 或者用快捷键cmd + r
0. 如果你想在真机上运行. 在DemoDefine.h
, 修改CURRENT_IP
为你自己的IP
Weex App: Monkey for GitHub
Monkey主要是用来展示GitHub上的开发者的排名,以及仓库的排名。
WeexiOSKit
WeexiOSKit主要是扩展了一些iOS的Component和Module,这样在weex端就可以很好的使用了。
Component 包括segmented-control(UISegmentedControl),stepper(UIStepper),seek-bar(UISeekBar),search-bar(UISearchBar),date-picker(UIDatePicker)。
Module主要包括actionSheet(UIActionSheet),MBProgressHUD(MBProgressHUD,loading视图),geolocation(CLLocationManager坐标),vibration(震动)。
Component
Module
WeexiOSKit使用
Component
segmented-control:支持iOS & web
属性:items(segmented-control里的项目,以分号隔开),momentary(是否设置选中状态),tint-color(颜色)
event:onchange
<segmented-control
style="width: 240;height: 120;margin-top:20"
items="hello;world"
momentary= "false"
tint-color= "red"
onchange="onSCChangeAction">
</segmented-control>
stepper
属性: value(当前的值),step-value(默认为1),minimum-value(最小值),maximum-value="100(最大值),tint-color(颜色)
event:onchange
<stepper
style="width: 240;height: 120;margin-top:20"
value="20"
step-value= "10"
minimum-value="0"
maximum-value="100"
tint-color= "red"
onchange="onChangeAction">
</stepper>
seek-bar
属性: value(当前的值),minimum-value(最小值),maximum-value="100(最大值),minimum-track-tint-color,maximum-track-tint-color, thumb-tint-color, minimum-track-image-src,maximum-track-image-src,thumb-image-src
event:onchange
<seek-bar
style=" width: 400;height: 70;margin-top:20;margin-left:20"
minimum-value="0"
maximum-value="100"
value="50"
onchange="seekBarChange"
minimum-track-tint-color="blue"
maximum-track-tint-color="blue"
thumb-tint-color="red" >
</seek-bar>
<seek-bar
style=" width: 160;height: 140;margin-top:20;margin-left:220"
minimum-value="0"
maximum-value="100"
value="50"
thumb-image-src="https://raw.githubusercontent.com/jainsourabh2/SayIt/master/iOS/SayIt/SayIt/rating1.png"
maximum-track-image-src="http://pic002.cnblogs.com/images/2012/348285/2012042611243397.png"
minimum-track-image-src="http://pic002.cnblogs.com/images/2012/348285/2012042611244465.png"
onchange="imageSeekBarChange">
</seek-bar>
search-bar
属性: tint-color(颜色)
event:onclick
<search-bar
style="width: 300;height: 120;margin-top:20"
tint-color= "red"
onclick="onclicksearch">
</search-bar>
date-picker
属性: tint-color(颜色)
event:onchange
<date-picker
style="width: 640;height: 400;margin-top:20"
tint-color= "red"
onchange="onclickdatepicker" >
</date-picker>
Module
MBProgressHUD为loading模块 函数:showHUD(显示HUD,参数为title,detail,mode[枚举值indicator/text],cancelTitle,contentColor),hideHUD隐藏HUD()
toast: function() {
var MBProgressHUD = require('@weex-module/MBProgressHUD');
MBProgressHUD.showHUD({title:"loading",contentColor:"red",mode:"indicator"});
setTimeout(function () {
MBProgressHUD.hideHUD();
}, 2000)
}
actionSheet 函数:actionSheetShow(参数为cancelButtonTitle,destructiveButtonTitle,otherButtonTitles(数组),以及一个回调)
actionSheet: function() {
var me= this;
var actionSheet = require('@weex-module/actionSheet');
actionSheet.actionSheetShow({
'cancelButtonTitle': 'cancel',
'destructiveButtonTitle': 'destructive',
'otherButtonTitles': me.buttons
}, function(result) {
});
}
geolocation 定位模块
函数getCurrentPosition(参数accuracy,distanceFilter)
geolocationAction: function() {
var me= this;
var geolocation = require('@weex-module/geolocation');
geolocation.getCurrentPosition({
'accuracy': '1000',
'distanceFilter': '10'
}, function(result) {
me.geolocationValue = JSON.stringify(result);
}, function(result) {
});
}
vibration 函数:vibrate(真机震动)
vibrate: function() {
var vibration = require('@weex-module/vibration');
vibration.vibrate()
}
weex-web-kit
weex-web-kit代码位于html5/browser/weex-web-kit目录下
<segmented-control
style="width: 240;height: 120;margin-top:20"
items="hello;world"
momentary= "false"
tint-color= "red"
onchange="onChangeAction">
</segmented-control>
Licenses
All source code is licensed under the MIT License.