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

更新時(shí)間：2022年09月08日 08:58:27 作者：tuonioooo

這篇文章主要為大家介紹了Vue?uni-app以H5模式引入Jquery配置教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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;

在頁(yè)面中使用，運(yùn)行如下代碼，在控制臺(tái)就可以查看引入結(jié)果

<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>

項(xiàng)目文件配置圖

APP-PLUS 模式

app-plus模式，JQuery是不能直接被識(shí)別的，需要通過(guò)uni-app 提供的renderJS 模式來(lái)使用，也就是說(shuō)，如果想使用JQuery在app模式，需要邏輯層與視圖層交互才可以，如果還是按照H5模式下使用，會(huì)報(bào)如下錯(cuò)誤:

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采用是本地文件引入的方式（也可以通過(guò)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>

手機(jī)模擬器運(yùn)行代碼后，可以看到控制臺(tái)成功打印了JQuery對(duì)象。

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

總結(jié)

Vue模式與uni-app的h5模式是一樣的，唯一不同的是uni-app中APP-PLUS模式，需要借助renderJS或者WSX第三方內(nèi)置組件，才能更有效的使用JQuery。

特別注意，就是某些第三方組件依賴JQuery時(shí)，在renderJS引入，需要注意引入順序。第一個(gè)引入JQuery、第二個(gè)在引入依賴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>

當(dāng)然了，使用JQuery一般都是特殊情況下，如果有空閑時(shí)間，還是需要寫成組件時(shí)最好不過(guò)的了。

以上就是Vue uni-app以H5模式引入Jquery配置教程的詳細(xì)內(nèi)容，更多關(guān)于Vue uni-app配置Jquery的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: