ユニアプリクロスプラットフォームフレームワークの公式チュートリアル

リンク：https://ke.qq.com/course/343370

I. ユニアプリの初期化が完了したときにフレームポイント
ユニアプリライフサイクルの
onLaunchトリガーの基本を紹介します。
ユニアプリが開始したとき、またはバックグラウンドからフォアグラウンドディスプレイに
グローバルオンショー
をトリガーします。

Uniappページのライフサイクル
https://uniapp.dcloud.io/frame
ドキュメントを参照

ユニアプリをルーティングするには、2つの方法があります。ナビゲーターコンポーネントを使用してジャンプし、APIを呼び出してジャンプします。
1.新しいページを開き、ページリダイレクト===》 API uni.navigateToを呼び出し、コンポーネントを使用します
。2.ページリターンコールAPI uni.navigateBack、コンポーネントを使用し、ユーザーが左上隅のリターンボタンを押し、Androidユーザーが物理的な戻るボタンをクリックします

3.タブ切り替えはAPI uni.switchTabを呼び出し、コンポーネントを使用し、ユーザー切り替えタブを使用します

4. API uni.reLaunchをリロードして呼び出し、コンポーネントを使用する

チップ：

navigateTo、redirectToは、非タブバーページのみを開くことができます。
switchTabはtabBarページのみを開くことができます。
reLaunchは任意のページを開くことができます。
ページの下部のtabBarはページによって決定されます。つまり、ページがtabBarとして定義されている限り、下部にtabBarがあります。
App.vueのページにジャンプすることはできません。uni-appが
ページスタイルとレイアウトで
サポートするユニバーサルCSSユニットには、px、upx、vhがあります。
Upxはベースの幅に対する単位であり、画面の幅に合わせることができます。uni-appは、画面のベース幅が750upxであることを規定しています。

Upx2px upx
はコンパイラーによって処理されるため、upxの動的バインディングは有効になりません。
割り当てる前に、uni.upx2px（Number）を使用してpxに変換できます。
例えば

return uni.upx2px（750/2）+ 'px';
style import
@importステートメントを使用して、外部スタイルシートをインポートします。@ importの後に、インポートする必要がある外部スタイルシートの相対パスを指定します。;を使用して、ステートメントの終わりを示します。

@import“…/…/ common / uni.css”;
インラインスタイル
1.style：静的スタイルはクラスに均一に書き込まれます。

class：スタイルルールを指定するために使用されます。その属性値は、スタイルルール内のクラスセレクタ名（スタイルクラス名）のコレクションです。スタイルクラス名に。を付ける必要はなく、スタイルクラス名はスペースで区切ります。Selector 1 .class 2 #id 3要素はすべてのビューコンポーネントを選択します

グローバルスタイルとローカルスタイル
App.vueで定義されたスタイルはグローバルスタイルであり、すべてのページに適用されます。pagesディレクトリの下のvueファイルで定義されたスタイルは部分的なスタイルであり、対応するページでのみ機能し、App.vueの同じセレクターをオーバーライドします。
注：App.vueの@importステートメントは、すべてのページに影響する行外スタイルをインポートできます。

CSS変数
CSS変数の説明5 + AppアプレットH5
–status-bar-heightシステムステータスバーの高さシステムステータスバーの高さ25px 0
–上からウィンドウ上部のコンテンツ領域0 0 NavigationBar高さ
–下からウィンドウ下部のコンテンツ領域0 0 コンポーネントの高さの
固定値
uni-app からのTabBarの高さは固定されており、変更できません。

コンポーネントの説明5 + App H5
NavigationBarナビゲーションバー
44px 44px TabBar下部タブ56px 50px
フレックスレイアウト
クロスプラットフォームをサポートするために、フレームワークはフレックスレイアウトの使用を推奨しています

背景画像
uni-appは、CSSでの背景画像の設定の使用をサポートしています。使用方法は、通常のWebプロジェクトと同じです。次の点に注意してください。

base64形式の画像をサポートします。
ネットワークパス画像をサポートします。
ローカルパスの背景画像を使用する場合：
画像が40kb未満の場合、uni-appは自動的にそれをbase64形式に変換します。

画像は40 kb以上であり、開発者はそれをbase64形式に変換して使用するか、サーバーに移動してネットワークアドレスから参照する必要があります。

ローカル背景画像の参照パスは、〜@で始まる絶対パスのみをサポートします（相対パスはサポートされていません）。

.test2 { background-image：url（'~@/static/logo.png '）; } フォントアイコンuni-appはフォントアイコンの使用をサポートしており、その使用方法は通常のWebプロジェクトと同じです。次の点に注意してください。

