uniapp の一般的な開発スキル

1. ミニプログラムの共有

WeChatには友人やモーメントを共有する機能がデフォルトで備わっていないため、追加する必要がある場合は別途コードを設定する必要があります。設定も非常に簡単で、対応するライフサイクルを記述するだけで済みます(同時に追加する必要があります)。データとしてのレベル）。

WeChatの友達と共有する

	onShareAppMessage(){
			return {
				 title: '自定义分享标题',
			}
		},

デフォルトではパラメータを入力せずに共有機能を使用することもできますが、デフォルトのパラメータに従って実行されます。

パラメータ名	タイプ	必須	説明する	プラットフォームの違いについて説明
タイトル	弦	はい	タイトルを共有する
パス	弦	はい	ページパスは / で始まる完全なパスである必要があります。注: 京東ミニプログラムの先頭に「/」を追加しないでください。	QQ mini プログラムはサポートしていません
画像URL	弦	いいえ	共有アイコンのパスは、ローカルファイルパス、コードパッケージファイルパス、またはネットワークイメージパスにすることができます。PNG と JPG をサポートします。表示画像のアスペクト比は5:4です
コンテンツ	弦	いいえ	Baidu ミニプログラムは次のように動作します: コンテンツの共有; Alipay ミニプログラムは次のように動作します: Zhikou コマンドコピーライティング	Baidu ミニプログラム、Alipay ミニプログラム
説明	弦	いいえ	カスタム共有の説明	Alipay ミニプログラム、Douyin ミニプログラム、JD ミニプログラム
bgImgUrl	弦	いいえ	QR コードを共有するための背景画像をカスタマイズします。推奨サイズは 750*950 (ネットワーク画像パス)	Alipay アプレット
クエリ	弦	いいえ	QQ アプレットのクエリ文字列は、key1=val1&key2=val2 の形式である必要があります。この転送されたメッセージから入力すると、qq.getLaunchOptionSync() または qq.onShow() を通じて起動パラメータのクエリを取得できます。	QQアプレット
テンプレートID	弦	いいえ	開発者のバックエンドによって設定された共有マテリアルテンプレート ID	抖音ミニプログラム
mpId	弦	いいえ	WeChat アプレット ID。このシナリオはこのシナリオで使用されます。WeChat に共有した後、ユーザーは共有カードをクリックして、appid に対応する WeChat アプレットに入り、WeChat アプレットへの排水を実現します。	京東ミニプログラム
タイプ	番号	いいえ	転送フォーム (0 - WeChat ミニプログラムの正式バージョン、1 - WeChat ミニプログラムの開発バージョン、2 - WeChat ミニプログラムの試用版、JD App 9.0.0 以降またはその他の値が最初に決定されるため、入力されていない場合はURLパラメータの有無、存在する場合は共有を開きます URLに対応するページを表示します、そうでない場合はデフォルトでJDミニプログラムの公式共有中間ページが生成されますクリックするとJD内の対応するミニプログラムにジャンプしますアプリ。）	京東ミニプログラム
mpPath	弦	いいえ	WeChat ミニプログラムパス	京東ミニプログラム
チャネル	弦	いいえ	チャンネル (デフォルトの WeChat 友達、WeChat モーメントは書かないでください)	京東ミニプログラム
URL	弦	いいえ	h5 リンクアドレス (h5 共有を記入します。記入されていない場合はデフォルトの中央ページ)	京東ミニプログラム
成功	関数	いいえ	インターフェイス呼び出しが成功した場合のコールバック関数	Alipay ミニプログラム、Baidu ミニプログラム
失敗	関数	いいえ	インターフェース呼び出し失敗時のコールバック関数	Alipay ミニプログラム、Baidu ミニプログラム
完了	関数	いいえ	インターフェイス呼び出しの終了時のコールバック関数 (呼び出しが成功したか失敗したかに関係なく実行されます)	百度ミニプログラム

WeChat モーメントを共有する

onShareTimeline() {},

ただし、共有および設定できるのは個別のページのみなので、ページごとに共有したい場合は、ミックスインをグローバルに登録することができます。

utils/mixin.js

export default {
	data() {
		return {}
	},
	//1.发送给朋友
	onShareAppMessage() {},
	//2.分享到朋友圈
	onShareTimeline() {},
}

main.js

// 导入并挂载全局的分享方法
import share from './utils/mixin.js'
Vue.mixin(share)

2. iOSの下部距離に適応する

<view class="flexC submit ">
	  <view class="flexC">提交</view>
</view>

.flexC {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.submit {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		view {
			border-radius: 10px;
			width: 90%;
			height: 80rpx;
			background: skyblue;
			color: #fff;
		}
	}

これは非常に一般的なシナリオです。ユーザーの操作を容易にするために、ボタンはページの下部に固定されています。iOS の下部にはメニューの水平線があり、それが隠れているため、Android では通常どおりに表示されます。

クラス名を追加するだけです

<view class="flexC submit iosPadding">
	<view class="flexC">提交</view>
</view>

<style lang="scss">
.iosPadding {
	padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
	padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
</style>

safe-area-inset-left: 安全領域と左境界の間の距離

safe-area-inset-right: 安全領域と右境界の間の距離

safe-area-inset-top: 安全領域と上部境界の間の距離

safe-area-inset-bottom: 安全領域と底部境界の間の距離

3. プラットフォームの条件付きコンパイル

uniapp はマルチターミナル開発フレームワークであるため、一連のコードを複数のアプリケーションにコンパイルするには、条件付きコンパイルの使用を避けることはできません。

条件付きコンパイルとは何ですか?

例: h5 にパッケージ化したいが、小さいプログラムにもパッケージ化したい h5 でパブリックアカウントを共有したいが、小さいプログラムではこれらの jssdk パラメーターを取得する必要はありません。条件付きコンパイルを使用すると、h5 プラットフォームで特定の関数のみを実行できます。コードのスニペット。

固有の言語: 異なるプラットフォームでは異なるコードが実行されます。

公式:条件付きコンパイルでは、特別なコメントをマークとして使用します。コンパイル中に、コメント内のコードは、これらの特別なコメントに基づいてさまざまなプラットフォームにコンパイルされます。

**書き込み:** #ifdef または #ifndef と %PLATFORM% で始まり、#endif で終わります。

#ifdef: 定義されている場合は、特定のプラットフォームにのみ存在します
#ifndef: 定義されていない場合は、特定のプラットフォームを除いて存在します
%PLATFORM%: プラットフォーム名

条件付きコンパイルの書き方	説明する
#ifdef APP-PLUS にはコード #endifの条件付きコンパイルが必要です	アプリプラットフォームでのみ表示されるコード
#ifndef条件付きコンパイルが必要な H5 コード #endif	H5 プラットフォームに加えて、他のプラットフォームに存在するコード
#ifdef H5 \|\| 条件付きコンパイルが必要なMP-WEIXIN コード #endif	H5プラットフォームまたはWeChatミニプログラムプラットフォーム上に存在するコード（ここには\|\|しかありません、交差がないため&&は不可能です）

例えば：

(1) jsの条件付きコンパイル

	onLoad() {
			// h5
			//#ifndef H5
				console.log(1);
			//#endif 
			// 小程序
			//#ifndef MP-WEIXIN
				console.log(2);
			//#endif 
		},

(2) HTMLの条件付きコンパイル

	<view class="flexC submit iosPadding">
		<!-- #ifdef H5 -->
		<view class="flexC">H5提交</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="flexC">微信小程序提交</view>
		<!-- #endif -->
	</view>

(3) CSSの条件付きコンパイル

	// #ifdef H5
		.submit view {
			background: blue;
		}
	// #endif

	// #ifdef MP-WEIXIN
		.submit view {
			background: red;
		}
	 // #endif