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)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)div單選多選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))
這篇文章主要介紹了mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue項(xiàng)目拍照或上傳圖片并實(shí)現(xiàn)轉(zhuǎn)化為base64格式
這篇文章主要介紹了vue項(xiàng)目拍照或上傳圖片并實(shí)現(xiàn)轉(zhuǎn)化為base64格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
教你60行代碼實(shí)現(xiàn)一個(gè)迷你響應(yīng)式系統(tǒng)vue
這篇文章主要為大家介紹了教你60行代碼實(shí)現(xiàn)一個(gè)迷你響應(yīng)式系統(tǒng)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-03-03
vue中axios的封裝問(wèn)題(簡(jiǎn)易版攔截,get,post)
這篇文章主要介紹了vue中axios的封裝問(wèn)題(簡(jiǎn)易版攔截,get,post),需要的朋友可以參考下2018-06-06
vue動(dòng)態(tài)合并單元格并添加小計(jì)合計(jì)功能示例
這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)合并單元格并添加小計(jì)合計(jì)功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟
這篇文章主要介紹了jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue2.0嵌套路由實(shí)現(xiàn)豆瓣電影分頁(yè)功能(附demo)
這篇文章主要介紹了vue2.0嵌套路由實(shí)現(xiàn)豆瓣電影分頁(yè)功能(附demo),這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-03-03
這篇文章主要介紹了vue獲取或者改變vuex中的值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue3+vite動(dòng)態(tài)引入圖片方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06