uni-app の簡単な紹介を要約して共有する

この記事では、ディレクトリ構造、ライフサイクル、ルーティング、スタイル レイアウト関連の問題など、uni-app に関連する知識を簡単に紹介します。

1. ユニアプリとは何ですか?

uni-app は、Vue.js を使用してすべてのフロントエンド アプリケーションを開発するフレームワークです。開発者は、iOS、Android、Web (レスポンシブ)、およびさまざまな小さなプログラム ( WeChat/ Alipay/Baidu/Toutiao/Feishu/QQ/Kuaishou/DingTalk/淘宝網）、Kuai App およびその他のプラットフォーム。

uni-app の利点

クロスプラットフォーム配布、より優れた実行エクスペリエンス
ミニ プログラムのコンポーネントと API との一貫性;
との互換性weex ネイティブ レンダリング : 開発効率は向上しますが、weex の落とし穴が多いため、ローカル レンダリングの最適化を使用することをお勧めします。
ユニバーサル フロントエンド テクノロジ スタック、学習コストの削減
vue 構文、WeChat アプレット API をサポート
埋め込み mpvue
開発エコロジー、豊富なコンポーネント
npm を介したサードパーティ パッケージのインストールをサポート
WeChat アプレット カスタム コンポーネントと JS SDK をサポート
mpvue コンポーネントおよびプロジェクトとの互換性 (埋め込み mpvue オープンソース フレームワーク)
アプリ側のサポートとネイティブ ハイブリッド コーディング
豊富なプラグイン、DCloud はプラグインを市場にリリースします

2. 機能フレームワーク

3. プロジェクトを作成します

ツールバーで [ファイル] -> [新規作成] -> [プロジェクト] をクリックします:

uni-app を選択します。と入力し、プロジェクト名を入力し、テンプレートを選択して、「作成」をクリックすると、テンプレートが正常に作成されます。

uni-app に付属するテンプレートは Hello uni-app で、これは公式コンポーネントおよび API サンプルです。もう 1 つの重要なテンプレートは uni ui プロジェクト テンプレートです。これは日常の開発に推奨され、一般的に使用される多数のコンポーネントが組み込まれています。

##uni-app の実行

ブラウザ実行: hello-uniapp プロジェクトを入力し、ツールバーの [実行] をクリックし、[Run Go] をクリックします。ブラウザへ -> ブラウザを選択して、ブラウザで uni-app の H5 バージョンを体験します。
1. 
   
実機操作: 携帯電話を接続し、USB デバッグをオンにして、hello-uniapp プロジェクトに入り、ツールバーの [実行] をクリックして、実機操作 -> デバイスを選択します。このデバイスでユニアプリを体験してください。
2. 
   
WeChat 開発者ツールで実行: hello-uniapp プロジェクトを入力し、ツールバーの [実行] をクリックし、ミニ プログラム シミュレーターを実行して、WeChat 開発者ツールを実行し、Uniapp を体験します。 -WeChat開発者ツールのアプリ。
3. 
   **注:** 初めて使用する場合は、正常に実行する前に、ミニ プログラム IDE の関連パスを構成する必要があります。以下に示すように、入力ボックスに WeChat 開発者ツールのインストール パスを入力する必要があります。 H Builder の場合 リアルタイムエフェクト。
   

他の Alipay ミニプログラム、Baidu ミニプログラム、ByteDance ミニプログラム、360 などの操作方法も同様です。興味がある場合は、公式 Web サイトにアクセスして確認してください。
4. ディレクトリ構造

ユニアプリ プロジェクトには、デフォルトで次のディレクトリとファイルが含まれています:

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

5. ライフ サイクル

uni-app は、onLaunch、onShow、onHide およびその他のアプリケーション ライフ サイクル関数をサポートします。

uni-app は、onLoad、onShow、onReady などをサポートします。ライフ サイクル関数
#コンポーネント ライフ サイクル

uni-app コンポーネントでサポートされるライフ サイクルは、Vue 標準コンポーネントのライフ サイクルと同じです。ここにはページ レベルの onLoad やその他のライフ サイクルはありません6. ルーティング

ルート ジャンプ

uni-app には、ナビゲーター コンポーネントを使用してジャンプする方法と、API を呼び出してジャンプする方法の 2 つのページ ルーティング ジャンプ メソッドがあります。

ページ スタック
フレームワークは、現在のすべてのページをスタックの形式で管理します。ルーティングの切り替えが発生すると、ページ スタックは次のように動作します:

// #ifdef H5
    alert("只有h5平台才有alert方法")// #endif

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;}

this.cWidth = uni.upx2px(750);

<style>
    @import "../../common/uni.css";
   .uni-card {
        box-shadow: none;
    }</style>

<view></view>

<view></view>

<!-- 设置页面背景颜色，使用 scoped 会导致失效 -->
page {
  background-color:#ccc;}

/* 背景图片 */
 .bgImg {
     background-image: url('~@/static/logo.png');
 }/* 字体图标 */
 @iconImg {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

以上がuni-app の簡単な紹介を要約して共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。