開発からシェルフまでのuniapp開発APPの全プロセス (1)

フロントエンドでは友人からアプリの開発を手伝ってもらいました. 総合的に検討した結果、ネイティブアプリを使用せず、uniappテクノロジースタックを使用して開発しました.

uniapp は dcloud によって開始されたクロスエンド フロントエンド ソリューションのセットです. コードのセットを介して小さなプログラム, Android, IOS, H5 およびその他のコードを生成できます. 中小プロジェクト向けの絶対的な効率ツールです.

技術アーキテクチャ

フロントエンドはuniappを採用

バックエンドは、バックエンドの管理とインターフェイスに Thinkphp を使用し、オープン ソースのバックエンド管理システム easyadmin のセットを使用しています.これを選択した理由は、単一のコマンドでカード管理ページを自動的に生成でき、迅速に実行できるためです.フィールドフォームの実装、検索などの機能は効率化の成果物と言えます。

データベースは、言うまでもなく最も一般的な mysql データベースを使用します

プロジェクトには多くのビデオ リソースが含まれているため、クラウド ストレージは Qiniu クラウド ストレージを使用します。そのため、静的リソースをクラウド ストレージに配置することをお勧めします。

開発する

uniapp の開発は比較的簡単です. Vue または WeChat アプレットを開発した友人は、ほぼシームレスに始めることができます. 公式ドキュメントを参照するだけで済みます. その API はアプレットの API に似ています. 基本的には wx.xxx を変更することができます.最下層が Vue に基づいているため、uni.xxx に直接使用されるため、開発モードもデータ駆動型モードであり、非常に便利で高速です。

Dcloud の公式 Web サイト ( HBuilderX-Efficient Geek Skills ) から公式エディター Hbuilder をダウンロードし、インストールして開発を開始します。

Hbuilder で「File-New-Project」を選択し、uni-app を選択して uniapp プロジェクトを作成します。uni は、開発者がすぐに開始できるようにいくつかのページ テンプレートも提供します。

[作成] をクリックすると、新しいプロジェクトが自動的に作成され、関連するファイルとディレクトリが初期化されます。

プロジェクトのディレクトリ構造

ページ ディレクトリは、APP ページを書き込むディレクトリです。

静的ディレクトリは、静的リソースが格納されるディレクトリであり、アイコンなどの一部のリソースはここに配置できます

ページ構成

uniapp の各ページ構造は、HTML のタグ要素である template タグに含まれる page タグの 3 つの部分に分けられます.違いは、通常の HTML では <div> タグが使用されるのに対し、< div> タグは uni.view> タグで使用されますが、テンプレートの下に含めることができるビュー タグは 1 つだけであり、このタグの下に他のタグが含まれることに注意してください。

The second part is the JS code included in the script. Use the export default object to export the code in JS. 内部構造は Vue データ構造であり、data()、methods() などのメソッドといくつかの uni ライフサイクル関数が含まれます。

3 番目の部分は style タグでラップされた css コードで、HTML の css コードとまったく同じです。

<template>
	<view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

ページ構成

uniで書かれたすべてのページはpage.jsonに登録する必要があり、登録されていないページはジャンプして表示することはできず、ページ配列にページパラメータを設定するか、各ページのオブジェクトの下にスタイルオブジェクトを設定してタイトルなどの情報を定義するだけですページのバー

globalStyle オブジェクトを構成することで、APP グローバル関連のパラメーターの構成を実現できます.具体的な構成項目については、公式の uniapp ドキュメント ( uni-app 公式 Web サイト)を参照してください。

さらに、app のラベル TAB を自動的に生成するように tabBar オブジェクトを構成することもできます。

アプリビュー

app.vue はプロジェクト全体の入り口です. ここで onLaunch は APP が最初に起動されたときに呼び出されます. ここで APP の初期化に関連するいくつかの操作を行うことができます.

