uni-app は WeChat アプレットと h5 の便利なメモを開発しています (継続的に更新されます)

1. WeChat アプレットの CSS で背景画像を使用したい場合。（テストは可能ですが、実機では誤差が生じる可能性があります。uni-app公式サイトにも記載されております）

2. h5側でデバッグを行ったところ、クリックイベントが反映されないことが判明しました 以下の原因が考えられます。

• 画像がある場合は、レイヤー間で問題が発生している可能性があります。クリックした画像に Z-index を追加してレベルを上げてください。

3. オブジェクトに配列を書き込む方法: {....arr}

• 元の配列: [{...},{...},{...}]

• オブジェクトに変換後: { {...},{...},{...}}

4. 配列を連結します。

• 配列間のスプライシング: [...arr1,...arr2]

• 要素と配列間の連結: ['...',...arr]

5. 不規則なキー値を持つオブジェクトの一部の属性を抽出して新しい配列を合成したい

• 地図を使用する

• 参考リンク：【フロントエンド】js_Hyacinth-CSDNでのMapの使い方 Blog_フロントエンドマップ

• 例は次のとおりです。

            async getGoosList() {
				let mapObj = new Map();
				let testObj = {};
				uni.showLoading();
				const {
					data: res
				} = await getGoodsList()
				if (res.code === 0) {
					this.hotArr=res.data.hot_goods
					uni.$u.setProperty(testObj, '0.goods')
					testObj['0'].goods = uni.$u.deepClone(res.data.hot_goods);
					mapObj.set('0', {
						...testObj
					})
					for (let key in res.data.goods_list) {
						const temp = uni.$u.getProperty(res.data.goods_list, key)
						this.leftArray.push(temp.name)
						mapObj.set(key, temp.sons)
					}
					this.leftArray = ['热门', ...this.leftArray]
					for (const item of mapObj) {
						this.rightListArr.push(item[1])
					}
				}
				uni.hideLoading();
				this.$nextTick(() => {
					this.getElementTop();
				});
			},

6. uni-app でのクロスドメイン構成 (h5 側のみに存在)

• manifest.json のソース コード ビューを開き、構成項目を追加します。

• 構成ファイルを変更するたびに、忘れずにプロジェクトを再起動してください。！それ以外の場合は失敗します

"h5": {
		"devServer": {
			"port": 8000, //端口号
			"disableHostCheck": true,
			"proxy": {
				"/api": {
					"target": "......", //目标接口域名
					"changeOrigin": true, 
					"secure": false, 
					"pathRewrite": {
						"^/api": ""//重写
					}
				}
			}
		}
	}

• リクエストインターセプトが使用されるため、次のように構成する必要もあります。

	    //在非h5情况下
		// #ifndef H5
		config.baseURL = '.....';//服务器ip地址或者域名
		// #endif
		//在h5情况下
		// #ifdef H5
		config.baseURL = '/api';
		// #endif

 7. 送信後はフォームに相当します。重要なのは、データが正しく送信されたかどうかを確認することです

8. uni-app h5開発時の注意点：uni-app H5版使用上の注意点 - DCloud Q&A

9. パッケージ化するときに、ルーティング モードをハッシュモードに変更し、実行パスを変更します。変更しないとパッケージ化されて公開され、ページが見つかりません。

	"router":{
		"mode":"hash",
		"base":"./"
	}

10. h5 パッケージ化前の関連構成

• uni-app 開発 H5 構成、パッケージ化に関する考慮事項_look_Mediterranean Blog-CSDN Blog_uniapp パッケージ化 h5 ?

• h5 デプロイメントにパッケージ化された uniapp のステップ記録と、server_yehaocheng520 の博客-CSDN Blog_h5 デプロイメント?

 11. ユニアプリ開発における実行プラットフォームの判断方法

//获取项目运行的平台
export const getPlatform=()=>{
	let platForm=undefined;
	// #ifdef APP-PLUS
	platForm="APP"
	// #endif
	// #ifdef H5
	platForm="H5"
	// #endif
	// #ifdef MP-WEIXIN
	platForm="MP-WEIXIN"
	// #endif
	return platForm
}

 12. グローバルマウントの使用

1) マウントする必要があるターゲット ファイル: common/common.js。getPlatform メソッドを公開します。

//获取项目运行的平台
export const getPlatform=()=>{
	let platForm=undefined;
	// #ifdef APP-PLUS
	platForm="APP"
	// #endif
	// #ifdef H5
	platForm="H5"
	// #endif
	// #ifdef MP-WEIXIN
	platForm="MP-WEIXIN"
	// #endif
	return platForm
}

 2) main.js でのグローバルマウント

//引入
import {getPlatform} from './common/common.js';
//全局挂载
Vue.prototype.$getPlatform = getPlatform

