この記事では、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: 'Hello'
}
},
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 '~@/static/style/app.scss';
</style>ログイン後にコピー
尺寸响应式
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
