UniApp の一般的な記述方法の簡単な分析

UniApp は、Vue.js をベースにしたクロスプラットフォーム開発フレームワークで、iOS、Android、H5、アプレットなどの複数のプラットフォーム向けのアプリケーションを開発できます。 UniApp の開発では、さらに注意して習得する必要がある重要な記述方法がいくつかありますので、以下で詳しく学びましょう。

1. フレームワーク構造

UniApp のソース コードは主に、基本ライブラリ、コンパイラ、プラットフォーム コードの 3 つの部分で構成されます。その中で、基本ライブラリは uni-core と uni-helpers の 2 つの部分で構成されており、UniApp に必要な論理サポートを提供する役割を果たします。コンパイラは主にプロジェクトのビルドとパッケージ化を行い、プラットフォーム コードは対応する API、コンポーネント ライブラリ、およびUIフレームワークなど

2. ディレクトリ構造

UniApp の開発では、プロジェクトのディレクトリ構造を優先する必要があります。 UniApp では、[HbuilderX -> 新しい UniApp プロジェクト] をクリックして UniApp プロジェクトをすばやく作成し、次のようなディレクトリ構造を自動的に追加できます。 ##│ §── api.js

│ ├── config.js

│ ├── mixin.js
│ └── utils.js

── コンポーネント
─ main.js
│ ─ main.js
│ ─ マニフェスト .json
─ ページ
│ ─ ─ インデックス
│ │ ─ ─ ─ ─ ─index.vue
│ ─ ─ メイン.js
§── Pages.json
til── static
│ lux── logo.png
──── uni.scss

その中で、App.vue がエントリーです。ファイル; 共通ディレクトリは、api.js (インターフェイス要求)、config.js (構成情報)、mixin.js (ミックス)、utils.js (ツール クラス) およびその他のファイルを含むパブリック リソースです。コンポーネントはコンポーネント ライブラリです独自のパッケージ コンポーネントの一部を保存できます。main.js はエントリ JS ファイル、manifest.json はプロジェクト構成ファイル、pages は各サブページとコンポーネントを含むページのコレクション、pages.json はページです設定ファイル。静的フォルダーは静的リソース ディレクトリであり、いくつかの画像、スタイル、JS などが含まれます。

3. コンポーネント

UniApp では、コンポーネントの使用方法は Vue.js の使用方法と非常によく似ており、テンプレート タグを使用してコンポーネント テンプレートを定義するだけで済みます。同時に、UniApp は、uni-icons (アイコン)、uni-list (リスト)、uni-form (フォーム)、uni-tabbar (下部メニュー バー) などの、一般的に使用されるコンポーネント ライブラリも提供します。必要に応じてカスタマイズすることもできます コンポーネント ライブラリ。

4. ルーティング

UniApp の開発では、ルーティングも非常に重要な部分です。次のように、pages.json でルーティングを構成できます。

{

"pages": [
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页"
        }
    },
    {
        "path": "pages/detail/detail",
        "style": {
            "navigationBarTitleText": "详情页"
        }
    }
]

}

ここでは、「pages/index/index」と「」を指す 2 つのルートが定義されています。ページ/詳細/詳細」ページ。ジャンプするときは、uni.navigateTo や uni.redirectTo などの API を使用してページ ジャンプを完了できます。

5. グローバル変数とメソッド

UniApp の開発では、通常、開発を容易にするためにいくつかのグローバル変数とメソッドを定義する必要があります。 App.vue でパブリック変数とメソッドを定義し、Vue.prototype.$xxx を通じてそれらをマウントすることで、グローバル呼び出しを実装できます。次のように:

<view>
    <!-- 这里是页面内容 -->
</view>

<script></script>

export default {
    onLoad() {
        console.log(this.globalData) //获取全局变量
    },
    globalData: {
        uname: 'admin',
        age: 20
    },
    onShow() {

    }
}
//挂载全局方法
Vue.prototype.$myfunc = function () {
    console.log('This is a global function!')
}

6. 開発とデバッグ

UniApp を開発する場合、開発とデバッグに HbuilderX IDE を使用できます。コードの作成と保存が完了したら、「実行 -> 携帯電話またはシミュレータで実行」をクリックすると、プロジェクトを実行してデバッグできます。さらに、実行時にデバッグ モードを有効にして、開発者ツールでデバッグすることもできます。

まとめ

以上は UniApp の一般的な記述方法であり、これらの記述方法をマスターすることで、より効率的に UniApp を開発し、より良いアプリケーションを開発することができます。

以上がUniApp の一般的な記述方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。