base64形式のフォントアイコンをサポートします。
ネットワークパスフォントアイコンをサポートします。
ネットワークパスには、プロトコルヘッダーhttpsを追加する必要があります。
http://www.iconfont.cnからコピーしたコードには、デフォルトではプロトコルヘッダーがありません。
ユニアプリローカルパスアイコンフォントのサポート：
フォントファイルが40kb未満の場合、ユニアプリはそれを自動的にbase64形式に変換します。

フォントファイルが40kb以上の場合、開発者はそれを変換する必要があります。変換しない場合、使用は有効になりません。

フォントファイルの参照パスは、〜@で始まる絶対パスのみをサポートします（相対パスはサポートされていません）。

@ font-face { font-family：test1-icon; src：url（'~@/static/iconfont.ttf '）; } とuni-appは、リストのレンダリングと条件のテンプレートテンプレートでネストと合計をサポートしますレンダリング。

コンポーネントではなく、単なるパッケージング要素であり、ページでのレンダリングは行わず、コントロール属性のみを受け入れます。

コード例

テストがtrueの場合、{ {item}}-{ {index}} が表示されます。テストがfalseの場合、{ {item}}-{ {index}}が表示されます。ES6はユニアプリをサポートしています。ほとんどのES6 APIをサポートしていますが、ES7 await / asyncもサポートしています。

NPMは
uni-appをサポートし、npmを使用してサードパーティのパッケージをインストールすることをサポートしています。

TypeScriptサポート
ユニアプリでのts開発の使用

ミニプログラムコンポーネントのサポート
ユニアプリ5+アプリおよびミニプログラムでのミニプログラムコンポーネントの使用をサポートします。

プラットフォームの違いの説明

プラットフォームのサポート状況のミニプログラム・コンポーネントの格納ディレクトリ
H5はサポートしていません
5 +アプリケーションのサポート微信ミニプログラムコンポーネントwxcomponentsを
ミニプログラムコンポーネントwxcomponents微信ミニプログラムのサポート微信
アリペイミニプログラムは、アリペイミニプログラムコンポーネントmycomponentsをサポートしています
Baiduのミニプログラムは、Baiduのミニプログラムコンポーネントswancomponentsサポート
IIを。ヴュー使用上の注意
uni-appは、H5に公開されるときにすべてのvue文法をサポートします。アプリとアプレットに公開する場合、プラットフォームの制限により、すべてのvue文法を実装することは不可能ですが、uni-appは、vue文法の最も高いサポートバージョンです。終了フレーム。この記事では、違いを詳しく説明します。

ライフサイクル
ユニアプリは、Vueインスタンスのライフサイクルを完全にサポートし、アプリケーションのライフサイクルとページのライフサイクルも追加します。

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

注意

オプションのプロパティや、コールバックに矢印関数を使用しないでください（created：（）=> console.log（this.a）またはvm。$ watch（ 'a'、newValue => this.myMethod（））など）。アロー関数は親コンテキストにバインドされているため、これは期待どおりのVueインスタンスではなく、this.aまたはthis.myMethodも未定義になります。
Vueがマウントされているのではなく、ユニアプリのonReadyを使用することをお勧めします。
作成されたvueではなく、uni-appのonLoadを使用することをお勧めします。
テンプレート構文
uni-appはVueテンプレート構文を完全にサポートしています。

詳細については、公式のVueドキュメント：テンプレート構文を参照してください。

マニフェストで古い非カスタムコンポーネントモード、つまり「usingComponents」：falseを使用する場合、一部のテンプレート構文はサポートされませんが、このモードは推奨されなくなりました。詳細をご覧ください。

古い非カスタムコンポーネントモードはこの状況をサポートしていません。

純粋なHTMLをサポート
しません一部の複雑なJavaScriptレンダリング式を
サポートしませんフィルター
データをサポートしません属性
データは、初期データオブジェクトを返す関数として宣言する必要があります。それ以外の場合は、ページを閉じても、データは自動的に破棄されず、ページを再度開いたときに表示されます。最後のデータ。

//正しい使用法、関数を使用してオブジェクトを返す
data（）{ return { title： 'Hello' } }

//エラーの文言はページを再び開くことにつながり、最後にデータがデータを表示
するとき：{ title： 'the Hello' } グローバル変数のグローバル変数の実装は、標準Vueシングルファイルモードの開発に従う必要があります。詳細なリファレンス：ユニアプリグローバル変数のいくつかの実装

lassがサポートする構文：

111
222
333
444
555
スタイルでサポートされる構文：

666
777
非H5端末はVue公式ドキュメントをサポートしていません：ClassとStyleのバインディングでのclassObjectとstyleObject構文。

サポートされていない例：

注：pxピクセル値を次のように設定します：style = ""。値は実際のピクセルであり、コンパイラーによって変換されません。

