UniApp+Uview2

1. UniAppとUview2の導入

UniApp と Uview2 を紹介する前に、Vue.js フレームワークを見てみましょう。

Vue.js

Vue.js は、データ駆動型でコンポーネント化された方法で開発された軽量の JavaScript フレームワークです。Vue.js は、開発者が高品質の Web アプリケーションを迅速に構築できるようにする豊富な API とコンポーネント ライブラリを提供します。

Vue.js の中核となる機能は次のとおりです。

1. 応答性の高いデータ バインディング: Vue.js はデータの変更を監視し、ビューを自動的に更新して、データとビューの同期を維持できます。
2. コンポーネントベースの開発: Vue.js は、開発のためにページを複数の小さなコンポーネントに分割できます。各コンポーネントは独自の状態と動作を持ち、props とイベントを通じて通信できます。
3. テンプレート構文: Vue.js のテンプレート構文はシンプルで理解しやすく、複雑なページ構造を迅速に構築できます。
4. Vue CLI: Vue CLI は、Vue.js によって公式に提供されるスキャフォールディング ツールであり、開発者が Vue.js アプリケーションを迅速に構築するのに役立ちます。

ユニアップ

UniApp は、DCloud によって開始された Vue.js に基づくクロスプラットフォーム開発フレームワークで、Vue コードを WeChat アプレット、Alipay アプレット、Baidu スマート アプレット、H5、App およびその他のプラットフォームにコンパイルすることをサポートしています。

UniApp を使用すると、1 回限りの開発と複数のデプロイメントを実現できると同時に、Vue.js フレームワークによってもたらされる利便性と効率性を享受できます。

Uview2

Uview2 は、Vue.js ベースの UI コンポーネント ライブラリであり、豊富な UI コンポーネントとスタイルを提供し、開発者がデザイン要件を満たすページを迅速に構築できるようにします。他の UI コンポーネント ライブラリと比較して、Uview2 はより多くのコンポーネントと最適化されたパフォーマンスを提供し、使いやすくなっています。

Uview2 の主な機能は次のとおりです。

1. 豊富なコンポーネント ライブラリ: Uview2 は、さまざまなページ構築のニーズを満たすことができる多数の UI コンポーネントとスタイルを提供します。
2. カスタマイズされたテーマ: Uview2 はテーマをカスタマイズする機能を提供し、スタイル変数を変更することで異なるテーマを簡単に切り替えることができます。
3. ハイパフォーマンスの最適化: Uview2 は、コンポーネントのオンデマンド読み込み、追加のレンダリングの削減など、多くの側面で最適化されており、ページのレンダリング速度と応答速度を向上させることができます。

2. 環境構築とプロジェクト作成

開発に UniApp と Uview2 を使用する前に、必要なツールと依存関係をいくつかインストールする必要があります。それぞれについて順番に説明します。

Node.js と npm

Node.js は Chrome V8 エンジンに基づく JavaScript ランタイム環境であり、サーバー側で JavaScript コードを実行できるほか、Web アプリケーションの構築にも使用できます。UniApp を開発に使用する前に、Node.js と npm をインストールする必要があります。

Node.js 公式 Web サイトでインストール パッケージをダウンロードしてインストールできます: https://nodejs.org/en/download/

インストールが完了したら、ターミナルに次のコマンドを入力して、Node.js と npm のバージョンを確認します。

node -v
npm -v

バージョン番号が正常に表示されれば、Node.js と npm が正常にインストールされたことを意味します。

UniApp CLI

UniApp CLI は UniApp のコマンド ライン ツールで、開発者が UniApp アプリケーションを迅速に作成、コンパイル、デバッグできるようにします。npm を使用して UniApp CLI をインストールできます。

npm install -g @vue/cli @vue/cli-service-global

インストールが完了したら、次のコマンドを使用して、インストールが成功したかどうかを確認できます。

uni -v

バージョン番号が表示されれば、UniApp CLI は正常にインストールされています。

プロジェクトを作成する

上記のツールと依存関係をインストールした後、次のコマンドを使用して UniApp プロジェクトを作成できます。

vue create -p dcloudio/uni-preset-vue my-project

このコマンドは、UniApp の基本構成ファイルとディレクトリ構造を含む「my-project」という名前の新しいプロジェクトを作成します。

3. Uview2の使い方と使用例

UniApp プロジェクトを作成したら、まず Uview2 をプロジェクトに追加する必要があります。次のコマンドを使用して Uview2 をインストールできます。

npm install uview-ui

インストールが完了したら、App.vue次のコードをファイルに追加して Uview2 を導入します。

<script>
import uView from 'uview-ui';
export default {
    components: {
        "uView": uView
    }
}
</script>

次に、main.jsファイルに次のコードを追加して、Uview2 をグローバルに使用します。

import Vue from 'vue'
import uView from 'uview-ui';

Vue.use(uView);

これで、Uview2 を UniApp プロジェクトに正常に追加できました。次に、Uview2 のいくつかの一般的なコンポーネントの使用方法を示します。

カラーテーマ

Uview2 はカラー テーマの複数のセットを提供し、スタイル変数を変更することで異なるテーマ間で切り替えることができます。具体的な手順は次のとおりです。

