uni-app実践チュートリアル

Language 2023-05-17 12:01:46 views: null

1. 準備

2. はじめに

  • 開発ツール: HBuilderX
  • クロスセグメント フレームワーク (uniapp は、10 の異なるアプレット プラットフォームにまたがることができる、調整された WeChat アプレット API の形式で一連のクロスターミナル フレームワークをカプセル化します)
  • HTML5+ (ネイティブ iOS、Android をサポート)
  • クラウド開発

3.NVueとは何ですか

uni-app アプリ セクションには、weex の改善に基づいたネイティブ レンダリング エンジンが組み込まれており、ネイティブ レンダリング機能を提供します。

アプリ側では、vue ページを使用する場合は Webview レンダリングを使用し、nvue ページ (ネイティブ vue の略) を使用する場合はネイティブ レンダリングを使用します。1 つのアプリで 2 種類のページを同時に使用できます。たとえば、hello uni-app の例のように、ホームページでは nvue を使用し、第 2 レベルのページでは vue ページを使用します。

nvueは複数の端末でレンダリングしてH5やアプレットを出力することもできますが、nvueのcss記述方法は限られているため、アプリ開発をしない場合はnvueを使う必要はありません。

4. フレームワークの選択

a. レンダリング効率ランキング

ネイティブ > Flutter > RN > Uniapp

b. モバイルエコランキング

ネイティブ > RN > Uniapp > Flutter

c. 学習コストのランキング

Native > Flutter > RN > Uniapp (ただし、実際にはフックが入ることで RN の学習コストは Uniapp とあまり変わりません)

d. フレームワークの簡単な説明

**[flutter]** これは、Android の開発概念を完全に覆す Google が発表した Flutter SDK に従って書かれており、Android も Flutter も Google が開発したものであり、Android SDK は Android 開発に使用されているということを知っておく必要があります。 flutter は同じではなく、自作のセットです。独自の SDK は GPU レンダリング メカニズムを直接使用しており、ユーザーの携帯電話上の非常に直接的なキャンバス描画ビューはすでに非常に優れています。

【reactNative】ブリッジ（ブリッジ）技術も強力！彼は Android と JS の間のブリッジを渡し、途中でコンパイルし、最後に Android コントロールを変換しました。これは javac がクラスをコンパイルするのと少し似ており、最終的にネイティブ コントロールがユーザーの携帯電話上に描画されます。その中でも、オリジナルのページを取得できるため、パフォーマンスの問題がそれほど大きくないため、より人気があります。
比較的言えば、フラッターが最も直接的ですが、現在のユーザーの携帯電話のパフォーマンスに関して、Android は現在 11 に達しており、中間層である一部の変換損失のパフォーマンスは基本的にユーザーには知覚できないことも指摘したいと思います。

**【uniapp】**現在のフレームワークは vue を採用しており、リリース用の APK を生成するためにクラウド パッケージを使用しています。
私はこのフレームワークについて楽観的ではありません。開発者はレイアウト境界を開いてレイアウトを表示でき、完全にユーザーに表示されます。 Webページ形式です 基本的にAndroidとはあまり連携しておりません 連携していても公式がユーザーが利用できるAPIを既に作っています 完全にWebページ形式で作られていますが、パフォーマンス
は公式が多くの Web ページの最適化を行っており、特定のパフォーマンスが一時的にフラッター、reactNative より劣っているため、それほど悪くはありません。

5. 実践的な目標

  1. フォトアルバムや写真から写真を選択し、ページ上に表示します
  2. 画像をbase64エンコードに変換します
  3. Baidu Ai インターフェイスを呼び出して、画像の主な内容を識別します
  4. 認識結果を表示する
  5. 認識結果を利用して、どのゴミ分類に属するかを問い合わせ、結果を表示します
  6. ipa.apk としてパッケージ化して公開する

6.開発

1. プロジェクトを作成する

新しいステップ: [ファイル] > [新規] > [プロジェクト]
ここに画像の説明を挿入

作成が完了すると、ディレクトリは次のようになります。

ここに画像の説明を挿入

Pages.json は WeChat アプレットの app.json に相当し、ルーティングなどの基本的な構成を構成するために使用されます。

2. デバッグ

