iOS、Android、ミニプログラムアプリの敷居の低い開発のためのフロントエンドフレームワークを詳しく解説

現在、クロスプラットフォーム開発技術はもはや新しい話題ではありません。市場にはいくつかのオープンソースフレームワークがあり、その中から選択することもできます。ただし、成熟した技術と健全な製品サービスを備えたプラットフォームは多くありません。注目に値する革新的なフレームワークもいくつかあります。

例えば、私が最近使用したAVMは、APICloudがイテレーション的にリリースしたマルチターミナル開発フレームワークです。JavaScriptベースで、複数の構文に対応しており、VueやReactのユーザーであれば、学習コストをかけずにすぐに始めることができます。仮想DOMを持ち、マルチターミナルレンダリングを一度に記述できます。主に、APICloudは7年間オンライン化されており、比較的成熟しているため、AVM公式ドキュメントの内容と組み合わせて、自分の知識と実践の一部を整理し、クロスプラットフォーム開発技術を使用する必要がある開発者の役に立てばと思っています。

AVM フレームワークを学ぶ理由は何ですか?

AVM 公式サイトでの紹介と私自身の実践経験を組み合わせて、一連の AVM 機能をまとめました。これらの内容は、AVM フレームワークを積極的に学習するには十分だと思います。

1. コードセットは、Android、iOS、WeChat アプレット、iOS ライト アプリ、H5 に対応するインストール パッケージまたはコード パッケージにコンパイルできます。

2. APICloud2.0 テクノロジー スタックと互換性があるため、プラットフォーム上で数千の Android および iOS ネイティブ モジュールが利用できます。または、3.0 テクノロジーを古いプロジェクトに部分的に導入し、APP をローカルで最適化します。

3. ネイティブエンジンレンダリング。開発に avm.js を使用する場合、アプリは webView なしでネイティブ エンジン 3.0 を使用してレンダリングされ、すべてのコンポーネントとビューは Android および iOS システムのネイティブ コンポーネントおよびビューと 100% 一致します。

4. Vue のような構文で、React JSX と互換性があります。 Vue または React の基礎知識を持つユーザーはすぐに始めることができます。

5. コンポーネントベースの開発によりコードの再利用性が向上します。

AVMのページ紹介:

AVM のページは stml ページと呼ばれます。典型的な stml ファイル コードは次のとおりです。

<テンプレート>  
    <表示>  
        <view class="header">  
            <テキスト>{タイトル}</テキスト>  
        </ビュー>  
        <view class="content">  
            <テキスト>{コンテンツ}</テキスト>  
        </ビュー>  
        <view class="footer">  
            <text>{フッター}</text>  
        </ビュー>  
    </ビュー>  
</テンプレート>  
<スタイル>  
    .ヘッダー{  
      高さ: 45px;  
    }  
   。コンテンツ {  
      flex-direction:行;  
    }  
    .フッター{  
      高さ: 55px;  
    }  
</スタイル>  
<スクリプト>  
    エクスポートデフォルト{  
       名前: 'api-test',  
         
       アピレディ(){  
           console.log("こんにちは APICloud");  
       },  
 
        データ（）{  
           戻る {  
               タイトル:「Hello App」、  
                コンテンツ:「これはコンテンツです」  
                フッター: 'これはフッターです'  
           }  
       }  
    }  
</スクリプト>

データバインディング

上記のコード スニペットから、データ バインディング メソッドは {variable} であることがわかります。これは、変数または式を囲むための二重中括弧と一重中括弧をサポートし、テキスト コンテンツまたは要素属性をバインドするために使用できます。

イベントバインディング

イベントをリッスンする方法は 2 つあります。

監視に使用:

<text onclick="doThis">クリックしてください!</text>

listen するには、v-on ディレクティブと略語を使用します。

<text v-on:click="doThis">クリックしてください!</text>
<text @click="doThis">クリックしてください!</text>

イベント処理方法

イベント処理方法はメソッドで定義する必要があります。メソッドにはデフォルトでパラメータが含まれており、これを通じて詳細、currentTarget オブジェクトなどを取得できます。

<テンプレート>  
    <text data-name="avm" onclick="doThis">クリックしてください!</text>  
</テンプレート>  
<スクリプト>  
   エクスポートデフォルト{  
        名前: 'テスト',  
        メソッド: {  
           doThis(e){  
               api.alert({  
                   メッセージ:e.currentTarget.dataset.name  
                });  
            }  
        }  
    }  
</スクリプト>

イベント処理メソッドでは、次のようなテンプレートを使用することもできます。

<text onclick={this.doThis}>クリックしてください!</text>

以下に、デフォルトのコンポーネントの例をいくつか示します。その他のコンポーネントについては、公式ドキュメントを参照してください。

ビューは、任意のコンポーネントを配置できる一般的なコンテナ コンポーネントです。デフォルトのレイアウトはフレックスレイアウトです。

