記事ディレクトリ
序文
この記事では、主にユニアプリの基本的な状況を紹介し、最初のユニアプリプロジェクトの迅速な作成と操作をガイドします。同時に、プロジェクトのディレクトリ構造とコード仕様について詳しく説明します。これは、ゼロベースのユニアプリの初心者に適しています。
1つ、ユニアプリの紹介
uni-appは、DCloudによって正式にリリースされた重要な製品です。これは、Vue.jsを使用してクロスプラットフォームアプリケーションを開発するためのフロントエンドフレームワークです。公式Webサイトはhttp://uniapp.dcloud.io/です。
Vue.jsコードのセットを作成することにより、開発者はuni-appを使用してiOS、Android、WeChatアプリレットなどの複数のプラットフォームにコンパイルし、正しく実行され、優れたエクスペリエンスを実現し、JSがAPP開発を完了するだけで済むようにすることができます。 、マルチターミナル共有の効果を実現し、開発と学習のコストを大幅に削減：
開発者は多くのプラットフォーム開発テクノロジーを学ぶ必要がなく、多くのフロントエンドフレームワークを研究するだけで、vueに基づいてユニアプリを学ぶだけで十分です。
企業も低コストでカバーできます。より多くのユーザー。
uni-appはVue.jsを継承し、完全なVue.js開発エクスペリエンスを提供します。効率的な開発ツールとして、uni-appは、現在のWeChatおよびその他の小さなプログラムを開始するための最速の方法も提供します。そのコンポーネント仕様と拡張apiおよびWeChat小さなプログラム基本的に同じです。
ある程度のVue.jsとWeChatアップルレットの開発経験を持つ開発者は、ユニアプリをすぐに使い始めて、Android、iOS、アプリレット、その他のマルチエンド開発と同時に互換性のあるマルチエンド互換アプリケーションを開発できます。同時に、条件付きコンパイルの最適化を提供し、エレガントにすることができます。特定のプラットフォーム用にパーソナライズされたコードを記述し、他のプラットフォームに影響を与えることなく独自の機能を呼び出します。
Uni-appは、アプリにパッケージ化されている場合でも5+エンジンを使用します。5+のすべての機能をUni-appで使用できます。アプリ側の実行パフォーマンスは、基本的にWeChatアップルトと同じです。
開発者がユニアプリのコンポーネント、インターフェイス、テンプレートを体験しやすくするために、DCloudはHelloユニアプリデモプログラムをリリースし、iOS、Android、WeChatの各アプリレットに同時に公開できる一連のコードを実現しました。携帯電話を使用して以下のアプリをスキャンできます。コードを使用して、iOSおよびAndroidのネイティブインストールパッケージをダウンロードします。WeChatを使用してアップルトコードをスキャンし、ユニアプリアップルトバージョンを体験することもできます。
2.最初のプロジェクトをすばやく開始します
1.環境を構築する
プロジェクトを開始する前に、次のツールをダウンロードしてインストールする必要があります。
- HBuilderXには
組み込みのユニアプリコンパイラとプロジェクトテンプレートがあります。https： //www.dcloud.io/hbuilderx.htmlをクリックして、インストールせずに対応するシステムの最新バージョンを選択してダウンロードし、解凍したディレクトリを指定した場所に直接解凍して配置できます。使用するパスの下にあるHBuilderX.exeをクリックします。 - WeChat Developer Toolsは
、小さなプログラムのコンパイルとデバッグに使用されます。https：//mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.htmlをクリックして、ダウンロードしてインストールする最新バージョンを選択してください。
2.プロジェクトを作成して実行します
プロジェクト点击工具栏里的文件- 新建->项目を作成し选择uni-appてプロジェクト名を入力できます。たとえばhello uniapp、[作成]をクリックしてユニアプリを正常に作成するか、[テンプレートから作成]をクリックして[hello-uniapp]を選択して公式の例を体験します。
概略図は次のとおりです。
作成後、実行およびデバッグできます。ブラウザー、携帯電話またはシミュレーター、アップルトシミュレーター、およびその他の実行モードを選択できます。
（1）スモールプログラムモードで実行
します。hellouniappプロジェクトに入り、ツールバー运行->运行到小程序模拟器->微信开发者工具をクリックしてプロジェクトをコンパイルし、WeChat開発者ツールでuni-appを体験します。uni -appは、デフォルトでルートディレクトリのunpackageディレクトリにプロジェクトをコンパイルします。
概略図は次のとおりです。
HBuilderXでコンパイルして実行するWeChat開発者ツールを選択した後、表示と操作のためにWeChat開発者ツールシミュレータが自動的に呼び出されることがわかります。
注：
初めて使用する場合は、WeChat開発者ツールのインストールパスを構成して正常に実行する必要があります。同時に、HBuilderXがWeChat開発者ツールを呼び出すことができるように、WeChat開発者ツールの設定オプションのセキュリティ設定でサービスポートを開く必要があります。次のように：
HBuilderXがWeChat開発者ツールを正常に起動できない場合、開発者は手動で起動してから、ユニアプリプロジェクトのパスをWeChat開発者ツールにコピーし、HBuilderXで開発する必要があります。これにより、WeChat開発者ツールでリアルタイムを確認できます。シミュレーション効果。
（2）実機操作
携帯電話を接続してUSBデバッグをオンにし、hello uniappプロジェクトに入り、ツールバーをクリックすると、运行 -> 真机运行 -> 选择运行的设备以下のようにデバイスでuni-appを体験できます。
携帯電話のインターフェースは次のとおりです。
注：
実際のマシンで実行するには、アプリケーションの表示を設定する必要があります。hbuilderXにログインした後、クラウドをクリックして取得します。
デバッグして実行するときは、次のように、ショートカットボタンを直接クリックして、実行するデバイスを選択することもできます。
3つのユニアプリディレクトリ構造とコード仕様
1.ディレクトリ構造
作成したばかりのプロジェクトからわかるように、ユニアプリプロジェクトの一般的な構造はおおよそ次のとおりです。
C:.
│ App.vue
│ main.js
│ manifest.json
│ pages.json
│ project.config.json
│ uni.scss
│
├─pages
│ └─index
│ index.vue
│
├─static
│ logo.png
│
└─unpackage
その中に
は、project.config.jsonがプロジェクトのグローバル構成ファイルであり、APP IDなどのコアパラメーターを構成し
ます
。main.jsはVue初期化エントリファイルです。App.vueはアプリケーション構成であり、アプリのグローバルスタイルを構成し、アプリケーションのライフサイクルを監視するために使用されます。
マニフェスト.jsonは、アプリケーション名、appid、ロゴ、バージョンなどのパッケージ情報を次のように構成するために使用されます。
pages.jsonは、ページルーティング、ナビゲーションバー、タブなどのページタイプ情報を構成するために使用され、オブジェクトの形式で定義されます。
静的ディレクトリは、小さなプログラムなどのプロジェクトサイズ要件を満たし、プロジェクト構造を最適化するために静的リソースファイルを格納します
。unpackageはコンパイルされたプロジェクトです。その時に生成されたパッケージ。
2.SFC仕様
私たちが開発したページビューやその他のファイルは、通常、pagesディレクトリにあります。同時に、小さなプログラムの場合、ページには通常、page.wxss（スタイルファイル）、page.js、page.json（構成ファイル）、および4つのファイルが含まれます。 page.wxml（DOMコンポーネント）ファイルですが、uni-appにはそれほど多くのファイルはありません。コンパイル速度や実行パフォーマンスなどの要素を考慮して、WeChatアプリレットとネイティブアプリの端末間の互換性を実現するために、uni-appはページを開発します。仕様規定しているVueの単一ファイルのコンポーネント（SFC）仕様：
.vue。ファイルはHTMLを-のように使用する構文Vueのコンポーネントを記述するために、カスタムファイルタイプである各.vueファイルは、トップレベルの言語のブロックの3種類が含まれ<template>、（テンプレート層を定義します）<script>（JSレイヤー）および<style>（スタイルレイヤー）、オプションのカスタムブロックを追加することもできます。例は次のとおりです。
<template>
<div class="example">{
{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
<custom1>
This could be e.g. documentation for the component.
</custom1>
vue-loaderはファイルを自動的に解析し、必要に応じて各言語ブロックを抽出し、他のローダーによって処理され、最終的にESモジュールにアセンブルされます。デフォルトのエクスポートはVue.jsコンポーネントオプションのオブジェクトです。vue-loaderは、言語ブロックを設定することにより、CSSプリプロセッサ、プリコンパイルされたHTMLテンプレート言語、lang属性などのデフォルト以外の言語の使用をサポートします。
たとえば、Sass構文を使用して次のようにスタイルを記述できます。
<style>
/* write Sass! */
</style>
Vueコンポーネントの最上位の言語ブロックは次のとおりです。
- テンプレート
各.vueファイルには最大で1つの<template>ブロックが含まれ、コンテンツが抽出さvue-template-compilerれ、JavaScript染色関数に前処理された文字列に渡され、最後に<script>エクスポートされたコンポーネントに挿入されます。 - スクリプト
各.vueファイルには最大で1つの<script>ブロックが含まれ、このスクリプトはESモジュールとして実行されます。デフォルトのエクスポートはVue.jsコンポーネントオプションオブジェクトであり、それVue.extend()によって作成された拡張オブジェクトをエクスポートすることもできますが、通常のオブジェクトの方が適しています。ファイル（またはそのlang機能で指定された拡張子）に
一致する.jsWebpackルール<script>は、このブロックのコンテンツに適用されます。 - スタイル
はデフォルト/\.css$/で一致し、.vueファイルには複数の<style>タグを含めることができます。<style>タグには、スコープ属性またはモジュール属性を設定して、スタイルを現在のコンポーネントに適切にカプセル化できます。カプセル化モード<style>が異なる複数のタグを同じコンポーネントに混在させることができます。.cssファイル（またはそのlang機能で指定された拡張子）に一致するWebpackルール<style>は、このブロックのコンテンツに適用されます。 - カスタムブロックブロックなど、プロジェクトの特定のニーズを満たすために、ファイルにカスタムブロックを追加
できます。vue-loaderはタグ名を使用して、対応するブロックに適用する対応するWebpackローダーを検索します。webpack loaderは、vue-loaderのオプションloadsで指定する必要があります。.vue<docs>
.vueファイルを複数のファイルに分割する必要がある場合は、次のように、src属性を使用して外部ファイルをインポートし、さまざまな言語ブロックに対応するタグを使用できます。
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
注：
srcインポートは、webpackモジュール要求と同じパス解決ルールに従うため、相対パスはで./始まる必要があります。
次のように、NPM依存関係からリソースをインポートできます。
<style src="todomvc-app-css/index.css">
Srcインポートは、次のようにカスタムブロックでもサポートされています。
<unit-test src="./unit-test.js">
</unit-test>
ドキュメント仕様はVueシングルファイルコンポーネント（SFC）仕様に近いです。同じインターフェイスは3つの言語ブロックで完成します。詳細については、https：//vue-loader.vuejs.org/zh/spec.htmlを参照してください。
コンポーネントラベルはWeChatアップルレット仕様に近いです。、フォーム、ビュー、ボタンなどを含みます。同時に、標準のHTMLタグを使用することも、jsを使用してdomを操作することもできません。詳細については、ドキュメントhttp://uniapp.dcloud.io/component/READMEを参照してください。
インターフェイス機能（JS API）は近くにあります。 WeChatアップルレット仕様ですが、プレフィックスwxをuniに置き換える必要があります。詳細については、http：
//uniapp.dcloud.io/api/READMEを参照してください。データバインディングとイベント処理はVue.js仕様に近く、アプリとページはライフサイクル：
フレックスレイアウトは小規模なプログラムに推奨され、フレックスは従来のボックスモデルよりも柔軟で制御しやすいため、マルチターミナル操作と互換性を持たせるために、開発にはフレックスレイアウトを使用することをお勧めします。https：// css-tricksを参照してください。 com / snippets / css / a-guide-to-flexbox /およびhttp://www.hcoder.net/tutorials/info_183.html。
総括する
Vue.jsを使用してすべてのフロントエンドアプリケーションを開発するフレームワークとして、uni-appは開発者に優れた利便性を提供し、学習と開発のコストを削減します。現在のプラットフォームの多様性はますます豊富になり、開発ニーズはますます複雑になっています。そのような状況下で、開発者はますます好むようになりました。