uni-app Vue3微信小程序发行版import引入export defualt的js库因为undefined导致minxins报错
uni-app Vue3微信小程序发行版import引入export defualt的js库因为undefined导致minxins报错
项目信息 | 详情 |
---|---|
产品分类 | uniapp/小程序/微信 |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | windows11 |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 4.65 |
第三方开发者工具版本号 | 1.06.2503290 |
基础库版本号 | 3.8.3 |
项目创建方式 | HBuilderX |
bug描述:
Vue3编译为微信小程序时,页面import引入export default的js库,在调试时有时能正常mixins,但发行版一定会因为它是undefined而导致mixins失败。通过查看编译后微信小程序源代码,发现是uniapp编译的问题。
目前也找到解决问题的办法了,也许是官方未详细说明,就是将js或css不要放在static目录下,uniapp编译时根据引用自动调整。详细可见后面第二个补充中说明和源码
示例代码:
<template>
<view class="container">
演示Vue3版微信小程序import错误
</view>
</template>
<script>
// #ifdef VUE3
/**
* VUE3编译:app端不再支持require
* 微信小程序调试时全部支持,发行版不支持export defaut。(不知道什么不统一!!!,可能通过微信开发者查看源码是uniapp官方的问题)
*/
import {
filepickerESM
} from "./static/js/wxy-file-picker-esm.js";
console.log("filepickerESM =>", filepickerESM);
//微信小程序调试时支持,但发行版时是undefined。查看微信开发者中源码是uniapp编译的问题
import filepickerMixin from "./static/js/wxy-file-picker-mixin.js";
console.log("filepickerMixin =>", filepickerMixin);
// #endif
export default {
// #ifdef VUE3
// mixins: [filepickerESM],
mixins:[filepickerMixin],//微信小程序编译发行版,因为 filepickerMixin是undefined导致失败报错
// #endif
data() {
return {};
},
onReady() {
this.test1();
},
methods: {
test1() {
console.log('test =>', this.test("Hello World"));
},
},
}
</script>
<style lang="scss">
.container {
padding: 10px 20px;
}
</style>
操作步骤:
import filepickerMixin from "./static/js/wxy-file-picker-mixin.js";
export default {
mixins:[filepickerMixin],//可以混入filepickerMixin
}
更多关于uni-app Vue3微信小程序发行版import引入export defualt的js库因为undefined导致minxins报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html
继续上面进行补充,后来再测试时,发现分包目录中只要不是static目录下js,uniapp编译会进行调整,如分包目录pages_index\libs\wxy-file-picker-mixin.js
export default {
data() {
return {};
},
methods: {
test(str) {
return str;
},
},
}
在微信小程序中import filepickerMixin2 from “…/libs/wxy-file-picker-mixin.js”;编译后被uniapp调整为如下
“use strict”;const t={data:()=>({}),methods:{test:t=>t}};exports.filepickerMixin2=t;
这样官方又支持import导入export default的库了。只不过要注意不要放在分包static目录下,估计uniapp对static排除处理了。
归纳总结
app端和微信小程序import分包中js库时,若是export default时务必不要放在分包的static目录,可以命名一个目录如libs或者直接放在分包根目录下。若放在分包static目录下,需要自己完成转换,可参考uniapp官方,也可参考上面非export default完成。
源代码包见bug2.rar