一個 weex 編寫的 App

Hello Weex

簡介

hello-weex包括一個Weex App，和自己擴展的WeexiOSKit。

weex version為v0.7.0 - 10月16日的版本

Weex App 的代碼位于examples目錄下

WeexiOSKit的代碼位于 ios/playground/WeexDemo/WeexiOSKit 目錄下

運行

1. 環境
   1. 安裝 Node.js 4.0+
   2. 在根目錄下
      1. npm install , 安裝工程
      2. ./start 到這里web版已經運行起來，瀏覽器輸入 http://localhost:12580/ 就能看到了。
      </li>
   3. Install iOS Environment
   4. Install CocoaPods
   </ol> </li>
   5. 運行 iOS playground
      1. cd ios/playground
      2. pod install
      3. 在 Xcode里打開 WeexDemo.xcworkspace
      4. 點擊Xcode的 ( Run 按鈕) 或者用快捷鍵 cmd + r
      5. 如果你想在真機上運行. 在 DemoDefine.h , 修改 CURRENT_IP 為你自己的IP
      </ol> </li> </ol>

      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" > 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="; sdsd</seek-bar></code></pre> 
        
      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 .
       
        
       
       
        
       
       
        
       
       
        
      來自：https://github.com/coderyi/hello-weex