简述uniapp怎么引入jQuery插件

uniapp项目中引入jQuery插件的步骤

在前置步骤中我们已将jQuery插件放在了项目根目录下的static文件夹内，现在我们需要在相关页面中引入jQuery插件。

namespace.onLoad = function(){
    $.ajax({
        url: '',
        data: {},
        dataType: 'json',
        success: function(res) {
        },
        error: function(e) {
        }
    });
}

以上代码中，我们在uniapp项目中使用了ajax函数，在函数内部通过$符号调用了jQuery插件。这样我们就能在uniapp项目中顺利使用jQuery插件了。

使用uniapp自带的插件机制引入jQuery插件

如果我们想要直接使用uniapp的插件引入机制，在uniapp内部集成jQuery插件，这样我们就不用在每个页面都手动引入了。

"easycom": {
    "^u-(.*)": "@dcloudio/uni-ui/lib/u-$1/u-$1.vue",
    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
    //新增代码
    "^jquery\\-(.*)": "@/components/jquery/jquery-$1.vue"
},

以上代码中，我们在easycom中添加了一个路径规则，当我们在代码中使用jquery-的时候，uniapp就会自动引入components中的对应文件。当然我们需要自行在components中添加对jQuery插件的支持。

在vue文件中全局引入jQuery插件

除了在每个文件内部引入，我们也可以直接在vue文件中全局引入jQuery插件。

<script>
import $ from '@/components/jquery/jquery-migrate.min.js';
export default {
    data () {
        return {

        }
    },
    mounted () {
        console.log($)
    }
}
</script>

以上代码中，我们直接在vue文件中导入了jQuery插件，并保存了它的引用，便于在该文件中任意位置使用jQuery插件。

在uniapp的全局配置文件中进行引入jQuery插件

如同在vue文件中引入jQuery插件一样，我们也可以在全局配置文件中进行引入。

//main.js
import $ from './components/jquery/jquery-migrate.min.js';

Vue.prototype.$ajax = $;

以上代码中，我们直接在main.js文件中导入了jQuery插件，并通过Vue的全局对象进行保存和导入，这样我们就能在vue文件和uniapp组件中自由使用ajax函数和其他的jQuery函数了。