Sencha Touch快速入門（譯）

時間 2019-11-26

標籤 sencha touch 快速入門简体版

原文原文鏈接

翻譯自：http://www.sencha.com/learn/sencha-touch-quick-start/javascript

一、下載Sencha Touch SDK——下載連接php

二、安裝Safari或Chrome——IE不適合測試Sencha touch application，Sencha只在WebKit-based的瀏覽器或設備上運行。css

三、安裝測試服務器——雖然Sencha能夠在客戶端直接運行，但服務器端的功能更加齊全。html

IIS或XAMPP等軟件都可使用java

四、解壓Sencha Touch SDKandroid

解壓或拷貝Sencha到C:\xampp\htdocs目錄下，並重命名爲touchgit

如今能夠進行測試了： http://localhost/touchgithub

5. 安裝Android SDK（可選）web

若是想建立直接的AVD（Android Virtual Device）,能夠在本地機器上安裝Android SDKapache

6. 在真實設備上測試代碼（可選）

確保你的計算機沒有運行任何防火牆軟件，阻塞遠程客戶（remote client）訪問你的web server.
運行DOS命令（cmd）ipconfig查詢你的IP地址，用該IP地址代替localhost

這樣你就能使用你的真實設備（手機）訪問服務器了。

你可能會遇到以下安全問題：

解決方法：

打開C:\xampp\apache\conf\extra中的httpd-xampp.conf文件，在末尾找到

<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
    Order deny,allow
    Deny from all
    Allow from 127.0.0.0/8
    ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var
</LocationMatch>

修改成

<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
    Order deny,allow
    Deny from all
   Allow from all
    ErrorDocument 403 /error/HTTP_XAMPP_FORBIDDEN.html.var
</LocationMatch>

中止並重啓Apache，這時候就能夠看到

7. 開始開發Sencha程序

你能夠在 /touch/examples找到官方示例代碼，

在GitHub上也有附有完整說明文檔的示例，如：

Teagrams: Joe McCann's 'first app', demonstrating how to pull simple data from Instagram in a tablet app. Try it now, and read the tutorial.
CityBars: using Yelp data for cities' business listings. Try it now.
Roookies: A simple, themable app that pulls images and data from the Dribbble service. Try it now, and read the tutorial.
Mondrian: demonstrating how a single application can work on both phone and tablet devices.Try it now, and read the tutorial.
World Data: using Touch Charts to display world economic data. Try it now.
Offline apps: An app that demonstrates how to take resource and third-party data offline for the when the device is disconnected. Read the tutorial.
PhoneGap Contacts: using device APIs to get access to device contact information. Read the tutorial.

8. 第一個Sencha Touch程序

在你的服務器文件夾中建立新文件夾myapp和子目錄lib，拷貝SDK文件（即touch文件夾）到lib中

建立index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
        <script src="app/app.js" type="text/javascript"></script>
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
    </head>
    <body></body>
</html>

建立app文件夾，在該文件夾中建立app.js文件

new Ext.Application({
    launch: function() {
        new Ext.Panel({
            fullscreen: true,
            dockedItems: [{xtype:'toolbar', title:'My First App'}],
            layout: 'fit',
            styleHtmlContent: true,
            html: '<h2>Hello World!</h2>I did it!'
        });
    }
});

整個項目結構以下圖

在瀏覽器或emulator中運行

幫助：

Tutorials and FAQs in the sencha.com Learn Section.
Online API Documentation, also available in the /docs URL of your local SDK.（你本地的SDK幫助文檔）
Sencha Touch Forums - populated by our huge & helpful community.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。