1. uni-appの概要

uni-appはVue.jsを使用してクロスプラットフォームアプリケーションを開発するフロントエンドフレームワークです。開発者はVue.jsのコードを記述することで、uni-appがiOS、Android、WeChatミニプログラムなど複数のプラットフォームにコンパイルし、正確な実行と優れたユーザー体験を保証します。uni-appはVue.jsを継承しており、完全なVue.js開発体験を提供します。uni-appのコンポーネント仕様と拡張APIはWeChatミニプログラムと基本的に同じです。uni-appはクロスプラットフォーム対応数が多く、パフォーマンス体験が優れ、学習コストが低く、開発コストが低いという主要な利点を備えています。

2. uni-appプロジェクトのディレクトリ構成

page.jsonはルーティング情報を保存します。その中のtabBarセクションではナビゲーションバーを設定できます。

"tabBar": {
   "color": "#333333",
   "selectedColor": "#D1BBFF",
   "borderStyle": "white",
   "backgroundColor": "#FFFFFF",
   "list": [{
       "pagePath": "pages/index/index",
       "iconPath": "static/tabs/index.png",
       "selectedIconPath": "static/tabs/index1.png",
       "text": "ホーム"
     }
   ]
 }

main.jsはvueインスタンスの初期化を担当し、グローバル属性とコンポーネントを定義します。

3. uni-appを使用する理由

一方では、以前にHbuilderとuni-appの使用を学習したことがあり、比較的慣れているためです。もう一方では、アダプテーションの問題を心配する必要がなく、CSSレイアウトでrpxを単位として使用することで、異なる解像度のアダプテーション問題を完全に回避できます。マルチプラットフォーム統合により、H5だけでなく、主要なプラットフォームのミニプログラム、AndroidおよびiOSのネイティブAPPにもリリースできます。

4. フロントエンドとバックエンドのインタラクション方法（リクエストのカプセル化）

index.jsでget、postリクエストをカプセル化し、パラメータを受け取りデータを返します。http.jsでバックエンドインターフェースをカプセル化し、ページの呼び出しと後のメンテナンスを容易にします。 使用例：

onLoad(){
 this.$http.login().then(res=>{
 console.log(res)
 })
 }

パラメータを渡す必要がある場合は、loginメソッドで直接login({name: 'xxx', sex: 'yyy'})のように渡すことができます。