さらに、次のように、computedメソッドを使用してクラスまたはスタイル文字列を生成し、ページに挿入できます。

<!-- 不支持 -->
<view class="container" :class="computedClassObject"></view>

コンポーネントで使用

H5以外の端末は現在、カスタムコンポーネントでのClassおよびStyleバインディングの使用をサポートしていません

計算属性
公式Vueドキュメントの完全サポート：計算属性。

条件付きレンダリング
Vue公式ドキュメントの完全サポート：条件付きレンダリング

リストレンダリング
完全なVueリストレンダリングVue公式ドキュメント：リストレンダリング

キー
リスト内のアイテムの位置が動的に変化するか、新しいアイテムがリストに追加され、リスト内のアイテムに独自の特性とステータス（入力内容など）を維持させたい場合選択された状態）、リスト内のアイテムの一意の識別子を指定するには、：keyを使用する必要があります。

：key値は2つの形式で提供されます

配列内のアイテムのプロパティをループするには、v-forを使用します。プロパティの値は、リスト内の唯一の文字列または数値である必要があり、動的に変更することはできません。
アイテム自体をv-forループで使用します。現時点では、アイテム自体が一意の文字列または数値である必要があります。
データの変更によってレンダリングレイヤーが再レンダリングされるようトリガーされると、キーを持つコンポーネントが修正され、フレームワークがそれらを確実に並べ替えます。コンポーネントが独自の状態を維持することを保証し、リストのレンダリングの効率を向上させるために再作成されません。

キーを指定しない場合、警告が報告されます。リストが静的であることがわかっている場合、またはその順序に注意を払う必要がない場合は、無視するように選択できます。

注意：

イベントマッピングテーブルにないネイティブイベントを使用することもできます。たとえば、マップコンポーネントのregionchangeイベントは、コンポーネントで@regionchangeとして直接書き込まれます。同時に、このイベントも非常に特殊です。イベントタイプの開始と終了が2つあるため、handleProxyを使用できません。イベントの種類を区別するため、このタイプのイベントをリッスンすると、イベント名とイベントタイプの両方が<map @regiοnchange=“ functionName” @ end =“ functionName” @ begin =“ functionName”>になります。。
为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。
事件修饰符
.stop：各平台均支持，使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为
.prevent 仅在 H5 平台支持
.self：仅在 H5 平台支持
.once：仅在 H5 平台支持
.capture：仅在 H5 平台支持
.passive：仅在 H5 平台支持
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent=“moveHandle”，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。
<view class=“mask” @touchmove.stop.prevent=“moveHandle”>
按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。

フォームコントロールバインディング
公式Vueドキュメント：フォームコントロールバインディングをサポートします。

開発プロセスではuni-app：formコンポーネントを直接使用することをお勧めします。

コンポーネント
Vueコンポーネント
コンポーネントは、Vue.js全体の中で最も複雑な部分であり、公式のVueドキュメントであるコンポーネントをサポートしています。

単一ファイルコンポーネント（.vueコンポーネント）の形式でのみサポートされます。その他：動的コンポーネント、カスタムレンダリング、

uni-appコンポーネント
uni-appは、ピッカー、マップなどの豊富なUIコンポーネントを提供します。ネイティブコンポーネントのイベントバインディングは、bindchange =” eventNameなどのVueイベントバインディング構文でバインドする必要があることに注意してください。「イベント、@ change = "eventNameのように記述する必要があります"

例

<picker mode =“ date”：value =“ date” start =“ 2015-09-01” end =“ 2017-09-01” @ change =“ bindDateChange”>

現在の選択：{ {date}}

グローバルコンポーネント
ユニアプリは、main.jsでグローバルに登録する必要があるグローバルコンポーネントの構成をサポートしており、コンポーネントは登録後にすべてのページで使用できます。

注：Vue.componentの最初のパラメーターは、静的ストリングでなければなりません。

例

main.jsでのグローバル登録

import Vue
from'vue ' import pageHead from' ./
components / page- head.vue ' Vue.component（' page-head '、pageHead）
コンポーネントは、index.vueで直接使用できます

よくある質問前のページでデータを渡す方法グローバルデータとグローバルメソッドを設定する方法アプリのonErrorをキャプチャする方法コンポーネントプロパティの設定が有効にならないソリューションnvue Weexの予防策を使用するHTML5 +の予防策を使用する条件付きコンパイル条件付きコンパイルは特別なコメントを使用する目安として、コンパイル時にこれらの特別なコメントに従って、コメント内のコードを異なるプラットフォームにコンパイルします。

書き込み方法：#ifdefまたは#ifndef + **％PLATFORM％**で始まり、＃endifで終わります。

APIの条件付きコンパイル

