脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue uni-app配置Jquery

Vue uni-app以H5模式引入Jquery配置教程

 更新时间：2022年09月08日 08:58:27   作者：tuonioooo  
这篇文章主要为大家介绍了Vue uni-app以H5模式引入Jquery配置教程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

Vue配置Jquery

  • 安装Jquery
   npm install jquery --save
   or
   yarn add jquery
  • main.js中引入jquery，供全局使用
import Vue from 'vue'
import jquery from "jquery";
Vue.prototype.$ = jquery;
  • 在页面中使用，运行如下代码，在控制台就可以查看引入结果
<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    mounted() {
      console.log(this.$, "======引入Jquery成功=====");
    },
    methods: {
    }
  }
</script>

uni-app配置Jquery

  • h5模式

uni-app的h5模式与Vue的模式基本一样，也可以直接引入文件的使用，具体使用如下：

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>
  </view>
</template>
<script>
  import $ from "../../js_sdk/jquery-3.6.0.min.js";
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    mounted() {
      console.log($, "======uni-app的H5模式引入JQuery=====");
    },
    methods: {
    }
  }
</script>
<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }
  .text-area {
    display: flex;
    justify-content: center;
  }
  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

项目文件配置图

  • APP-PLUS 模式

app-plus模式，JQuery是不能直接被识别的，需要通过uni-app 提供的renderJS 模式 来使用，也就是说，如果想使用JQuery在app模式，需要逻辑层与视图层交互才可以，如果还是按照H5模式下使用，会报如下错误:

function (e) {if (!e.document) 
    throw new Error("jQuery requires a window with a document");
    return t(e);
}, 
======uni-app的H5模式引入JQuery
===== at pages/index/index.vue:19

采用renderJS模式，jquery采用是本地文件引入的方式（也可以通过npm/yarn 命令安装 ）如下：

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
  }
</script>
<script lang="renderjs" module="turnjs">
  import $ from "../../js_sdk/jquery-3.6.0.min.js";
  export default {
    mounted(){
      console.log($, "======uni-app的App模式引入JQuery成功=====");
    }
  }
</script>
<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }
  .text-area {
    display: flex;
    justify-content: center;
  }
  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

手机模拟器运行代码后，可以看到控制台成功打印了JQuery对象。

function S(e, t) {return new S.fn.init(e, t);}, 
======uni-app的App模式引入JQuery成功
===== at pages/index/index.vue:4 at app-view.js:1076

总结

Vue模式与uni-app的h5模式是一样的，唯一不同的是uni-app中APP-PLUS模式，需要借助renderJS或者WSX第三方内置组件，才能更有效的使用JQuery。

特别注意，就是某些第三方组件依赖JQuery时，在renderJS引入，需要注意引入顺序。第一个引入JQuery、第二个在引入依赖JQuery的第三方组件。

<script lang="renderjs" module="turnjs">
  import "../../js_sdk/jquery-3.6.0.min.js";
  import xxx from '@/utils/turn.js';
  export default {
    XXXX
  }
</script>

当然了，使用JQuery一般都是特殊情况下，如果有空闲时间，还是需要写成组件时最好不过的了。

以上就是Vue uni-app以H5模式引入Jquery配置教程的详细内容，更多关于Vue uni-app配置Jquery的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue基础知识--axios合并请求和slot

    vue基础知识--axios合并请求和slot

    这篇文章主要介绍了vue中的axios和slot，文中代码非常详细，对大家的工作学习有所帮助，感兴趣的朋友可以参考下
    2020-06-06
  • vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

    vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

    今天小编就为大家分享一篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue的Props实例配置详解

    Vue的Props实例配置详解

    props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项,下面这篇文章主要给大家介绍了关于Vue组件如何设置Props的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue3的api解读之ref和reactive示例详解

    vue3的api解读之ref和reactive示例详解

    这篇文章主要介绍了vue3的api解读之ref和reactive详解，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • 一起来做一下Vue全局提示组件

    一起来做一下Vue全局提示组件

    前端开发的时候,在项目中引入组件以及使用是非常常见操作,下面这篇文章主要给大家介绍了关于Vue全局提示组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Vue.js页面中有多个input搜索框如何实现防抖操作

    Vue.js页面中有多个input搜索框如何实现防抖操作

    debounce是lodash工具库中的一个非常好用的函数。这篇文章主要介绍了Vue.js页面中有多个input搜索框如何实现防抖操作,需要的朋友可以参考下
    2019-11-11
  • Vue实现版本检测与升级提示

    Vue实现版本检测与升级提示

    在现代Web应用开发中,版本检测与升级提示是提升用户体验的重要环节,本文将详细介绍如何在Vue应用中实现这一功能,有需要的小伙伴可以参考一下
    2025-04-04
  • vue中data的基础汇总

    vue中data的基础汇总

    这篇文章主要介绍了vue如何重置data、组件中的data为什么是一个函数、为什么new Vue里的data可以是一个对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue.js 时间转换代码及时间戳转时间字符串

    Vue.js 时间转换代码及时间戳转时间字符串

    这篇文章主要介绍了Vue.js 时间转换代码及时间戳转时间字符串,需要的朋友可以参考下
    2018-10-10
  • vue实现搜索过滤效果

    vue实现搜索过滤效果

    这篇文章主要为大家详细介绍了vue实现搜索过滤效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05

最新评论