Uniappゼロベース開発検討記(1)～プロジェクトの事前作成～

私には C# と Python の基礎があり、APP または Web 開発を学びたいと常に思っていました。現在では様々な便利なアプリケーションアプリが存在しており、本来の winform の適用範囲は非常に限られていますが、良い学習チャネルが無く、フロントエンド/バックエンド/JS/NODE/VUE/CSS/HTML5 などのさまざまな概念が多すぎます。とても複雑すぎてどこから始めればよいのかさえわかりません。 Web ページで Uniapp の開発チュートリアルを偶然見つけました。比較的簡単そうに見えました。HBuilderX をダウンロードした後、公式コードが大量にあったので、公式コードをコピペして簡単なページをいくつか作り、理解した内容を載せたいと思いました知識を定着として書き留め、毎日少しずつ進歩し、後で正しく完全に適用できるようにします。

1. まずは公式ヘルプファイルを確認してください

優れた学習は常に公式ヘルプファイルから始まり、ヘルプの入口から入門チュートリアルを開きます。
ここに画像の説明を挿入します
アドレス https://hx.dcloud.net.cn/Tutorial/StartedTutorial

HBuilderX の概要をざっと読んだ後、HBuilderX が強力で使いやすいことがわかりましたが、そうは思えなかったので、Uni-App 開発ドキュメントに直接ジャンプしました。
アドレスhttps://uniapp.dcloud.net.cn/
ここに画像の説明を挿入します
開発ドキュメントの中核部分は、新しいプロジェクトで次のことが可能であることが判明したことです。テンプレートはたくさんあります。テンプレートとは、コピーして貼り付けることができることを意味します...< /span>
このように、コピー＆ペーストで開発することで、非常に理解しやすくなります。。

2. コンポーネントのサンプルプロジェクトを開く

新しいプロジェクトを選択すると、通常のプロジェクト/uni-app/Wap2App/5+App/IDE プラグインの 5 つの基本タイプがあります。uni-app
ここに画像の説明を挿入します
を選択すると、 10 種類のプロジェクトがあります。使用可能なテンプレートは次のとおりです:
最初のテンプレートはデフォルトのテンプレートです。開くと、基本的なプロジェクト構造のみがあり、コンテンツはありません。これは、入力の練習に非常に適しています。基本的なプロジェクトのコード。
2 つ目は uni-app コンポーネントのテンプレートで、さまざまなコンポーネントのコードが含まれています。コンポーネントは winform に似たさまざまなコントロールであり、アプリケーションコードやさまざまなコンポーネントの効果もあります。 . 初心者向けの最適なケーススタディとしてご利用いただけます。
ここに画像の説明を挿入します
3 つ目は、クラウド開発に uniCloud を使用することですが、これはすでにある程度高度なので、まだ学習しません。 4-10 は包括的な応用です。最初に 2 つ目を学習してから、それについて話します。
ここに画像の説明を挿入します
したがって、ここではまず Hello uni-app デモプロジェクトを作成します。
ディレクトリを開き、App.vue を選択し、[実行] メニューで [内蔵ブラウザで実行を選択します。内蔵ブラウザデバッグプラグインをダウンロードする必要があります。先に進むか、外部 Chrome を使用して開くこともできます。
ここに画像の説明を挿入します
コンパイルが完了すると、uni-app コンポーネントのサンプルコードの効果を確認できます。

3. デフォルトのテンプレートプロジェクトを作成する

Demo1 という名前の新しいユニアプリプロジェクトを作成し、デフォルトのテンプレートを選択し、それを学習プロジェクトとして使用します。
このディレクトリの下には多くのサブディレクトリとファイルがありません。
ここに画像の説明を挿入します
コンパイル後に表示されるのは、デフォルトの Pages/index/index.vue です。

タイトルは、pages.json で定義された uni-app です。 a> コード内で読み取れる情報はロゴとイメージタグ内の位置ですsrc="/static /logo.png" の場合、1 つの画像を変更することで別の画像に切り替えることができます。
“navigationBarTitleText”: “uni-app” はindex.vueにありません

{ {title}} バインド変数 title があり、スクリプトの data() 関数の戻り値から Hello として取得されます。

<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>

4. 参照コンポーネントコード修正ページ

index.vue ページは比較的単純なので、Hello uni-app デモプロジェクトのコンポーネントコードを使用して、ログインページにするなどの変換を行い、その使用方法を学びたいと思いました。
Hello uni-app のコンポーネントを確認すると、フォームのページ構造が比較的似ていることがわかりました。そのため、Demo1 の下に新しいコンポーネントディレクトリを作成し、 Hello uni-app のメインディレクトリ form.vue をコピーします
ここに画像の説明を挿入します
これらのサンプルコードを form.vue からコピーし、index.vue に貼り付けます

<form @submit="formSubmit" @reset="formReset">
			<view class="uni-form-item uni-column">
				<view class="title">姓名</view>
				<input class="uni-input" name="nickname" placeholder="请输入姓名" />
				<view class="title">姓名</view>
				<view class="uni-input-wrapper">
				    <input class="uni-input"   name="password" password type="text" placeholder="请输入密码" />
				</view>
			</view>
			<view class="uni-btn-v">
				<button form-type="submit">Submit</button>
				<button type="default" form-type="reset">Reset</button>
			</view>
</form>

実行後の効果は次のとおりです。
ここに画像の説明を挿入します
上記のコードをサンプルコードと組み合わせて変更します

<form @submit="formSubmit" @reset="formReset">
			<view class="uni-form-item uni-column">
				用户名
				<input class="uni-input" name="username" placeholder="请输入用户名" />
				密码
				<view class="uni-input-wrapper">
				    <input class="uni-input"   name="password" password type="text" placeholder="请输入密码" />
				</view>
			</view><br>
			<view class="uni-btn-v">
				<button type= "primary" form-type="submit">登录</button><br>
				<button type="default" form-type="reset">重置</button>
			</view>
		</form>

最終的な効果は次のとおりです:
ここに画像の説明を挿入します
見栄えが良いかどうかは別として、少なくとも初期のスタイルは完成しました。後で、レイアウトとトリガーの変更を徐々に学習します。学習の最初のステップはここで終了です。