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

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 コンポーネントのライフサイクルとも互換性があります。

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

ライフサイクル関数名

トリガータイミング
アピレディ
ページの実行環境が準備され、レンダリングされました。コンポーネントがページにインポートされていない場合、このイベントはインストール済みと同等になります。
インストール
コンポーネントが実際のDOM(またはアプリのネイティブインターフェース)にマウントされる前
インストール済み
コンポーネントが実際の DOM (またはアプリのネイティブ インターフェイス) にマウントされた後。ページ レベルでは、このイベントは apiready と同等です。
与える
コンポーネントのレンダリングが開始されます
アンインストール
コンポーネントが実際のDOM(またはアプリのネイティブインターフェース)から削除される前に
更新前
コンポーネント更新前
更新されました
コンポーネントの更新が完了しました
レンダリング前
コンポーネントのレンダリングが始まる前に
「各ページは apiready を実装し、apiready の後にビジネス ロジックを処理する必要があります。installed はコンポーネント レベルのライフ サイクルに属し、ページがコンポーネントをロードするときにトリガーされます。これは apiready よりも前です。」

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

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

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

以下もご興味があるかもしれません:
  • JavaScript フレームワーク デザイン パターンの詳細な説明
  • JavaScript と JQuery フレームワークの基本チュートリアル
  • HongmengシステムのJS開発フレームワーク
  • Hongmeng システムの JavaScript フレームワークの行ごとの分析 (推奨)

<<:  MySql 範囲内の検索時にインデックスが有効にならない理由の分析

>>:  Dockerのオンラインおよびオフラインインストールと一般的なコマンド操作

推薦する

時間別にグループ化された MySQL クエリ ステートメント

年、月、週、日グループによる MySQL クエリ1. 学年別検索 SELECT DATE_FORMA...

CSSで特殊なグラフィックを描く方法

1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...

Node.jsはブレークポイント再開を実装する

目次ソリューション分析スライス履歴書のダウンロード具体的な解決プロセス論理的分析フロントエンドサーバ...

Alibaba Cloud CentOS 7 に yum を使用して MySQL をインストールする正しい方法 (推奨)

yum クイックインストール mysql yumリポジトリを追加する rpm -Uvh http:...

広告を閉じるための JavaScript カウントダウン

広告を閉じるまでのカウントダウンを実装するために JavaScript を使用するまだフロントエンド...

HarborをベースにしたDocker専用倉庫の構築方法

目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...

ネイティブ JavaScript でショッピングカートを実装する

この記事では、ショッピングカートを実装するためのJavaScriptの具体的なコードを参考までに紹介...

CSS で波の効果を作成するためのアイデア

以前、純粋な CSS を使用して波の効果を実現する方法をいくつか紹介しました。それらについては、次の...

入力できない無効な値はアクションレイヤーに渡すことができません

フォームを入力不可にしたい場合は、フォームを次のように設定します。コードをコピーコードは次のとおりで...

MySQL mysqladmin クライアントの使用の概要

目次1. サーバーの状態を確認します。 2. ルートパスワードを変更します。 3. mysqlser...

Mysql マスタースレーブ サービスの実装例を構成する

Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...

ウェブページサイズに関する調査

<br />統計によると、Web ページの平均サイズは 2003 年以降 3 倍に増加し...

HTML 要素 (タグ) とその使用法

a : ハイパーリンクの開始位置または宛先位置を示します。頭字語: 単語の最初の文字からなる略語を示...

HTMLハイパーリンクaタグのhrefジャンプとonclick間の実行順序の例

HTMLハイパーリンクaタグのhrefジャンプとonclickの実行関係htmlのaタグのhrefは...

Vueウォッチの監視方法の概要

目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...