3) 任意のコンポーネントで使用します (これを忘れないでください。呼び出し、これは Vue のサンプル オブジェクトです)

console.log(this.$getPlatform())

11. ユニアプリアプレット開発時、データがロードされていない状態では未定義の処理メソッドが表示される

1) データが届かない場合はサークルを付け、データが到着したらサークルをオフにする

2) v-if判定が表示されない

3) スケルトン画面

12. パラメータの結合:

オブジェクトを文字列に変換し、url_weixin_55869763 のブログの後ろに結合します - CSDN ブログhttps://blog.csdn.net/weixin_55869763/article/details/115457890

13. js ファイルに別の js ファイルを導入します

• これは、joinUrl.js ファイルを request.js ファイルにインポートする例です。

  1) joinUrl ファイルで次のように定義されます。

// let data = {
// 	name: 'haha',
// 	age: 11
// }
export const joinUrl = (data) => {
	// 遍历对象data   然后进行字符串拼接
	// 遍历结果 key是属性名 data[key]是值
	let urlString = ''
	for (let key in data) {
		urlString += key + "=" + data[key] + '&'
	}
	// 因为经过循环字符串最后面会多一个 & 使用substring把最后一个删除
	urlString = urlString.substring(0, urlString.length - 1)
	return urlString
}

2) request.js ファイルに以下を導入します

//引入
import {joinUrl} from '../common/joinUrl.js';//这个目录根据实际而定

//调用
console.log('拼接之后的config.data',joinUrl(config.data))

15. リクエストを一律に処理する必要がある場合（ここではuviewにカプセル化されたリクエストインターセプトを使用します）

• 例【1】

1) リクエストインターセプトの設定。最も重要なのは、if (config?.custom?.auth)の判断です。つまり、データをリクエストするときに、設定項目で渡されたcustom.auth がtrue の場合、対応する要求インターセプトが発生します。インターセプターでどのような論理アクションを実行するかは、自分で定義できます。カスタムオブジェクトの下の属性はカスタマイズでき、インターセプト操作を実行するために定義する属性は、リクエスト時に対応する属性を渡すだけです。

たとえば、ここで定義されているカスタムの属性 auth は主に、リクエスト時にトークンを運ぶ必要があるかどうかを決定するために使用されます。リクエスト時に Custom: { auth: true} を渡すと、インターセプトが発生します。

uni.$u.http.interceptors.request.use((config) => {
		config.data = config.data || {}
		// let sign=signString+secret
		if (config?.custom?.auth) {
			const token = uni.getStorageSync('token');
			config.header.Authorization = token
		}
		return config
	}, config => {
		return Promise.reject(config)
	})

 2) 使用する

//第一个为params参数，第二个参数为其他配置说明
const res=await getIndex({user_id:'14'},{ custom: { auth: false}})

•  例【2】

if (config?.custom?.sign) {
	let secret = 'DKGd35slt5sc48s4q';
	config.data = sortKey(config.data) //对参数进行排序
	let signString = joinUrl(config.data) //对排序后的参数进行拼接
	// let sign=signString+secret
	config.header.Authorization = token
}

16. クライアントによって開始された各リクエストはsignパラメータを運ぶ必要があり、サーバーはsign渡されたパラメータが悪意を持って改ざんされているかどうかを判断するために、コンテンツに従って同じパラメータをカプセル化します。

注: "sign" を除くすべてのパラメータをキーごとに辞書の昇順に並べ、並べ替えられたパラメータ (キー=値) が & で結合されます。

1) 例:

let secret = "CFUMAO";//仅为示例，具体值另行交接。
let data = {type:"home",action:"search",time:"1610101123"};
let sign = md5('action=search&type=home&time=1610101123'+secret);

 2) カプセル化 (オブジェクトのキー値は昇順の辞書でソートされ、& の形式で結合されます):

export const joinUrl = (data) => {
	// 遍历对象data   然后进行字符串拼接
	// 遍历结果 key是属性名 data[key]是值
	let urlString = ''
	for (let key in data) {
		urlString += key + "=" + data[key] + '&'
	}
	// 因为经过循环字符串最后面会多一个 & 使用substring把最后一个删除
	urlString = urlString.substring(0, urlString.length - 1)
	return urlString
}
export const sortKey = (arys) => {
	//先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
	var newkey = Object.keys(arys).sort();
	//console.log('newkey='+newkey);
	var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
	for (var i = 0; i < newkey.length; i++) {
		//遍历newkey数组
		newObj[newkey[i]] = arys[newkey[i]];
		//向新创建的对象中按照排好的顺序依次增加键值对
	}
	return newObj; //返回排好序的新对象
}

 3) md5の導入

• 具体的な導入手順については、私の他の記事を参照してください。

