編譯失敗3tabBar

㈠ 如何利用weui作為前端來開發

先引用樣式文件. 請在github上下載對應的文件.
下載地址為: 3次未審核, 搜索吧.

下載之後的目錄結構為:
dist : 編譯之後的目錄, 裡面的文件可以直接使用
src : 源碼目錄

可以打開dist下example目錄, 這個是官方的例子文件. 裡面比較全的基本使用方法.

打開example目錄下的index.html 就可以看到官方的例子了.
這里需要說明一下, 這個官方使用的zepto.js框架. 這個框架更加適用移動端.

開始使用, 如果使用呢? 第一步先把css文件引用到頁面中.
<link rel="stylesheet" type="text/css" href="路徑地址" />
然後, 就可以使用官方的樣式了. 首先來說明一下button.
使用方法:class="weui_btn weui_btn_primary"
其中屬性有:
weui_btn weui_btn_primary
weui_btn weui_btn_warn
weui_btn weui_btn_default
三種, 如果你想擴展, 直接增加響應的樣式就可以了.

Tab使用:
tab包含兩種: navbar 和 tabbar
使用方法.
navbar :
<div class="weui_tab">
<div class="weui_navbar">
<div class="weui_navbar_item weui_bar_item_on"> 選項一</div>
<div class="weui_navbar_item"> 選項二 </div>
<div class="weui_navbar_item">選項三 </div>
</div>
<div class="weui_tab_bd"></div>
</div>
weui_bar_item_on 為選中項
tabbar:
<div class="weui_tabbar">
<a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_button.png" alt="">
</div>
<p class="weui_tabbar_label">微信</p>
</a>
<a href="javascript:;" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_msg.png" alt="">
</div>
<p class="weui_tabbar_label">通訊錄</p>
</a>
<a href="javascript:;" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_article.png" alt="">
</div>
<p class="weui_tabbar_label">發現</p>
</a>
<a href="javascript:;" class="weui_tabbar_item">
<div class="weui_tabbar_icon">
<img src="./images/icon_nav_cell.png" alt="">
</div>
<p class="weui_tabbar_label">我</p>
</a>
</div>
圖片來自官方例子中的素材.

Toast
彈出層: 一個是彈出提示數據.
<div id="toast">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<i class="weui_icon_toast"></i>
<p class="weui_toast_content">已完成</p>
</div>
</div>
使用$('#toast').show();進行顯示數據.

searchBar搜索框
簡單的搜索, 搜索世界的大不同, 不是所有的網站都可以

圖標的使用.
<i class="weui_icon_msg weui_icon_success"></i>
<i class="weui_icon_msg weui_icon_info"></i>
<i class="weui_icon_msg weui_icon_warn"></i>
<i class="weui_icon_msg weui_icon_waiting"></i>
<i class="weui_icon_safe weui_icon_safe_success"></i>
<i class="weui_icon_safe weui_icon_safe_warn"></i>

Panel的使用
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">圖文組合列表</div>
<div class="weui_panel_bd">
<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
<div class="weui_media_hd">
<img class="weui_media_appmsg_thumb" src="" alt="">
</div>
<div class="weui_media_bd">
<h4 class="weui_media_title">標題一</h4>
<p class="weui_media_desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的運行軌道。</p>
</div>
</a>
<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
<div class="weui_media_hd">
<img class="weui_media_appmsg_thumb" src="" alt="">
</div>
<div class="weui_media_bd">
<h4 class="weui_media_title">標題二</h4>
<p class="weui_media_desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的運行軌道。</p>
</div>
</a>
</div>
<a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
</div>

圖片裡面沒有填寫地址, 請您自己填寫信息.

㈡ 如何創建一個Tab bar Application

我們假如創建一個有三個選項的工程，並且三個相關的viewcontroller分別是普通的，table View,帶table view的導航模式的，並且命名為FViewController, SViewController,TViewController。

選擇新建一個Tab bar Application,並把工程名稱命名為tTabApp。

建好後的工程目錄如下：

在FViewController.m中修改一個函數

