uniapp開発アプレットの開発仕様をまとめて共有する

この記事では、uniappクロスドメインに関する関連知識を提供します。uni-app は、vue.js を使用してクロスプラットフォーム アプリケーションを開発するフロントエンド フレームワークです。以下は開発の概要です。 uniapp 開発仕様を使用した小さなプログラムの説明が、皆様のお役に立てれば幸いです。

推奨: 「uniapp チュートリアル 」

1. プロジェクト構造

uniapp の作成完了後project のプロジェクトのディレクトリ構造は次のとおりです。以下にプロジェクトの構造を簡単に紹介しますが、これを読んでも理解できない場合は、まず Vue を学習することをお勧めします。 uniapp は Vue のコア構文に基づいて開発されているため、Vue の学習が必要です。

• .hbuilderx は、このプロジェクトの開発に使用されるツール HBuilderX の開発構成ディレクトリであり、通常、その内容を手動で変更する必要はありません。このディレクトリを使用すると、他の人がプロジェクトをインポートするときに、開発ツールの構成情報がデフォルトで使用されます。開発ツールの使用習慣は人それぞれ異なるため、通常、このディレクトリはバージョン管理ウェアハウスにアップロードされません。
• pages は、すべての vue ページの保存ディレクトリです。独自の計画に従って、pages ディレクトリの下にサブディレクトリを作成できます。
• 静的ディレクトリには、通常、プロジェクトによって参照される静的リソースが保存されます。 : 画像、アイコン、フォント
• unpackage が各プラットフォームのパッケージ化ファイルを保存するまで待ちます。プロジェクトのパッケージ化後の結果ファイルはこのディレクトリに保存されます。
• App.vue はプロジェクトのルート コンポーネントであり、Vue の単一ページ エントリ ファイルです。アプリケーション レベルのライフ サイクル関数はこのページで監視できます。
• main.js はプロジェクトの js エントリ ファイルで、vue ページをインスタンス化し、vue ページに必要なコンポーネント プラグインやその他のコンテンツを統合します。
• index.html は、プロジェクトのホームページであり、プロジェクトのエントリ ページです。 main.js がインスタンス化された後の Vue ページの結果は、最終的にホームページにレンダリングされます。
• Manifest.json はアプリケーション構成ファイルで、アプリケーション名、アイコン、権限、起動ページの設定、プラグイン、その他の情報を指定するために使用されます。
• pages.json は、ファイル パス、ウィンドウ スタイル、ネイティブ ナビゲーション バーの構成など、アプリケーションの表示ページを構成します。
• uni.scss ファイルは、主にアプリケーション ページの全体的な表示スタイルを制御するために使用されます。テキストの色、背景色、境界線の色、画像サイズなどのいくつかの SCSS 変数が事前設定されます。

最後に、一般的に、vue のコンポーネント コンポーネントを保存するための components ディレクトリを手動で作成する必要もあります。

2. 開発仕様

Vue シングル ファイル コンポーネント (SFC) 仕様に従います

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: &#39;Hello&#39;
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
//这里可以书写css、sass、less等样式及样式预处理器
</style>

• vue ファイルには トップレベル# を 1 つだけ含めることができます##Template
vue ファイルには 1 つのみ含めることができます
• <script></script>スクリプト定義
vue ファイルには 1 つ以上の
• スタイル定義

uniapp のページ開発は、Vue 単一ファイル コンポーネント ( SFC））仕様です。また、uniapp では js を使用して HTML ドキュメントに対して DOM 操作を実行することはできないため、Vue の MVVM データ バインディング開発方法に厳密に従ってください。

コンポーネントとインターフェースの仕様

標準の HTML タグは uniapp では使用できないことに注意してください。uniapp コンポーネントの名前と使用方法の定義は WeChat アプレットに近いです。以下を参照してください。 uni- アプリ コンポーネントのドキュメントについては、WeChat アプレット コンポーネントのドキュメントを参照してください。例:

タグは、uniapp では標準 HTML の

タグと同じ意味を持ちます。画像を直接使用することはできません。HTML で img を使用するには、uniapp のコンポーネント タグ画像を使用する必要があります。

uniapp のインターフェイス機能 (JS API) は WeChat アプレット仕様に非常に近いですが、プレフィックス

wx は uni に置き換える必要があります。詳細については、uni-app インターフェイスの仕様を参照してください

3. CSS スタイルの仕様

##グローバル スタイルとローカル スタイル

uni.scss

いくつかのグローバル スタイル scss 変数がファイルにプリセットされています。これらの変数は、テキストの色、背景の色、境界線の色など、アプリケーションの全体的なスタイルを定義するために使用されます。このファイルは任意に変更しないでください。変更する場合は、変数の値のみを変更し、変数名は変更しないでください。では、カスタマイズされたグローバル スタイルを追加したい場合は、どうすればよいでしょうか?次の方法を参照してください。

まず、app.scss などのスタイル ファイルを自分で作成し、このファイルにカスタム スタイルを記述します。ファイルを /static/style ディレクトリに配置します。

• 次に、app.scss ファイルの先頭に、uni.scss ファイルを導入します。導入ステートメントは次のとおりです: @import '~@/uni.scss' ;
• 最後に、このカスタム グローバル スタイル ファイルを App と vue のスタイルに導入します

•  <style>
      @import &#39;~@/static/style/app.scss&#39;;
   </style>

uniapp のローカル スタイル実装は vue ファイルに基づいており、特定の vue で定義されますスタイルは、vue のレンダリング範囲内でのみ有効です。

尺寸响应式

uniapp框架为了更好的适配不同的移动端屏幕，设置了750rpx为屏幕的基准宽度。如果屏幕宽度小，rpx显示效果会等比缩小；如果屏幕宽度大，rpx显示效果会等比例放大。举例说明： 如果设计稿的元素宽度是600px，某元素X的宽度是100px，那么该元素X在uniapp里面设置的宽度应该是：750 * 100 /600 = 125rpx。

如果大家觉得自己手动计算比较麻烦，可以在文件manifest.json中设置transformPx的值为true，项目会自动将px转换为rpx。

字体的使用

uniapp支持字体的引用方式分为2种情况，如果字体文件小于 40kb，uniapp会自动将其转化为 base64 格式；将字体文件放置到static目录下，然后通过font-face定义字体。

 @font-face {
     font-family: 'test-icon';
     src: url('~@/static/iconfont.ttf');
 }

如果字体文件大于等于 40kb， 需开发者自己转换将字体文件转换成Base64字符串，否则使用将不生效；将转换之后的Base64字符串粘贴到下文的位置，完成字体的定义。

@font-face {
    font-family:  'test-icon';
    font-weight: normal;
    font-style: normal;
    src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');  
}

字体的使用方式是通用的css样式，使用font-family即可。

请使用flex布局方式

为更好的支持跨平台，uniapp框架建议使用css的Flex方式布局。

推荐：《uniapp教程》

以上がuniapp開発アプレットの開発仕様をまとめて共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。