// #ifdef％PLATFORM％
プラットフォーム固有のAPI実装
// #endif
コンポーネントの条件付きコンパイル
pages.json条件付きコンパイル
静的ディレクトリ条件付きコンパイル
+パフォーマンス最適化の提案
+ユニアプリクロスターミナル開発の考慮事項
+効率的な開発スキル

コードブロックを使用してコンポーネントテンプレート
を直接作成する開発効率を向上させるために、HBuilderXは一般的なユニアプリコードをuで始まるコードブロックにカプセル化します。たとえば、ulistと入力してテンプレートタグでEnterキーを押すと、次のコードが自動的に生成されます。

{ {item.value}}コードブロックは、タグコードブロックとJSコードブロックに分かれています。uShowToastと入力してスクリプトタグでEnterキーを押すと、次のコードが自動的に生成されます。

uni.showToast（{ title： ''、mask：false duration：1500 }）; uni-appはコードブロックをサポートしています。以下のリストを参照してください。

タグコードブロック

uButton
uCheckbox
uGrid
uList
uListMedia
uRadio
uSwiper
JSコードブロック

uRequest
uGetLocation
uShowToast
uShowLoading
uHideLoading
uShowModal
uShowActionSheet
uNavigateTo
uNavigateBack
uRedirectTo
uStartPullDownRefresh
uStopPullDownRefresh
uLogin
uShare
uPay

Chromeでデバッグする
さまざまな小さなプログラム開発ツールを使用してデバッグする
アプリのデバッグについて
+ユニアプリ
で使用できるFAQ UIフレームワーク：http://ask.dcloud.net.cn/article/35489

Uni-appアプリ全体のパッケージアップグレードの検出：https://ask.dcloud.net.cn/article/34972

ユニアプリリソースのホットアップデート：https://ask.dcloud.net.cn/article/35667

ユニアプリナビゲーションバー開発ガイド：https://ask.dcloud.net.cn/article/34921

uni-appはグローバル変数を実装します：https://ask.dcloud.net.cn/article/35021

WeChatアプレットをユニアプリに変換するためのガイドライン：https://ask.dcloud.net.cn/article/35786

mpvueプロジェクト（コンポーネント）移行ガイド、例、およびリソースの概要：https://ask.dcloud.net.cn/article/34945

uni-appはnpmサードパーティライブラリを参照します：https://ask.dcloud.net.cn/article/19727

ユニアプリで使用されるサードパーティのSDKとWeChatアプレットのリソースの概要：https://ask.dcloud.net.cn/article/35070

ユニアプリ（マップ、ビデオ、livepusher、バーコード、nviewを含む）で5つ以上のネイティブインターフェイスコントロールを使用：https://ask.dcloud.net.cn/article/35036

H5バージョンのuni-appを使用するための注意事項：https://ask.dcloud.net.cn/article/35232

ユニアプリリンク（HBuilderX、cli、カスタムベース、ローカルSDK、クラウドパッケージエンジン）のバージョンの互換性に関する説明：https://ask.dcloud.net.cn/article/35845

ユニアプリで非画像ファイルと動画ファイルを選択してアップロードします。https：//ask.dcloud.net.cn/article/35547

=============================================

テンプレートの構文とデータバインディング
例
1.データを要求し、データをニュース配列に格納し、ページテンプレートのリストを自動的に更新する

        uni.request({
            url: 'https://unidemo.dcloud.net.cn/api/news',
            method: 'GET',
            data: {},
            success: res => {
                console.log(res);
                this.news = res.data;
            },
            fail: () => {},
            complete: () => {}
        });

2.受信記事IDをクリックし、uni.navigateTo url + idから記事ページを開きます

      @tap="tapnews" :data-newsid="item.post_id"

        tapnews(e){
            console.log(e);
            var newsids= e.currentTarget.dataset.newsid;
            console.log(newsids);
            uni.navigateTo({
                url: '../info/info?newsid='+ newsids
            });
            }

3.記事ページを表示する

        uni.request({
            url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+ e.newsid,
            method: 'GET',
            data: {},
            success: res => {
                this.title = res.data.title;
                this.strings = res.data.content;
                console.log(strings);
                uni.hideLoading();
            },
            fail: () => {},
            complete: () => {} 
        });

ルートディレクトリのpages.json strictモードは、カスタムページテストにジャンプできます

"条件"：{//モード構成、開発中のみ有効
"現在"：0、//現在アクティブなモード（
リストのインデックス項目）"リスト"：[{ "名前"： "ニュース"、//モード名"Path"： "pages / info / info"、//ページを開始します。"query"を選択する必要があります： "newsid = 5196737" //パラメータを開始し、ページのonLoad関数を取得します。} ] }

ユニアプリクロスプラットフォームフレームワークの公式チュートリアル

おすすめ