uniapp はモジュラー js ファイルと非モジュラー js ファイルを導入します

方法 1: user.js などの一般的な js ファイルをインポートする

1.1、属性とメソッドは変数内に記述されます

const user={
    login:true,
    isLogin:function(data){
        console.log("展示用户登录信息")
    }
}
export default user;

 1.2、分けて書くことも可能

function isLogin(data){
    console.log("展示用户登录信息")
}
function getMobile(data){
    console.log("22222222")
}

export default {
    isLogin,
    getMobile
}

  .vue ページで引用:

<script>
    // 绝对路径,@指向项目根目录,在cli项目中@指向src目录
    import userfrom '@/common/user.js';
    // 相对路径
    import user from '../../common/user.js';

    export default {
        ...
        methods: {
            test(){
                user.isLogin()  //具体使用
            }
        }
    }

</script>

知らせ

  • js ファイルは、/最初はインポートをサポートしていません

方法2:エントリーファイルmain.jsにuser.jsを入れてグローバルメソッドにする

import user from './common/user.js';
Vue.prototype.$user = user;

.vue ページで引用:

<script>
    export default {
        ...
        methods: {
            test(){
                this.$user.isLogin()//具体使用
            }
        }
    }
</script>

方法 3: 暗号化された md5.js ファイルなど、サードパーティのモジュール化された .js ファイルをインポートして、共通フォルダーに配置し、通常の .js ファイルとして参照できます。モジュール化されたファイルは、module.exports を介してオブジェクトとして公開されます。 :

var exports = createMethod();
if (COMMON_JS) {
    module.exports = exports;
} else {
    root.md5 = exports;
    if (AMD) {
        define(function () {
            return exports;
        });
    }
}

.vue ページで引用: 

<script>
    import md5 from '../../common/md5.js';
    export default {
        ...
        methods: {
            test(){
                let sign = md5(getSignStr(arrKeys, arrValues)).toUpperCase();
            }
        }
    }
</script>

方法 4: uniapp によって開発された H5 は、nomodule.js などのサードパーティ製の非 modular.js ファイルをインポートし、上記のように共通フォルダーに配置される、オブジェクトとして公開されている module.exports のない純粋な js ファイルです。そのままインポートすると見つからないというメッセージが表示されるので、nomodule.js を static フォルダに入れると、uniapp が H5 をリリースすると static ファイル以下の内容がコンパイルされなくなり、グローバル js を entry.html ファイルと .vue にインポートします。ページから直接引用するだけです

4.1、nomodule.js

function isNoModule(data){
    console.log("3333333")
}

4.2、entry.html ファイルにグローバル js を導入

<script charset="utf-8" src="<%= BASE_URL %>static/nomodule.js"></script>

4.3. .vue ページでの参照

<script>
    export default {
        ...
        methods: {
            test(){
                isNoModule();
            }
        }
    }
</script>

おすすめ

転載: blog.csdn.net/LzzMandy/article/details/126669128