1. App.vue次のコードをファイルに追加します。

   <style>
   /* 引入Uview2的样式文件 */
   @import 'uview-ui/index.scss';
   
   /* 定义自定义主题变量 */
   $color-primary: #409EFF;
   $color-success: #67C23A;
   $color-warning: #E6A23C;
   $color-danger: #F56C6C;
   $color-text-base: #303133;
   $color-bg-base: #F2F6FC;
   $color-divider: #DCDFE6;
   
   /* 使用自定义主题 */
   @include u-theme($themeConfig);
   </style>
   

   ここでは、ニーズに応じて変更できるカスタム カラー テーマのセットを使用します。

2. main.js次のコードをファイルに追加します。

   import Vue from 'vue';
   import uView from 'uview-ui';
   import '@/common/styles/color.scss'; // 引入自定义颜色主题文件
   
   Vue.use(uView);
   

アイコンコンポーネント

Uview2には多数のアイコンコンポーネントが用意されており、詳細なリストは公式ドキュメントで確認できます。簡単な例を次に示します。

<template>
  <view>
    <uni-icons type="check-circle"></uni-icons>
    <uni-icons type="cross-circle"></uni-icons>
    <uni-icons type="star"></uni-icons>
    <uni-icons type="write"></uni-icons>
  </view>
</template>

<script>
export default {}
</script>

リストコンポーネント

Uview2 のリスト コンポーネントを使用すると、リスト ページをより簡単に作成できます。簡単な例を次に示します。

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="(item, index) in list" :key="index" :title="item.title" :extra="item.date" :thumb="item.image">
        {
   
   { item.content }}
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: '任务1',
          content: '这是第一个任务的内容',
          date: '2023-04-23
           07:30',
          image: 'https://img.yzcdn.cn/vant/cat.jpeg'
        },
        {
          title: '任务2',
          content: '这是第二个任务的内容',
          date: '2023-04-22 09:20',
          image: 'https://img.yzcdn.cn/vant/tree.jpeg'
        },
        {
          title: '任务3',
          content: '这是第三个任务的内容',
          date: '2023-04-21 14:15',
          image: 'https://img.yzcdn.cn/vant/fly.jpeg'
        }
      ]
    };
  }
};
</script>

uni-listこの例では、とコンポーネントを使用して単純なリスト ページを作成する方法を示しますuni-list-item。データはdataオブジェクトから取得されます。

フォームコンポーネント

Uview2 のフォーム コンポーネントを使用すると、フォーム ページをより簡単に作成できます。簡単な例を次に示します。

<template>
  <view>
    <uni-form :model="form">
      <uni-cell-group>
        <uni-field v-model="form.username" label="用户名" placeholder="请输入用户名" />
        <uni-field v-model="form.password" label="密码" placeholder="请输入密码" type="password" />
        <uni-checkbox-group v-model="form.agreement">
          <uni-checkbox name="agreement">同意协议</uni-checkbox>
        </uni-checkbox-group>
        <uni-button type="primary" @click="submitForm">提交</uni-button>
      </uni-cell-group>
    </uni-form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        agreement: false
      }
    };
  },
  methods: {
    submitForm() {
      console.log(this.form);
    }
  }
};
</script>

この例ではuni-form、uni-cell-group、 、uni-field、uni-checkbox-groupおよびuni-buttonコンポーネントを使用して単純なフォーム ページを構築し、v-model指示に従ってデータの双方向バインドを実行する方法を示します。ユーザーが送信ボタンをクリックすると、submitFormメソッドが呼び出されてフォーム データが出力されます。

4. 下請け

大規模なアプリケーションを開発する場合、すべてのコードを 1 つのファイルに含めると、コンパイル時間が長くなり、パフォーマンスが低下する可能性があります。そこでUniAppでは、コードを複数のサブパッケージに分割して管理・読み込みできるサブパッケージ機能を提供しています。

以下は簡単なサブパッケージの例です。UniApp プロジェクトを 2 つのサブパッケージと に分割しmainますsub。

1. manifest.json次のコードをファイルに追加します。

   "subPackages": [
     {
         
         
       "root": "pages/sub",
       "name": "sub"
     }
   ]
   

   ここでは、 という名前のサブパッケージを作成しsub、pages/subディレクトリに関連付けています。必要に応じてさらにサブパッケージを作成できます。

2. pages/subディレクトリを作成し、index.vueそのディレクトリの下にファイルを作成します。

3. ファイル内のページへのリンクをpages/index.vue追加します。pages/sub/index.vue

   <template>
     <view>
       <text>这是主包页面</text>
       <button @click="gotoSub">跳转到子包页面</button>
     </view>
   </template>
   
   <script>
   export default {
     methods: {
       gotoSub() {
         uni.navigateTo({
           url: '/pages/sub/index'
         });
       }
     }
   };
   </script>
   

これで、UniApp プロジェクトを 2 つのサブパッケージに正常に分割できました。実行時には、mainサブパッケージ内のコードが最初にロードされ、次に必要に応じて他のサブパッケージ内のコードがロードされます。サブパッケージ化を使用すると、アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させることができます。

要約する

この記事では、開発に UniApp と Uview2 を使用する方法を紹介し、完全なコード、例、サブパッケージを提供します。UniApp と Uview2 を組み合わせることで、開発者は高品質のクロスプラットフォーム アプリケーションを簡単に構築できるようになり、開発効率が向上するだけでなく、ユーザー エクスペリエンスも向上します。