ビューに直接テキストを追加しないように注意してください。テキストを追加するには、テキスト コンポーネントを使用します。

テキスト コンポーネントは、テキスト情報を表示するために使用されます。

<テンプレート>  
    <スクロールビュークラス="main" スクロール-y>  
       <text class="text">通常のテキスト</text>  
      <text class="text bold">太字テキスト</text>  
        <text class="text italic">斜体テキスト</text>  
        <text class="text shadow">テキストシャドウ効果</text>  
   </スクロールビュー>  
</テンプレート>  
<スタイル>  
    。主要 {  
       幅: 100%;  
       高さ: 100%;  
   }  
   。文章 {  
       高さ: 30px;  
       フォントサイズ: 18px;  
    }  
    。大胆な {  
        フォントの太さ:太字;  
    }  
   .斜体{  
        フォントスタイル:斜体;  
    }  
   。影 {  
        テキストシャドウ:2px 2px #f00;  
   }  
</スタイル>  
<スクリプト>  
   エクスポートデフォルト{  
       名前: 'テスト'  
    }  
</スクリプト>

画像コンポーネントは画像を表示するために使用されます。

ボタン コンポーネントはボタンを定義します。

入力コンポーネントは入力ボックスを定義します。

swiper は、上下または左右へのスライドをサポートするスライディング ビューを定義します。スワイパーアイテムコンポーネントのみを配置できます。

scroll-view はスクロールビューを定義します。

垂直方向にスクロールする必要がある場合は高さを指定する必要があります。水平方向にスクロールする必要がある場合は幅を指定する必要があります。そうしないと、表示されない可能性があります。

ist-view は、メモリ使用量とレンダリング パフォーマンスを最適化できる再利用可能なコンテンツの垂直スクロール ビューを定義し、更新のためのプルダウンと読み込みのためのプルアップをサポートします。 scroll-view の基本的なプロパティを使用できます。

リストビューには、セル、リスト ヘッダー、リスト フッター、リフレッシュなどのコンポーネントを配置でき、セル コンポーネントは各項目の表示コンテンツとして使用されます。

frame コンポーネントはフレームを表示するために使用され、その効果は openFrame メソッドと同じです。

フレーム グループ コンポーネントはフレーム グループを表示するために使用され、その中の各フレームは独立したページです。

コンポーネントベースの開発

コンポーネントを定義します。

stml を使用してコンポーネント api-test.stml を定義します。

<テンプレート>    
    <ビュークラス='ヘッダー'>  
       <text>{this.data.title}</text>  
    </ビュー>    
</テンプレート>    
<スクリプト>  
    エクスポートデフォルト{    
        名前: 'api-test',  
        データ（）{  
            戻る {  
                タイトル: 「Hello APP」  
            }  
        }  
    }  
</スクリプト>  
<スタイルスコープ>  
   。ヘッダ{  
       高さ: 45px;  
    }  
</スタイル> 

参照コンポーネント:

他のページまたはコンポーネントで参照されます。

// アプリインデックス.stml:  
  
<テンプレート>    
    <view class="app">    
       <img src="./assets/logo.png" />    
       <api-テスト></api-テスト>   
   </ビュー>    
</テンプレート>  
<スクリプト>  
    './components/api-test.stml' をインポートします    
      
   エクスポートデフォルト{    
        名前: 'app-index',    
        データ: 関数 () {    
           戻る {  
                タイトル: 「Hello APP」  
           }  
        }    
    }    
</スクリプト>    
<スタイル>    
   。アプリ {     
       テキスト配置: 中央;    
        上マージン: 60px;    
    }    
</スタイル> 

JS を使用してコンポーネント/ページを定義します。公式ドキュメントを参照してください。

コンポーネントライフサイクル

avm.js コンポーネント仕様は Web コンポーネント仕様に準拠しており、そのライフ サイクルは標準の Web コンポーネント コンポーネントのライフ サイクルに従います。 Vue コンポーネントのライフサイクルとも互換性があります。

サポートされているすべてのライフサイクルイベント

ライフサイクルの詳細については、公式ドキュメントを参照してください。

一般的に、APICloud 開発フレームワークはネイティブ プログラミング エクスペリエンスに近いです。アプリケーションのユーザー インターフェイス、ビジネス ロジック、データ モデルをシンプルなモードで分離し、高度にカスタマイズされたプロジェクトに適しています。さらに、APICloud Web サイトでは、多数のモジュール、例、ツール ソース コードのダウンロードを提供しています。フロントエンドに興味のある方は、ここをクリックして試してみるとよいでしょう。

iOS、Android、ミニプログラムアプリ開発のための敷居の低いフロントエンドフレームワークについての記事はこれで終わりです。敷居の低いフロントエンドフレームワーク開発に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも 123WORDPRESS.COM を応援してください。