https://blog.csdn.net/weixin_46872121/article/details/122701853 https://blog.csdn.net/weixin_46872121/article/details/122701853 4) に送信されるネットワーク リクエスト フォームを開始するときに、署名と使用データを一緒にカプセル化します。サーバー

uni.$u.http.interceptors.request.use((config) => {
		config.data = config.data || {}
		if (config?.custom?.sign) {
			let secret = 'DKGd35slt5sc48s4q';
			config.data = sortKey(config.data) //对参数进行排序
			let signString = joinUrl(config.data) //对排序后的参数进行拼接
			let beforeSign = signString + secret
			// console.log('加密前---', beforeSign)
			const aftreSign=md5.hex_md5(beforeSign)
			// console.log('加密后---', aftreSign)
			config.data.sign=aftreSign//将sign数据一同发送到后端
		}
		return config
	}, config => {
		return Promise.reject(config)
	})

18. オブジェクトが空かどうかを判断する

JSON.stringify(userInfo) != '{}'

19.easycomコンポーネント仕様

        従来の Vue コンポーネントを使用するには、インストール、参照、登録という 3 つの手順が必要です。easycom では、コンポーネントがプロジェクトのcompnentsディレクトリまたはuni_modulesディレクトリにインストールされており、 components/コンポーネント名/コンポーネント名.vueディレクトリ構造に準拠している限り、コンポーネントをインポートしたり登録したりする必要はありません。これを 1 つのステップに簡略化します。 、ページ上で直接使用されます。

たとえば、次のプロジェクトの後のuni-rate コンポーネントは、ディレクトリ /components/uni-rate/uni-rate.vue に保存され、その結合名は uni-rate とも呼ばれるため、このようなコンポーネントは必要ありません。スクリプトに含める 登録と引用。次のように：

<template>
        <view>
            <uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
        </view>
    </template>
<script>
    // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

        コンポーネント ディレクトリにインストールされているコンポーネントの数に関係なく、easycom はパッケージ化後に未使用のコンポーネントを自動的に削除します。これはコンポーネントの使用に特に適しています。コンポーネント ライブラリはバッチでインストールされ、必要に応じて使用され、オンデマンドで自動的にパッケージ化されます。ユニアプリではeasycom自動的にオンになるため、手動でオンにする必要はありません。

        コンポーネント名またはパスが easycom のデフォルト仕様に準拠していない場合は、pages.json の easycom ノードでカスタマイズできます。詳細はこちら：uni-app公式サイト

20. タブページ間のパラメータのジャンプと受け渡しの問題

        uni-app でタブ ページ間を移動するとパラメータを渡すことができないことがわかっているため、通常は次のようにローカル ストレージを使用します。

      つまり、ホームページのいくつかの要素からクリックしてリスト ページにジャンプする必要があり、特定のパラメーターを運ぶ必要がある場合は、次の方法を使用できます。

 1. イベントをトリガーする要素にイベントをバインドします。

  2. 実現する

			goToListTab(index, name) {
				uni.setStorageSync('item-index', index)
				uni.setStorageSync('item-name', name)
				uni.switchTab({
					url: `/pages/list/list`,
					success: function(e) {
						var page = getCurrentPages()[0]
						if (page == undefined || page == null) {
							return
						}
                        //h5端不支持使用onLoad()进行刷新，因此需要对其进行条件编译
						//#ifdef H5
						window.location.reload();
						//#endif
						// #ifndef H5
						page.onLoad()
						//#endif
					}
				});
			},

当初、成功したジャンプのコールバック関数内で現在のスタックページを取得する操作を行わず、要素1をクリックしてリストページにジャンプすると、ローカルに保存されたパラメータを正常に取得できましたが、一覧ページからトップページに戻り、再度要素2(その他の要素)をクリックしたところ、無効であることが分かりました。したがって、ページ スタックに関する関連知識も非常に重要です。この接続の使用方法はgetCurrentPages()、(ページ更新) を参照してください - Lsomeone - Blog Garden

 3. リスト ページは、ローカルに保存されているパラメータ データを取得し、関連するビジネス ロジック操作を実行します。

    	this.itemIndex = uni.getStorageSync('item-index')
		his.itemName = uni.getStorageSync('item-name')

        leftTap(status,e={}) {
				let index1 = 0;
				let index=0;
				switch (this.itemName) {
					case '工商注册':
						index1 = 1;
						break;
					case '资质办理':
						index1 = 2
						break;
					case '财税服务':
						index1 = 3;
						break;
					case '知识产权':
						index1 = 4
						break;
					case '认证服务':
						index1 = 5
						break;
				}
				if (status) {
					//列表页触发的点击
					index = e.currentTarget.dataset.index;
					this.isClick = true;
				} else {
					//首页触发的点击
					index = index1
					this.isClick = false;
				}
				this.leftIndex = index;
				this.scrollInto = `item-${index}`;
			},