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

2 回复

目前测试可以的替补方案:
微信小程序 可以使用require或import引入非export default的库,测试通过Vue2和Vue3的发行版
require导入 //CommonJS模块系统
function test(str) {
return str;
}

module.exports = {
methods: {
test,
},
}; 文件名为wxy-file-picker.js,引入方式为const filepicker = require("./static/js/wxy-file-picker.js");然后可以mixins:[filepicker]当前页面。
import导入非export default的库 //ES6模块系统
export const filepickerESM = {
methods: {
test(str) {
return str;
},
},
}; 文件名为wxy-file-picker-esm.js,引入方式为import {filepickerESM} from “./static/js/wxy-file-picker-esm.js”;然后可以mixins:[filepickerESM]当前页面。
app端 app端在Vue3不支持require,可以import引入export default和非export default的库。其中引入非export default的库可参考微信小程序中部分。 //Vue的script
export default {
data() {
return {};
},
methods: {
test(str) {
return str;
},
},
} 文件名为wxy-file-picker-mixin.js,引入方式为import filepickerMixin from “./static/js/wxy-file-picker-mixin.js”;然后可以mixins:[filepickerMixin]当前页面。
app端和微信小程序端 通过上面测试,在Vue3页面引入js库,为兼容app和微信小程序,在官方未修复的情况下,只能使用import导入非export default解决问题。希望官方早日修复这个编译的问题,同时也希望早点修复Vue3版renderjs引入js的问题。本来想将项目从Vue2升级为Vue3呢,结果在升级过程中,除了官方vue2升vue3指南https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html外,还有不少坑需要解决,也不知道已经使用Vue3开发微信小程序兄弟是如何解决这些坑。
项目源码文件如下

更多关于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

回到顶部