HBuildX通常のインターフェイスのデバッグは、 のプレビューを通じて調整できます。ただし、WeChat API は WeChat シミュレーターのホストで通常どおり呼び出す必要があります。したがって、WeChat アプレット シミュレーターに対してコードを実行する必要があります。

ここに画像の説明を挿入

プラットフォームはコードをコンパイルして WeChat アプレット コードにパッケージ化し、ホット アップデート モードを開始します。そして、unpackageコンパイルされたコードが保存されるディレクトリが作成されます。

ここに画像の説明を挿入

次に、WeChat アプレット開発者ツールを使用してmp-weixinプロジェクトをインポートする必要があります。

3. スパム写真をアップロードする

開くpages/index/index.vueと、ページのインタラクションデザインは次のようになります。

  1. 写真を撮るか、アルバムから写真を選択します

  2. 画像を Baidu AI に送信して物体情報を識別する

  3. Baidu AIから返された写真オブジェクトの情報に基づいて、そのオブジェクトがどの種類のゴミに属するかを判断します

まずステップ 1 を実装し、templateコードを次のように変更しましょう。

<template>
	<view class="content">
		<button type="primary" @click="btnTaskPhoto">识别通用物体</button>
		<img :src="imageSrc" alt="">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagePath: "",
				imageSrc: ""
			}
		},
		onLoad() {

		},
		methods: {
			btnTaskPhoto() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res);
						this.imagePath = res.tempFilePaths[0];
						this.images2base64();
					}
				});
			},
			images2base64() {
				wx.getFileSystemManager().readFile({
					filePath: this.imagePath,
					encoding: "base64",
					success: (res) => {
						this.imageSrc = 'data:image/png;base64,' + res.data
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>

図に示すように:

ここに画像の説明を挿入

アプレット開発者ツールを開き、次のようにデバッグします。

ここに画像の説明を挿入

アップロードが成功すると、ページに画像が表示されます。
ここに画像の説明を挿入

4. 写真内のオブジェクトを認識する

  • まず、Baidu Smart Cloudに入ってアカウントを登録し、[製品] > [人工知能アプリケーション] > [画像認識] を選択します。
    ここに画像の説明を挿入

  • 次に、アプリケーションリストを入力してアプリケーションを作成します。作成が完了すると、アプリケーションのAPI Key合計を取得できますSecret Key。
    ここに画像の説明を挿入

  • 次に、認証インターフェイスを介してアクセス トークンを取得します。

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【百度云应用的AK】&client_secret=【百度云应用的SK】

  • 一般的なオブジェクトおよびシーン認識 APIを呼び出します。修正images2base64方法：

    images2base64() {
	wx.getFileSystemManager().readFile({
		filePath: this.imagePath,
		encoding: "base64",
		success: async (result) => {
			this.imageSrc = 'data:image/png;base64,' + result.data;
			// 获取accexx_token
			const params = {
				'client_id': 'llwgkZX3f5hYcP2xiaK7ewdf',//自己的Api Key
				'client_secret': 'GaQgeSPhjX8Sv21uAxG0G3NpGGVELvYn'//自己的Secret Key
			};
			const res1 = await uni.request({
				url: `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${params.client_id}&client_secret=${params.client_secret}`
			})
			const {
				access_token
			} = res1.data;
			// 提交图片到百度AI,识别
			const res2 = await uni.request({
				method: "POST",
				url: `https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general`,
				header: {
					"Content-Type": "application/x-www-form-urlencoded"
				},
				data: {
					access_token: access_token,
					image: encodeURI(result.data)
				}
			})
			console.log(res2);
		}
	})
}

    ただし、次のようなエラーが表示されます。Open api qps request limit reached

ここに画像の説明を挿入

画像

再度認識しようとすると、すでに認識された結果が得られます。

ここに画像の説明を挿入

5. 認識結果を表示する

//调用,res2是百度识别的结果
this.parseResult(res2.data.result);

//添加methods
parseResult(result) {
    
    
    let itemList = result.map(item => item.keyword + item.score);
    uni.showActionSheet({
    
    
    	itemList: itemList
    })
}

ページは次のように表示されます。

七、ユニクラウド

1. Alibaba Cloud 開発環境を作成する

ここに画像の説明を挿入

uni-cloud バックエンド サービス スペース リスト管理インターフェイスに入り、[新しいサービス スペース] をクリックすると、新しいポップアップ ウィンドウが表示され、Alibaba Cloud と Tencent Cloud を選択でき、Alibaba Cloud の各アカウントで無料のサービス スペースを作成できます。図に示すように:
ここに画像の説明を挿入
ここに Aliyun スペースを作成します。
ここに画像の説明を挿入
次に、戻ってディレクトリをHBuilderX右クリックし、[クラウド サービス スペースまたはプロジェクトの関連付け] をクリックします。uniCloud
ここに画像の説明を挿入

関連付けが成功すると、uniCloud関連付けられたクラウド サービス スペースの名前がディレクトリの右側に表示されます。
ここに画像の説明を挿入

2. 新しいクラウド機能を作成する

uniCloudディレクトリを右クリックして、 を選択します新建云函数/云对象。

ここに画像の説明を挿入
ここに画像の説明を挿入

uniCloudImageClassifyディレクトリの下に追加のディレクトリが作成され、 index.js2 つのpackage.jsonファイルが含まれます。WeChat に似た小さなプログラム ファイル構造;
ここに画像の説明を挿入
/ImageClassify/index.jsコードは次のとおりです。

'use strict';
exports.main = async (event, context) => {
	const params = {
		'client_id': 'llwgkZX3f5hYcP2xiaK7ewdf',
		'client_secret': 'GaQgeSPhjX8Sv21uAxG0G3NpGGVELvYn'
	};
	// 获取accexx_token
	const res = await uniCloud.httpclient.request(
		`https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${params.client_id}&client_secret=${params.client_secret}`,
		{
			method:"GET",
			dataType: "json",
		}
	)
	const access_token = res.data.access_token;

	// 提交图片到百度AI,识别
	let res2 = await uniCloud.httpclient.request(
		"https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general", {
			method: "POST",
			header: {
				"Content-Type": "application/x-www-form-urlencoded"
			},
			dataType: "json",
			data: {
				access_token: access_token,
				image: event.image
			}

		});
	//返回数据给客户端
	return res2.data;
};

デプロイメントのアップロード:
ここに画像の説明を挿入
アップロードが完了すると、クラウド サービス スペースでクラウド機能を確認できます。

ここに画像の説明を挿入

デバッグを行う場合は、コンソールの右上隅でブレークポイント デバッグを有効にするだけで済みます。再度リクエストすると、クラウド関数のブレークポイントがトリガーされます。
ここに画像の説明を挿入

3. クラウド関数を呼び出す

変更されたpages/index/index.vue方法image2base64:

images2base64() {
	let that = this;
	wx.getFileSystemManager().readFile({
		filePath: this.imagePath,
		encoding: "base64",
		success: async (result) => {
			this.imageSrc = 'data:image/png;base64,' + result.data;
			uniCloud.callFunction({
				name: "ImageClassify",
				data: {
					image: encodeURI(result.data)
				},
				success: (res) => {
					console.log(res);
					that.parseResult(res.result.result);
				}
			})

		}
	})
},
parseResult(result) {
	let itemList = result.map(item => item.keyword + item.score);
	uni.showActionSheet({
		itemList: itemList
	})
}

しかし、実行すると次のプロンプトが表示されます。应用未关联服务空间，请在uniCloud目录右键关联服务空间

ここに画像の説明を挿入

再実行する必要がありますHBuilder X。

4. デバッグ

a. ローカルクラウド機能に接続する

ここに画像の説明を挿入

アプレットシミュレータで再認識されると正常です。

ここに画像の説明を挿入

ネットワークをチェックすると、アクセスされているのはローカル IP であることがわかります。
ここに画像の説明を挿入

b. クラウド機能への接続

ここに画像の説明を挿入

ご覧のとおり、これはクラウドにアクセスするためのインターフェイスです。

ここに画像の説明を挿入

8、条件付きコンパイル

条件付きコンパイルには特別なコメントが付けられ、コメント内のコードはコンパイル時にこれらの特別なコメントに従ってさまざまなプラットフォームにコンパイルされます。すべてを条件付きでコンパイルできます;公式ドキュメント

// #ifdef APP-PLUS
	console.log("我在原生App环境里");
// #endif

// #ifdef MP-WEIXIN
	console.log("我在微信小程序环境里");
// #endif

9. iOS環境への適応

1. 条件付きコンパイル

上記で選択した写真をbase64に変換するときに使用しますが、wx.getFileSystemManageriosでは正しく動作しません。ここでは、条件付きコンパイルを使用して、異なる API を実行するための異なる環境を区別できます。

まだ変更しますpages/index/index.vue:

images2base64() {
	let that = this;

	// #ifdef APP-PLUS
	// html5+.io文档地址：https://www.html5plus.org/doc/zh_cn/io.html
	plus.io.resolveLocalFileSystemURL(this.imagePath, entry => {
		entry.file(file => {
			let reader = new plus.io.FileReader();
			reader.onloadend = (e) => {
				//e.target.result是base64文件编码，注意是带编码头的。所以我们需要去掉编码头(data:image/jpeg;base64,)。
				console.log(e.target.result);
				const base64 = e.target.result.substr(22); //截取掉文件头
				uniCloud.callFunction({
					name: "ImageClassify",
					data: {
						image: base64
					},
					success: (res) => {
						console.log(res);
						that.parseResult(res.result.result);
					}
				})
			}
			reader.readAsDataURL(file);
		});
	})
	// #endif
	
	// #ifdef MP-WEIXIN
	wx.getFileSystemManager().readFile({
		filePath: this.imagePath,
		encoding: "base64",
		success: async (result) => {
			this.imageSrc = 'data:image/png;base64,' + result.data;
			uniCloud.callFunction({
				name: "ImageClassify",
				data: {
					image: encodeURI(result.data)
				},
				success: (res) => {
					console.log(res);
					that.parseResult(res.result.result);
				}
			})

		}
	})
	// #endif
},

2. デバッグ

開く: [実行] > [電話機またはシミュレーターまで実行] > [IOS ドックまで実行]。初めて開くときは、シミュレーター プラグインをインストールする必要があります

React Native と Flutter では、IOS アプリケーションを開発するために Mac を使用する必要があります。

uniapp を使用する場合、クラウド パッケージがあるため Mac は必要ありませんが、デバッグはできません。デバッグが必要な場合は、やはり Mac を使用する必要があります。

10. ゴミの分別

1.プラグインマーケットクラウド機能を利用する

プラグインマーケットを開いて「ゴミ分類」を検索
ここに画像の説明を挿入

プラグインをインポートします (このプラグインは内部でサードパーティの http API を使用して、オブジェクトがどのようなタイプのガベージであるかを検索して判断します。サードパーティの http API は非推奨になっているため、このプラグインは実際には無効です。ここではステップバイステップのデモンストレーションのみを目的としています):
ここに画像の説明を挿入

ページが自動的に開きHbuilder X、次のプロンプトが表示されます。
ここに画像の説明を挿入

「OK」をクリックして、プラグインをローカルのクラウド機能ディレクトリにダウンロードしますuniCloud。
ここに画像の説明を挿入

その後、デプロイメントを手動でアップロードできます。次に、ガベージを特定した後、ビジネス ロジックを調整します。

parseResult(result) {
	if (!result || !result.length) {
		return null;
	}
	this.selectRecResult(result[0].keyword);
},
selectRecResult(name) {
	uniCloud.callFunction({
		name: "TrashClassify",
		data: {
			keyword: name
		},
		success: (res) => {
			console.log(res);
			//拿到区分垃圾分类后的信息，后面可以做相应的业务处理
		}
	})
}

イレブン、荷造り

HBuilderXネイティブ アプリの場合はクラウド パッケージが提供されており、Mac を持っていない場合でも、iOS をリリースしたい場合は直接それを使用できます。

ここに画像の説明を挿入ここに画像の説明を挿入

Supongo que te gusta

Origin blog.csdn.net/bobo789456123/article/details/129073157
Recomendado
Clasificación
Diario
Más
2024-06-04(0)
2024-06-03(1)
2024-06-02(0)
2024-06-01(2)
2024-05-31(0)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(1)

Code World

© 2018 codetd.com