uniapp中h5端如何引用本地json数据（json文件）

前言

uniapp读取本地json数据文件，有下面两种方式可以实现：

• 文件后缀为.json类型
• 文件后缀为.js类型

这里展示后缀为.js类型的处理方式

1、在static中创建后缀为.js的文件存储json数据。

注意使用export导出

2、在要使用的页面导入

<template>  
<view class="map-wrap">  <!-- #ifdef APP-PLUS || H5 -->  <view id="map-box">  <!-- 这里是mapbox的地图容器 -->  </view>  <!-- #endif -->  
</view>  
</template>  <script module="mapbox" lang="renderjs">const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');import 'mapbox-gl/dist/mapbox-gl.css';import {point} from '../../static/point.js'//let map = null //地图实例  let dataPoint={type: 'FeatureCollection',features:[{type: 'Feature',properties: {size: 20,name: '武汉'},geometry: {type: 'Point',coordinates: [114.30122, 30.598213]}}]}export default {  data:{  return(){  map: null//地图实例  }  },  mounted() { this.createdMap()  this.map.addControl(new mapboxgl.FullscreenControl(), 'top-left')this.map.on('click',e=>{console.log(e)console.log(this.map)})if(this.map){this.map.on('style.load',()=>{this.map.addSource('source', {type: 'geojson',data: point})this.map.addLayer({id: 'layer',type: 'circle',source: 'source',paint: {'circle-radius': 20,'circle-color': '#ff0000'}}) })this.map.on('click','layer',(e)=>{console.log(e.features[0])this.map.setPaintProperty('layer','circle-color','green')})}},  methods: {  createdMap() { //创建地图                 mapboxgl.accessToken = '你的token';  this.map = new mapboxgl.Map({  container: 'map-box', // container ID  style:  {version: 8,sources: {'raster-tiles': {type: 'raster',tiles: ['http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'],tileSize: 256}},layers: [{id: 'simple-tiles',type: 'raster',source: 'raster-tiles',minzoom: 0,maxzoom: 22}]}, // style URL  center: [114.124064, 30.463405], // starting position [lng, lat]  zoom: 9 // starting zoom  });  },}  }  
</script><style>.map-wrap {  position: relative;  min-width: 100vw;  min-height: 100vh;  }  #map-box {  top: 0;  left: 0;  bottom: 0;  right: 0;  position: absolute;  }  #map-box /deep/ .mapboxgl-ctrl-geocoder {  min-width: 140px;  }  #map-box /deep/ .mapboxgl-ctrl-geocoder input[type="text"] {  height: 30px;  }  #map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-icon-search {  top: 5px;  }  #map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-pin-right * {  top: 5px;  }  .control-box {  padding: 10rpx 30rpx;  background-color: #00AAFF;  position: absolute;  right: 0;  top: 0;  z-index: 999px;  }  
</style>