<script>
	export default {
		onLaunch: function() {
			console.log('App onLaunch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

同様に、このページに記述された css もすべてのページで機能し、テーマ カラーなどの一部のグローバル css をここに配置できます。

アプリ設定

manifest.json は、プロジェクト全体の構成ファイルであり、プロジェクトの AppId、アプリケーション名、バージョン、および APP とアプレットの関連設定をカバーしています. プロジェクトは、Hbuilder エディターまたはソース コード ビューを介して視覚的に設定できます。 . プロジェクト設定

リクエストのカプセル化

起動して操作できるアプリとして、さまざまなデータを表示できる必要があり、表示データをバックエンド API に接続する必要があります.開発とその後のメンテナンスを容易にするために、リクエストは次のように個別にパッケージ化できます。統一処理用のファイル。

プロジェクトのルートディレクトリに共通フォルダを作成し、新しい http.js ファイルを作成し、uni で外部の Js を参照する場合は、export default を使用してメソッドをエクスポートする必要もあるため、http で記述された最後の関数.js は、export に export default { variable name} も渡す必要があります。

uni は、データをリクエストするための API を提供しています。

const baseUrl = 'https://www.xxx.com/api/';

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */

function getHeader() { //header头部
	return {
		"Accept": "application/json",
		'Content-Type': 'application/json; charset=utf-8', // app header头
		// 　　　　'Content-Type': 'application/x-www-form-urlencoded', // h5 header头
		// 　　　　'ACCESS_TOKEN': `${token}`,
	};
}

const ajax = function(opt) {
	uni.showLoading({
		// title:"提交中"
	})
	opt = opt || {};
	opt.method = (opt.method && opt.method.toUpperCase()) || 'POST';
	opt.url = baseUrl + opt.url || '';
	opt.async = opt.async || true;
	opt.data = opt.data || null;
	opt.success = opt.success || function() {};
	opt.fail = opt.fail || function() {};
	opt.complete = opt.complete || function() {};
	uni.request({
		method: opt.method,
		dataType: 'json',
		url: opt.url,
		data: opt.data,
		header: getHeader(),
		success: (res) => {
			uni.hideLoading()
			// console.log(res)
			if(res.data.code == 200) {
				opt.success(res.data);
			}else {
				uni.showToast({
					title:res.data.message,
					icon:"none"
				})
				opt.fail(res);
			}
			
		},
		fail: (res) => {
			uni.hideLoading()
			console.log(res)
			uni.showToast({
				title:res.data ? res.data.message : '网络连接失败',
				icon:"none"
			})
			console.log(opt)
			opt.fail(res);
		},
		complete: (res) => {
			uni.hideLoading()
			opt.complete(res);
		},
	})
}

統合管理のために、すべてのバックエンド API パスをここに配置します

const bindAjax = function(data,success,fail) {
	ajax({
		url: 'xxx/xxx',
		method: 'POST',
		data: data,
		success: function(res) {
			if (res.code == 200) {
				success(res.data)
			}
		},
		fail:(e) => {
			fail(e)
		}
	})
}

次に、erxport を介して定義したメソッド名を公開します

export default {
    ajax,
	bindAjax
}

最後に、ページ内で呼び出す場合は、main.js でグローバル変数も作成する必要があります。

import http from './common/http.js';

Vue.prototype.http = http;

このようにして、これをページで使用して呼び出しを行うことができます

this.http.bindAjax({
    a:1,
    b:2
}(e) => {
    // 成功后返回的数据
    console.log(e)
},(e) => {
    // 请求失败
})

ここで完全なファイルを参照してください (1 メッセージ) uniapp 統合リクエストのカプセル化 - Javascript ドキュメント リソース - CSDN ライブラリ 

プラグイン リファレンス

uniapp のもう 1 つの利点は、十分な数のプラグインがあることです。これにより、開発者が車輪を再発明するのを防ぐことができます。一般的に使用されるプラグインの開発者は、それらを直接引用できるため、開発時間とコストを大幅に節約できます。

Dcloud プラグイン マーケット ( DCloud プラグイン マーケット) にアクセスして、必要なプラグインを検索します. タオバオのような検索プラグインが必要な場合は、「検索プラグイン」を直接検索して検索できます.

必要なプラグインを見つけたら、プラグインの詳細ページの右側で直接選択できます HbuilderX を使用してプラグインをインポートすると、プラグインは自動的にプロジェクトにインポートされます

プラグインのプラットフォーム互換性に注意する必要があることに注意してください. 多くのプラグインは特定のプラットフォーム用に特別に設計されています, WeChatアプレットやAndroidアプリなど. このプラグインを他のプラットフォームで使用すると,互換性の問題が発生する可能性があります。

 それでは、楽しくコーディングを始めましょう～

次の記事では、Hbuilder を使用して実機テストを行いますので、お楽しみに!