ホームページ > 記事 > ウェブフロントエンド > ユニアプリプロジェクトを作成するにはどうすればよいですか?工程説明

ユニアプリプロジェクトを作成するにはどうすればよいですか?工程説明

青灯夜游転載: 2021-09-09 18:58:534524ブラウズ

ユニアプリプロジェクトを作成するにはどうすればよいですか?この記事ではユニアプリの作り方を体系的に解説していきますので、ぜひ参考にしてください。

ユニアプリの作成プロセス:

現在のフロントエンドに不可欠なスキルが多数含まれています。 vue、WeChat アプレット、コンポーネントのカプセル化、モバイルジェスチャのカプセル化、データページング、axios、moment、フレックスレイアウト、sass、ビデオ再生、ビデオダウンロード、その他の機能。 [関連する推奨事項: "uniapp チュートリアル "]

1. uni-app の概要

1.1 uni とは- app

uni-app は、vue.js 構文を使用してすべてのフロントエンドアプリケーションを開発するフレームワークです

さまざまなものを開発できます

フルエンド開発フレームワークとも呼ばれます

2. ユニアプリの基礎

2.1 基礎知識

uni-app の初体験
プロジェクト構造の紹介
スタイルとサス
基本構文
イベント
コンポーネント
ライフサイクル

##3. 最初に基本、次にプロジェクト##必要なテクノロジースタックは

です#html

JavaScript
vue
WeChat アプレット
uni-app
uni-ui
uni-api
#moment.js
ジェスチャーカプセル化
##4. スキャフォールディングを使用してプロジェクトを構築する

1. グローバルインストール

npm install -g @vue/cli

2. プロジェクトの作成

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

3. プロジェクトの開始 (WeChat アプレット)

npm run dev:mp-weixin

4. WeChat アプレット開発者ツールインポートプロジェクト

ルートディレクトリを忘れずに入力してください

##4.1 プロジェクトディレクトリ

4.2 スタイルと sass

ユニアプリプロジェクトを作成するにはどうすればよいですか?工程説明

はミニプログラムの rpx をサポートし、h5 の vw と vh には Sass 構成が組み込まれています。インストールする必要があるのは、対応する依存関係「npm install sass-loader node-sass "vue コンポーネントで、属性 "

v-on

7. コンポーネント

の簡単な使用法コンポーネント

パラメータを渡すコンポーネントコンポーネントスロット

7.1 コンポーネントの簡単な使用法

コンポーネントの定義コンポーネントの導入コンポーネントの登録

7.11 コンポーネントの定義
src ディレクトリにコンポーネントを保存する新しいフォルダーコンポーネントを作成します

新しいコンポーネント *.vue をコンポーネントディレクトリに直接作成します

「コンポーネント名を「コンポーネントパス」からインポート」ページにコンポーネントを導入します。

7.13 コンポーネントの登録

ページ上のインスタンスに、新しい属性コンポーネントを追加します

#属性コンポーネントはオブジェクトです。コンポーネントを配置して登録します

#7.14 コンポーネントの使用

##ページのタグ内で、導入したコンポーネント「」を直接使用します

#7.2 パラメータを渡すコンポーネント

属性を通じて子にパラメータを渡します

子イベントをトリガーする方法##グローバルデータを使用してパラメータを渡す

##vue

# のプロトタイプをマウントすることにより、親にパラメータを渡します##By globalData Way
7.21 親が子にデータを渡す
- 親ページが子にデータを渡す子コンポーネント
- は属性名を介して配列データを渡しましたlist
サブコンポーネントは

##を介してデータを受け取りました#

<ul-com : list="[1,2,3,4]">

props: {
list: Array
},

7.22 子は親にデータを渡します

子コンポーネントは イベントをトリガーすることで親コンポーネントにデータを渡します
イベントをリッスンしますデータを受信する方法

メソッドの記述

methods: {
    handleclick(){
    this.$emit("textchange",&#39;来自子组件的数据&#39;);}
}

<ul-com :list="[1,2,3,4]"
@textChange="handleTextchange">

子にクリックイベントを設定しますコンポーネント

渡されたパラメータをメソッドに設定します
##親と子にリッスンイベントを設定します

#親のメソッドでパラメータを受け入れる

7.3 グローバル共有データ
##Vue のプロトタイプ (これで取得) を介してデータを共有する
globalData を介してデータを共有 (定義してから getapp を使用して取得)
vuex
ローカルストレージ

Vue.prototype.baseURL="http: //www.baidu.com"

7.4 コンポーネントスロット

タグは実際にはデータの一種です。タグをサブコンポーネントに動的に転送したい場合は、スロット
を使用して、スロット

を通じてプレースホルダーを実装できます。
簡単に言うと、親ページのタグを子ページに投げます

8. ライフサイクル

8.1 はじめに

ユニアプリフレームワークのライフサイクルは、vue と WeChat アプレットのライフサイクルを組み合わせたものです。
グローバル APP で使用されますonLaunch はアプリケーションの起動時を意味します
はページで使用されます onLoad または onShow はそれぞれページのロード時とページの表示時を意味します
はコンポーネントで使用されます mountedコンポーネントがマウントされるとき

この記事は https://juejin.cn/post/6996561691639037983# から転載されています。

##プログラミング関連の知識については、

プログラミング入門をご覧ください。！

以上がユニアプリプロジェクトを作成するにはどうすればよいですか?工程説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

vue.js scss npm sass if for 封装栈 JS 对象事件 this flex ul 微信小程序 uni-app https

声明：

この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：uniapp およびミニプログラムの下請け手順の詳細については、こちらをご覧ください。次の記事：uniapp およびミニプログラムの下請け手順の詳細については、こちらをご覧ください。

続きを見る

ユニアプリプロジェクトを作成するにはどうすればよいですか?工程説明

1. uni-app の概要

2. ユニアプリの基礎

##3. 最初に基本、次にプロジェクト##必要なテクノロジー スタックは

npm install -g @vue/cli2. プロジェクトの作成vue create -p dcloudio/uni-preset-vue my-project

7. コンポーネント

パラメータを渡すコンポーネントコンポーネントスロット

#7.14 コンポーネントの使用

8. ライフサイクル

関連記事

##3. 最初に基本、次にプロジェクト##必要なテクノロジースタックは

npm install -g @vue/cli
2. プロジェクトの作成
vue create -p dcloudio/uni-preset-vue my-project