uni-app加vue3常见问题

一、引入本地的JSON文件

1.fetch方法

使用fetch API来加载本地JSON文件。

<script>
	fetch('/source/dataJson/drugsList.json')
	.then(res=>res.json())
	.then(data=>{
		console.log(data)
	})
</script>

fetch函数的参数是本地JSON文件路径,注意路径的正确,通过.then()方法对数据进行解析响应,并通过.json()方法转换为JSON格式,最终打印出所需要的数据
学习地址

2.axios

1.安装axios

npm  i axios -s

2.使用(drugList.vue)

<script>
import axios from 'axios'
axios.get('http://localhost:3000/source/dataJson/drugsList.json').then((res) => {
	console.log(res)
})
</script>

3. Object.assign()

1.JSON文件(drugsList.json)

{
    "code": 0,
    "data": {
        "b2cDirectoryIdChildList": [],
        "brandIdChildList": [],
        "commentImgUrl": "",
        "commentLinkUrl": "",
        "commentMsg": "",
        "commentType": "1",
        "deliveryText": "",
        "filterInfoList": [],
        "groupShops": [],
        "isCityOpened": 0,
        "isListData": 0,
        "pageNo": 1,
        "pageSize": 20
        }
}

2.使用文件(drugList.vue)

<script>
import dataBasemap from '@/source/dataJson/drugsList.json'
export default {
	data() {
		let config = {}
		Object.assign(config, dataBasemap)
		return {
			drugsList: config
		};
	},
	mounted(){
		consloe.log(drugsList)
	}
}
</script>

注意:
1.Vue3使用的是esModule(export导入,import引入),不支持commonJS规范(require引入)
2.uni.request是无法读取本地的js文件和json文件的，jq是能读取的，但是jq只能在H5端引入使用。