ホームページ > 記事 > ウェブフロントエンド > ユニアプリプロジェクトを作成するにはどうすればよいですか?工程説明
ユニアプリプロジェクトを作成するにはどうすればよいですか?工程説明
- 青灯夜游転載
- 2021-09-09 18:58:534551ブラウズ
ユニアプリプロジェクトを作成するにはどうすればよいですか?この記事ではユニアプリの作り方を体系的に解説していきますので、ぜひ参考にしてください。
ユニアプリの作成プロセス:
現在のフロントエンドに不可欠なスキルが多数含まれています。 vue、WeChat アプレット、コンポーネントのカプセル化、モバイル ジェスチャのカプセル化、データ ページング、axios、moment、フレックス レイアウト、sass、ビデオ再生、ビデオ ダウンロード、その他の機能。 [関連する推奨事項: "uniapp チュートリアル "]
1. uni-app の概要
1.1 uni とは- app
uni-app は、vue.js 構文を使用してすべてのフロントエンド アプリケーションを開発するフレームワークです
さまざまなものを開発できます
フルエンド開発フレームワークとも呼ばれます
2. ユニアプリの基礎
2.1 基礎知識
- uni-app の初体験
- プロジェクト構造の紹介
- スタイルとサス
- 基本構文
- イベント
- コンポーネント
- ライフサイクル
##3. 最初に基本、次にプロジェクト##必要なテクノロジー スタックは
です#html
- css
- JavaScript
- vue
- WeChat アプレット
- uni-app
- uni-ui
- uni-api
- #moment.js
- ジェスチャー カプセル化
- ##4. スキャフォールディングを使用してプロジェクトを構築する
npm install -g @vue/cli
2. プロジェクトの作成vue create -p dcloudio/uni-preset-vue my-project
3. プロジェクトの開始 (WeChat アプレット)npm run dev:mp-weixin4. WeChat アプレット開発者ツール インポート プロジェクトルート ディレクトリを忘れずに入力してください
##4.1 プロジェクト ディレクトリ
4.2 スタイルと sass
はミニ プログラムの rpx をサポートし、h5 の vw と vh には Sass 構成が組み込まれています。インストールする必要があるのは、対応する依存関係 「npm install sass-loader node-sass "vue コンポーネントで、属性 "
v-on7. コンポーネント
の簡単な使用法コンポーネント
パラメータを渡すコンポーネントコンポーネントスロット
- 7.1 コンポーネントの簡単な使用法
コンポーネントの定義コンポーネントの導入コンポーネントの登録
- コンポーネントの使用
- 7.11 コンポーネントの定義
- src ディレクトリにコンポーネントを保存する新しいフォルダー コンポーネントを作成します
新しいコンポーネント *.vue をコンポーネント ディレクトリに直接作成します
- 7.12 コンポーネントの紹介
- 「コンポーネント名を「コンポーネントパス」からインポート」ページにコンポーネントを導入します。
7.13 コンポーネントの登録
- ページ上のインスタンスに、新しい属性コンポーネントを追加します
#7.14 コンポーネントの使用
- ##ページのタグ内で、導入したコンポーネント「
」を直接使用します
- 親は、
- 属性を通じて子にパラメータを渡します
子イベントをトリガーする方法##グローバル データを使用してパラメータを渡す
##vue- # のプロトタイプをマウントすることにより、親にパラメータを渡します##By globalData Way
- 7.21 親が子にデータを渡す
- 親ページが子にデータを渡す子コンポーネント ul-com
- は属性名を介して配列データを渡しましたlist
props
##を介してデータを受け取りました#
<ul-com : list="[1,2,3,4]">
props: {
list: Array
},7.22 子は親にデータを渡します
- 子コンポーネントは イベントをトリガーすることで親コンポーネントにデータを渡します 親コンポーネントは
- イベントをリッスンしますデータを受信する方法
methods: {
handleclick(){
this.$emit("textchange",'来自子组件的数据');}
}<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 サイトの他の関連記事を参照してください。