uniapp 小程序 h5 兼容性问题 (API)

问题一： uni-app读取本地json数据文件，并渲染到页面上。

1、文件后缀为.json类型
H5端可以通过fetch、uni.request 等发起json数据等请求

 	uni.request({
	 	url: '/static/data/nav-list.json',
		success: (res) => {
			let { data } = res
			
		},
		fail: function (err) {
			console.log(err,'err')
		    // 请求失败后的回调函数，err为错误信息
		  }
	 })
	   fetch('../../data/nav-list.json')
		   .then(res => res.json())
		   .then(data => {
			
	   })

小程序不支持fetch、uni.request 请求json，可以使用import 导入， 支持uni.request 请求其他服务器数据

vue3 + vite

 import getDataList from '/static/data/nav-list.json'

问题二： 数据缓存

• H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
• H5端还支持websql、indexedDB、sessionStorage
  App端还支持SQLite、IO文件等本地存储方案
• App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
• 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
• 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
• 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
• 百度小程序策略详见、抖音小程序策略详见
• 非App平台清空Storage会导致uni.getSystemInfo获取到的deviceId改变

小程序不支持localStorage、sessionStorage, H5端支持。
小程序存储可以使用：

异步接口：
uni.setStorage将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

uni.setStorage({
	key: ids,
	data: JSON.stringify(articleData)
})

uni.getStorage从本地缓存中异步获取指定 key 对应的内容。

uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

uni.removeStorage从本地缓存中异步移除指定 key。

uni.removeStorage({
	key: 'storage_key',
	success: function (res) {
		console.log('success');
	}
});

同步接口：
uni.setStorageSync(KEY,DATA)，将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

uni.getStorageSync(KEY) 从本地缓存中同步获取指定 key 对应的内容。

try {
	const value = uni.getStorageSync('storage_key');
	if (value) {
		console.log(value);
	}
} catch (e) {
	// error
}

uni.removeStorageSync(KEY) 从本地缓存中同步移除指定 key。

try {
	uni.removeStorageSync('storage_key');
} catch (e) {
	// error
}

问题三： vue2 与 vue3 一些差异点

官网： https://zh.uniapp.dcloud.io/tutorial/migration-to-vue3.html