一个 weex 编写的 App
CelinaFulle
8年前
<h2><strong>Hello Weex</strong></h2> <h3>简介</h3> <p>hello-weex包括一个Weex App,和自己扩展的WeexiOSKit。</p> <p>weex version为v0.7.0 - 10月16日的版本</p> <p>Weex App 的代码位于examples目录下</p> <p>WeexiOSKit的代码位于 ios/playground/WeexDemo/WeexiOSKit 目录下</p> <h3><strong>运行</strong></h3> <ol> <li>环境 <ol> <li>安装 <a href="/misc/goto?guid=4958189735229147892" rel="nofollow,noindex">Node.js</a> 4.0+</li> <li>在根目录下 <ol> <li>npm install , 安装工程</li> <li>./start 到这里web版已经运行起来,浏览器输入 http://localhost:12580/ 就能看到了。</li> </ol> </li> <li>Install <a href="/misc/goto?guid=4959721925366439090" rel="nofollow,noindex">iOS Environment</a></li> <li>Install <a href="/misc/goto?guid=4958993381732790925" rel="nofollow,noindex">CocoaPods</a></li> </ol> </li> <li>运行 iOS playground <ol> <li>cd ios/playground</li> <li>pod install</li> <li>在 Xcode里打开 WeexDemo.xcworkspace</li> <li>点击Xcode的 ( Run 按钮) 或者用快捷键 cmd + r</li> <li>如果你想在真机上运行. 在 DemoDefine.h , 修改 CURRENT_IP 为你自己的IP</li> </ol> </li> </ol> <h3><strong>Weex App: Monkey for GitHub</strong></h3> <p>Monkey主要是用来展示GitHub上的开发者的排名,以及仓库的排名。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5a23114ecd236f077e4f500a14e9d330.png"> <img src="https://simg.open-open.com/show/1d3f4b6fecc8cf20730d00d44442bbb2.png"></p> <h3><strong>WeexiOSKit</strong></h3> <p>WeexiOSKit主要是扩展了一些iOS的Component和Module,这样在weex端就可以很好的使用了。</p> <p>Component 包括segmented-control(UISegmentedControl),stepper(UIStepper),seek-bar(UISeekBar),search-bar(UISearchBar),date-picker(UIDatePicker)。</p> <p>Module主要包括actionSheet(UIActionSheet),MBProgressHUD(MBProgressHUD,loading视图),geolocation(CLLocationManager坐标),vibration(震动)。</p> <p><strong>Component</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/9805afcaa3170e648fb2a2100fbcd35a.png"> <img src="https://simg.open-open.com/show/7273ec2dff5f1d2c1abd856e2de769cc.png"></p> <p><strong>Module</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/6d19e572596fcf8ec1cbf24675f44d4c.png"> <img src="https://simg.open-open.com/show/6e9c965ee31857ddedc9cdd90e1ac3c4.png"> <img src="https://simg.open-open.com/show/694baa5c5fb7eb3efc14baeaefb5ff70.png"></p> <h3><strong>WeexiOSKit使用</strong></h3> <p><strong>Component</strong></p> <p>segmented-control:支持iOS & web</p> <p>属性:items(segmented-control里的项目,以分号隔开),momentary(是否设置选中状态),tint-color(颜色)</p> <p>event: onchange</p> <pre> <code class="language-javascript"><segmented-control style="width: 240;height: 120;margin-top:20" items="hello;world" momentary= "false" tint-color= "red" onchange="onSCChangeAction"></segmented-control></code></pre> <p>stepper</p> <p>属性: value(当前的值),step-value(默认为1),minimum-value(最小值),maximum-value="100(最大值),tint-color(颜色)</p> <p>event: onchange</p> <pre> <code class="language-javascript"><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></code></pre> <p>seek-bar</p> <p>属性: 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</p> <p>event: onchange</p> <pre> <code class="language-javascript"><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" > sdsd</seek-bar> <seek-bar style=" width: 160;height: 140;margin-top:20;margin-left:220" minimum-value="0" maximum-value="100" value="50" onchange="imageSeekBarChange" thumb-image-src="https://simg.open-open.com/show/c5772030120d7ac51f72a42d4d6b9304.png" maximum-track-image-src="https://simg.open-open.com/show/cf138c09ff1ada617bf09c586af36e01.png" minimum-track-image-src="https://simg.open-open.com/show/da6c76b05a96485700675cd88c578a55.png"> sdsd</seek-bar></code></pre> <p>search-bar</p> <p>属性: tint-color(颜色)</p> <p>event: onclick</p> <pre> <code class="language-javascript"><search-bar style="width: 300;height: 120;margin-top:20" tint-color= "red" onclick="onclicksearch"></search-bar></code></pre> <p>date-picker</p> <p>属性: tint-color(颜色)</p> <p>event: onchange</p> <pre> <code class="language-javascript"><date-picker style="width: 640;height: 400;margin-top:20" tint-color= "red" onchange="onclickdatepicker" ></date-picker></code></pre> <p><strong>Module</strong></p> <p>MBProgressHUD为loading模块 函数:showHUD(显示HUD,参数为title,detail,mode[枚举值indicator/text],cancelTitle,contentColor),hideHUD隐藏HUD()</p> <pre> <code class="language-javascript">toast: function() { var MBProgressHUD = require('@weex-module/MBProgressHUD'); MBProgressHUD.showHUD({title:"loading",contentColor:"red",mode:"indicator"}); setTimeout(function () { MBProgressHUD.hideHUD(); }, 2000) },</code></pre> <p>actionSheet 函数:actionSheetShow(参数为cancelButtonTitle,destructiveButtonTitle,otherButtonTitles(数组),以及一个回调)</p> <pre> <code class="language-javascript">actionSheet: function() { var me= this; var actionSheet = require('@weex-module/actionSheet'); actionSheet.actionSheetShow({ 'cancelButtonTitle': 'cancel', 'destructiveButtonTitle': 'destructive', 'otherButtonTitles': me.buttons }, function(result) { }); },</code></pre> <p>geolocation 定位模块</p> <p>函数getCurrentPosition(参数accuracy,distanceFilter)</p> <pre> <code class="language-javascript">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) { }); },</code></pre> <p>vibration 函数:vibrate(真机震动)</p> <pre> <code class="language-javascript">vibrate: function() { var vibration = require('@weex-module/vibration'); vibration.vibrate() }</code></pre> <h3><strong>weex-web-kit</strong></h3> <p>weex-web-kit代码位于 html5/browser/weex-web-kit 目录下</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b76fc10332bb1827238feb715573e4a6.png"></p> <pre> <code class="language-javascript"><segmented-control style="width: 240;height: 120;margin-top:20" items="hello;world" momentary= "false" tint-color= "red" onchange="onChangeAction"></segmented-control></code></pre> <p><strong>Licenses</strong></p> <p>All source code is licensed under the MIT License .</p> <p> </p> <p style="text-align:center"> </p> <p> </p> <p>来自:https://github.com/coderyi/hello-weex</p> <p> </p>