[ツール リソース] Weex クイック スタート チュートリアル (Weex チュートリアル)_html/css_WEB-ITnose

Ali Baichuan の詳細情報を取得するには、青い文字をクリックしてください。

Weex を使用して簡単なリストを作成します。同様のリストは、電子商取引モバイル アプリケーションでもよく見られます。

スタート

まずリスト項目を書きましょう。

tech_list.we ( .we は Weex が推奨するサフィックスです) という名前のファイルを作成し、そのファイルに上記のコードをコピーして貼り付けてください。

Weex ツール チェーンは Node.js を使用して構築されているため、Node.js が正常に完了した後、次の手順に進む前に Node.js (https://nodejs.org/en/download/stable/) をインストールする必要があります。次のコマンドを実行して、Weex コマンド ライン プログラム Weex Toolkit (https://www.npmjs.com/package/weex-toolkit) をインストールできます。

インストールが完了したら、コマンド ライン ウィンドウで weex コマンドを実行してツールが正しくインストールされているかどうかを確認できます。次の内容が表示されます。

すべてが正常であれば。 , コマンド ラインの作業ディレクトリを tech_list.we が保存されていたディレクトリに切り替えて、次のコマンドを入力してください:

システムのデフォルトのブラウザのウィンドウが自動的に開き、次のコンテンツが表示されます:

文法の概念

次に、いくつかの簡単な構文の概念を見てみましょう。 tech_list.we に示されているように、Weex コードは、テンプレート (テンプレート)、スタイル (スタイル)、およびスクリプト (スクリプト) の 3 つの部分で構成されます。これら 3 つの概念は、Weex にとって、Web にとっての html、css、javascript に相当します。

テンプレート部分は、タグとタグで囲まれたコンテンツで構成されるスケルトンを Weex に提供します。 Weex のタグは、オープン タグ (例: ) とクローズ タグ (例: ) の 2 つのタイプに分けられます。オープン タグとクローズ タグの各ペアをタグに追加できる属性のセットと呼び、異なる属性を持ちます。つまり、たとえば、class 属性を使用すると、Weex タグの複数のグループに同じスタイルを適用でき、onclick 属性を使用すると、タグがユーザーのクリック イベントに応答できるようになります。

スタイルセクションでは、Weex タグがどのように表示されるかを説明します。あなたと同じように、私たちも CSS が好きなので、Weex のスタイルは CSS 標準と一致するように努めています。 Weex は、マージン、パディング、固定など、CSS の多くの機能をサポートしています。さらに良いことに、フレックスボックス レイアウト モデルは Weex で適切にサポートされています。

スクリプト セクションではデータとロジックを Weex タグに追加し、ローカルおよびリモートのデータに簡単にアクセスしてタグを更新できます。また、メソッドを定義し、これらのメソッドがさまざまなイベントに応答するようにすることもできます。Weex スクリプトの構成は、基本的に CommonJS モジュール仕様に従います。

Weex 構文の詳細については、構文の章 (http://alibaba.github.io/weex/doc/syntax/main.html) を参照してください。

リスト項目をさらに追加する

単一のリスト項目は「リスト」ではないため、さらにリスト項目を追加してみましょう。tech_list.we ファイルを開いて、次のように内容を更新します。 , Weex ネイティブ レンダラーを使用してこのファイルをレンダリングしてみましょう。ターミナルを開き、ファイルが保存されているディレクトリに切り替えて、実行します

次のような QR コードがターミナルに表示されます:

この QR コードは、Weex Playground アプリ (http) で使用する必要があります。 ://alibaba.github.io/weex/download.html ) は動作します。ダウンロードしてインストールした後、アプリのスキャンコードアイコンをクリックし、携帯電話のカメラを使用して端末の QR コードをスキャンします。美しいリストが携帯電話に表示されます。

ここで、このリストは (Webkit ではなく) ネイティブ ビューによって完全にレンダリングされることを強調する必要があります。Webkit によってレンダリングされたインターフェイスと比較して、アプリのページ読み込み速度が速くなり、メモリのオーバーヘッドが少なくなります。

これで、tech_list.we の一部の内容を変更してみることができます。変更を保存すると、Weex Playground はこれらの変更をすぐにインターフェイスに反映します。この機能は、よく「ホットリロード」と呼ばれます。 Weex開発がより便利になりました。

組み込みコンポーネントを追加する

最も基本的なタグから自分で作成することに加えて、Weex は多くの組み込みコンポーネントも提供します。スライダーはモバイル アプリやページで非常に一般的であるため、インターフェイスにスライダーを簡単に追加できる組み込みの Slider コンポーネントが提供されています。 tech_list.we を開いて内容を次のように変更します:

ターミナルの同じディレクトリでこのコマンドを再度実行します:

前に書いたリストの先頭に美しいスライダーが追加されます。

スライダー コンポーネントの詳細については、こちら (http://alibaba.github.io/weex/doc/components/slider.html) を参照してください。

前に示したように、このインターフェイスは「ネイティブ ビュー」を使用して Weex Playground アプリでレンダリングすることもできます。独自のアプリにそのような機能を持たせたい場合は、このドキュメント (http://alibaba.github.io/weex/doc/advanced/integrate-to-android.html) にアクセスして、Weex を独自のアプリに統合する方法を学習してください。 。

Alibaba Baichuan (baichuan.taabao.com) は、アリババ グループのワイヤレス オープン プラットフォームであり、「テクノロジー、ビジネス、ビッグデータ」の開放を通じて、モバイル シナリオにおいて高度に結合したオープンで業界をリードするテクノロジーを提供します。製品マトリックス、成熟したビジネス コンポーネント、完全なサービス システムにより、モバイル開発者は迅速に APP を構築し、APP の商品化プロセスを加速し、モバイル開発者とモバイル起業家に十分な力を与えることができます。

Ali Baichuan について

[原文を読む] をクリックして、さらに興奮してください!