- (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil

{

self= [superinitWithNibName:nibNameOrNilbundle:nibBundleOrNil];

if(self) {

// Custom initialization

//self.title = @"第一個";

self.tabBarItem.title=@"第一個";

self.tabBarItem.image= [UIImageimageNamed:@"first"];

}

returnself;

}

修改SViewController中幾個函數如下：

- (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil

{

self= [superinitWithNibName:nibNameOrNilbundle:nibBundleOrNil];

if(self) {

// Custom initialization

self.tabBarItem.title=@"第二個";

self.tabBarItem.image= [UIImageimageNamed:@"second"];

}

returnself;

}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView*)tableView

{

#warning Potentially incomplete method implementation.

刪除上面的一樣，這行永遠會在編譯期間生成一個警告

// Return the number of sections.

return1;

上面一行0改為1

}

- (NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section

{

#warning Incomplete method implementation.

// Return the number of rows in the section.

return1;

}

- (UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath

{

staticNSString*CellIdentifier =@"Cell";

UITableViewCell*cell = [:CellIdentifier];

if(cell ==nil) {

cell = [[[UITableViewCellalloc]initWithStyle::CellIdentifier]autorelease];

}

cell.textLabel.text=@"1111";

上面這行是加入的，

// Configure the cell...

returncell;

}

在TViewController中做同樣的更改，並且注意cell.textLabel.text=@"1111";改為cell.textLabel.text=@"222222";。以示區分。

- (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil

{

self= [superinitWithNibName:nibNameOrNilbundle:nibBundleOrNil];

if(self) {

// Custom initialization

self.title=@"第三個";

self.tabBarItem.image= [UIImageimageNamed:@"second"];

}

returnself;

}

在tcAppDelegate.m文件中加入import如下：

#import"FViewController.h"

#import"SViewController.h"

#import"TViewController.h"

在tcAppDelegate.m文件中修改函數

- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions

如下：

- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions

{

self.window= [[[UIWindowalloc]initWithFrame:[[UIScreenmainScreen]bounds]]autorelease];

// Override point for customization after application launch.

UIViewController*viewController1 = [[FViewControlleralloc]initWithNibName:@"FViewController"bundle:nil];

UIViewController*viewController2 = [[SViewControlleralloc]initWithNibName:@"SViewController"bundle:nil];

UIViewController*viewController3 = [[TViewControlleralloc]initWithNibName:@"TViewController"bundle:nil];

UINavigationController*navigationController = [[UINavigationControlleralloc]initWithRootViewController:viewController3];

self.tabBarController= [[[UITabBarControlleralloc]init]autorelease];

self.tabBarController.viewControllers= [NSArrayarrayWithObjects:viewController1, viewController2, navigationController,nil];

[viewController1release];

[viewController2release];

[viewController3release];

[navigationControllerrelease];

self.window.rootViewController=self.tabBarController;

[self.windowmakeKeyAndVisible];

returnYES;

}

㈢ splitview怎麼設置

SplitView的設置可以通過以下步驟進行（以IB為主編程為輔的方法）：

1. 使用xCode的SplitView模版：

   • 步驟：打開xCode，選擇創建一個新項目，並從模版中選擇「Split View Controller」模版。這將為你生成一個包含SplitView的基礎項目結構。
   • 目的：此步驟確保你的項目有一個預設的SplitView布局，便於後續開發和定製。

2. 編譯並保存項目：

   • 步驟：在創建好SplitView模版項目後，進行編譯以確保項目沒有基礎錯誤。編譯成功後，保存項目。
   • 目的：編譯是檢查代碼和配置是否有誤的重要步驟，保存項目則確保你的工作不會丟失。

3. （可選）結合TabBar模版：

   • 步驟：雖然這一步不是設置SplitView的必需步驟，但如果你想在SplitView項目中加入TabBar功能，可以另行創建一個TabBar模版項目，並參考其配置來修改你的SplitView項目。
   • 注意：這一步更多是為了擴展功能，而非SplitView設置的直接步驟。

重點說明：- 在使用IB（Interface Builder）進行界面設計時，你可以通過拖拽組件和調整屬性來定製SplitView的外觀和行為。- 編程部分通常涉及對SplitView的代理方法和數據源方法進行實現，以滿足特定的功能需求。但在以IB為主的方法中，這部分編程工作相對較少，更多是通過IB的界面設計來完成。

通過以上步驟，你可以設置並初步定製一個SplitView界面。如果需要進一步的功能開發或界面調整，可以深入學習xCode和Cocoa框架的相關文檔。