Uni App + Vue3 引入高德小程序插件Js文件失败

 

问题描述

使用uni app模板开发微信小程序过程中引入高德地图小程序插件失败，

由于本人是第一次使用vue开发对vue2和3的模块引入方式并不甚了解，官方文档也并未提及所以踩了坑，特记录一下，

先看代码：

import amap from "@/lib/amap-wx.130.js";//引入高德地图小程序插件

根据官方文档这里引入js插件后即可在onload函数实例化一个AMapWX对象

onLoad() {
			let that = this
			let amapPlugin = new amap.AMapWX({
				key:"xxxxxxxxx"
			})
			        let height = 300;
			        let width = 300;
			        let size = width + "*" + height;
			amapPlugin.getStaticmap(
			      {
			      zoom: 8,
			      size: size,
			      scale: 2,
			      markers: "mid,0xFF0000,A:116.37359,39.92437;116.47359,39.92437",
			      success: (data)=>{
			        that.src = data.url
			        // console.log("~~~~amap~~~~~~~success~~~~~~~~~~~~"+data.url)
			      },
			      fail: (info)=>{
			        wx.showModal({title:info.errMsg})
			      }
			    }
			    )
		},

这里实现了简单的获取静态地图方法，cv的话key请自行更换，ok! 到这里如果是使用vue2的话是完全没有问题的，但是我的vue3项目每次运行都会报

SyntaxError: The requested module does not provide an export named 'default'

import * as amap from "@/lib/amap-wx.130.js";

尝试加了  *  as  进行整体加载又会报

UncaughtReferenceError: module is not defined

---

解决方案：

import 方式导入js 模块需要在js文件中声明 export 导出，查看amap-wx.130.js文件发现文件末尾的导出是这样写的

module.exports.AMapWX=AMapWX;

这种导出方式对应的是Vue 2依赖如使用 commonJS 方式导出

// module.exports.AMapWX=AMapWX;
//适配vue3
export default { AMapWX };

 把 module.exports.AMapWX=AMapWX; 替换成  export default { AMapWX }; 完美解决

参考 ES6 - 模块Module的使用方法