uniapp-ios開(kāi)發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)
更新時(shí)間：2024年07月22日 09:02:48 作者：叫我菜菜就好
在uni-app與Webview之間進(jìn)行數(shù)據(jù)交互是非常常見(jiàn)的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp-ios開(kāi)發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下
前言
在開(kāi)發(fā)中，使用uniapp開(kāi)發(fā)的項(xiàng)目開(kāi)發(fā)效率是極高的，使用一套代碼就能夠同時(shí)在多端上線，像筆者之前寫(xiě)過(guò)的使用Flutter端和webview端之間的相互通信方法和問(wèn)題，這種方式本質(zhì)上實(shí)際上是h5和h5之間的通信，網(wǎng)上有非常多的方案，最簡(jiǎn)單的就是使用postMessage和addEventListener的方式，這個(gè)在我之前的文章有講解，這里不再贅述。
那么今天的問(wèn)題，是使用uniapp開(kāi)發(fā)的App端和H5端(webview)之間的通信問(wèn)題。
注意前提，是使用uniapp同時(shí)去開(kāi)發(fā)app端和h5端。
問(wèn)題
uniapp本質(zhì)開(kāi)發(fā)的app實(shí)際上還是web，那么能不能用postMessage的方式呢？
答案當(dāng)然是可以的，但是你要區(qū)分情況，仔細(xì)看看官方文檔：
平臺(tái)差異說(shuō)明：App-nvue，是App-nvue的方法，這是個(gè)坑?。。?/strong>
所以，這個(gè)時(shí)候就需要去區(qū)分情況了，你使用的是vue寫(xiě)的webview還是nvue寫(xiě)的webview。
vue類型的webview
<web-view :src="src" ref="webview" :fullscreen="false" @message="receiveData"></web-view>
app傳遞數(shù)據(jù)給h5
本質(zhì)：h5在webview環(huán)境中提取放入一個(gè)函數(shù)，app調(diào)用該函數(shù)傳遞數(shù)據(jù)進(jìn)去。
h5端接收：可以在app.vue的onLaunch階段
window.msgFromUniapp = (res) =>{
console.log("原生傳遞過(guò)來(lái)的數(shù)據(jù)：",res)
}
app端發(fā)送：
methods: {
//給webview傳遞數(shù)據(jù)
postMess(msg) {
const currentWebview = this.$scope.$getAppWebview();
const wv = currentWebview.children()[0];
wv.evalJS(`msgFromUniapp('${JSON.stringify(msg)}')`)
}
},
onLoad(item) {
this.src = decodeURIComponent(item.url)
// 傳入需要跳轉(zhuǎn)的鏈接 使用web-view標(biāo)簽進(jìn)行跳轉(zhuǎn)
this.title = item.title
// #ifdef APP-PLUS
const currentWebview = this.$scope.$getAppWebview();
const that = this
setTimeout(function() {
let wv = currentWebview.children()[0];
that.postMess({
type: 'app/systemInfo',
data: {
sys: 'ios'
},
code: 1,
})
}, 500);
// #endif
}h5傳遞給app
app端接收：添加監(jiān)聽(tīng)即可
@message="receiveData"
h5端發(fā)送：
import '@/utils/uni.webview.1.5.4..js'
//傳遞url給原生應(yīng)用
uni.webView.postMessage({
data:{
action:'openUrl',
url:this.orderDetail.url
}
})
uni.webview.1.5.4.js
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t=[];function r(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}var o=function(e,n){var i={options:{timestamp:+new Date},name:e,arg:n};if(r()){if("postMessage"===e){var o={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(o):window.__dcloud_weex_.postMessage(JSON.stringify(o))}var a={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(a):window.__dcloud_weex_.postMessageToService(JSON.stringify(a))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:i,pageId:""},"*");if(0===t.length){var d=plus.webview.currentWebview();if(!d)throw new Error("plus.webview.currentWebview() is undefined");var s=d.parent(),w="";w=s?s.id:d.id,t.push(w)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}},"__uniapp__service");else{var u=JSON.stringify(i);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(u,",").concat(JSON.stringify(t),");"))}},a={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;o("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;o("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;o("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;o("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;o("redirectTo",{url:encodeURI(n)})},getEnv:function(e){r()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o("postMessage",e.data||{})}},d=/uni-app/i.test(navigator.userAgent),s=/Html5Plus/i.test(navigator.userAgent),w=/complete|loaded|interactive/;var u=window.my&&navigator.userAgent.indexOf(["t","n","e","i","l","C","y","a","p","i","l","A"].reverse().join(""))>-1;var g=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var v=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var c=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var m=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);var f=window.ks&&window.ks.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var l=window.tt&&window.tt.miniProgram&&/Lark|Feishu/i.test(navigator.userAgent);var _=window.jd&&window.jd.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var E=window.xhs&&window.xhs.miniProgram&&/xhsminiapp/i.test(navigator.userAgent);for(var h,P=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},b=[function(e){if(d||s)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&w.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),a},function(e){if(m)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(v)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(u){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(c)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(f)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.ks.miniProgram},function(e){if(l)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(_)return window.JDJSBridgeReady&&window.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener("JDJSBridgeReady",e),window.jd.miniProgram},function(e){if(E)return window.xhs.miniProgram},function(e){return document.addEventListener("DOMContentLoaded",e),a}],y=0;y<b.length&&!(h=b[y](P));y++);h||(h={});var B="undefined"!=typeof uni?uni:{};if(!B.navigateTo)for(var S in h)i(h,S)&&(B[S]=h[S]);return B.webView=h,B}));
注意事項(xiàng)
app端要延遲再去獲取webview實(shí)例，等webview加載完成。
官方寫(xiě)的是uni.posMessage，筆者親試，沒(méi)用的，注意是是 uni.webView.postMessage。
h5需要額外引入uni.webview.1.5.4..js
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t=[];function r(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}var o=function(e,n){var i={options:{timestamp:+new Date},name:e,arg:n};if(r()){if("postMessage"===e){var o={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(o):window.__dcloud_weex_.postMessage(JSON.stringify(o))}var a={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(a):window.__dcloud_weex_.postMessageToService(JSON.stringify(a))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:i,pageId:""},"*");if(0===t.length){var d=plus.webview.currentWebview();if(!d)throw new Error("plus.webview.currentWebview() is undefined");var s=d.parent(),w="";w=s?s.id:d.id,t.push(w)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}},"__uniapp__service");else{var u=JSON.stringify(i);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(u,",").concat(JSON.stringify(t),");"))}},a={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;o("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;o("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;o("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;o("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;o("redirectTo",{url:encodeURI(n)})},getEnv:function(e){r()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o("postMessage",e.data||{})}},d=/uni-app/i.test(navigator.userAgent),s=/Html5Plus/i.test(navigator.userAgent),w=/complete|loaded|interactive/;var u=window.my&&navigator.userAgent.indexOf(["t","n","e","i","l","C","y","a","p","i","l","A"].reverse().join(""))>-1;var g=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var v=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var c=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var m=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);var f=window.ks&&window.ks.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var l=window.tt&&window.tt.miniProgram&&/Lark|Feishu/i.test(navigator.userAgent);var _=window.jd&&window.jd.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var E=window.xhs&&window.xhs.miniProgram&&/xhsminiapp/i.test(navigator.userAgent);for(var h,P=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},b=[function(e){if(d||s)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&w.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),a},function(e){if(m)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(v)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(u){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(c)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(f)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.ks.miniProgram},function(e){if(l)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(_)return window.JDJSBridgeReady&&window.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener("JDJSBridgeReady",e),window.jd.miniProgram},function(e){if(E)return window.xhs.miniProgram},function(e){return document.addEventListener("DOMContentLoaded",e),a}],y=0;y<b.length&&!(h=b[y](P));y++);h||(h={});var B="undefined"!=typeof uni?uni:{};if(!B.navigateTo)for(var S in h)i(h,S)&&(B[S]=h[S]);return B.webView=h,B}));
nvue類型的webview
vue頁(yè)面和nvue頁(yè)面的區(qū)別，這里不做贅述，官方文檔寫(xiě)的很清楚。
這個(gè)時(shí)候就可以使用官方文檔的postMessage方式來(lái)
app傳遞數(shù)據(jù)給h5
綁定一個(gè)ref，獲取webview實(shí)例
<web-view ref="webview" :src="src" @onPostMessage="handlePostMessage"
:style="{height:mbHeight,width:mbWidth,top:mbTop}" fullscreen="false"></web-view>
this.$refs.webview.postMessage(data, '*')
或者
// 調(diào)用 webview 內(nèi)部邏輯
evalJs: function() {
this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");
}
- 然后h5使用window.addEventListener接收
h5傳遞數(shù)據(jù)給app
app接收消息：
<web-view ref="webview" class="webview" @onPostMessage="handlePostMessage"></web-view>
handlePostMessage: function(data) {
console.log("接收到消息：" + JSON.stringify(data.detail));
},
注意事項(xiàng)
頁(yè)面空白
如果你是nvue頁(yè)面：
大概率是你沒(méi)指定寬高，不信你放入一個(gè)百度的url試試，如果還是空白，請(qǐng)你設(shè)置style指定寬高。
如果你是vue頁(yè)面，可能就是網(wǎng)頁(yè)本身就打不開(kāi)
環(huán)境問(wèn)題
這是一個(gè)非常頭疼的問(wèn)題，我怎么知道這個(gè)web頁(yè)面是在app環(huán)境打開(kāi)還是在h5打開(kāi)的，為什么需要去區(qū)分環(huán)境問(wèn)題，因?yàn)槟憧赡苡幸粋€(gè)這樣的場(chǎng)景，你開(kāi)發(fā)的app需要打開(kāi)一個(gè)網(wǎng)頁(yè)，然后撐滿全屏，本質(zhì)還是用webview容器去打開(kāi)的，h5不知道自己所處的環(huán)境是app端，那么就會(huì)帶來(lái)導(dǎo)航欄區(qū)域和底部安全區(qū)域怎么獲取和處理的問(wèn)題。
你可以選擇從app端下手，前提是這個(gè)webview必須是nvue頁(yè)面，因?yàn)関ue頁(yè)面默認(rèn)webview是撐滿全屏的，撐滿全屏，撐滿全屏。
如果你是vue頁(yè)面，那么你可以通知h5端當(dāng)前所處的環(huán)境，當(dāng)前的導(dǎo)航欄高度和安全區(qū)域高度，在h5端單獨(dú)去做樣式兼容
如果你是nvue頁(yè)面，除了上述方式，你還可以自己去指定webview的樣式。
我還是建議都使用第一種方案吧，筆者自己去設(shè)置webview的樣式發(fā)現(xiàn)在全屏階段還是有一些問(wèn)題的，不如默認(rèn)撐滿全屏，在h5端去做調(diào)整，畢竟調(diào)整h5端端成本最小，上架之后的app還需要提審等一些列步驟。
側(cè)滑返回問(wèn)題
可能有小伙伴發(fā)現(xiàn)，我打開(kāi)一個(gè)webview，網(wǎng)頁(yè)里面本身有好多跳轉(zhuǎn)，為什么沒(méi)辦法側(cè)滑返回。
原因是，本質(zhì)上，在app端你打開(kāi)的實(shí)際上只有一個(gè)webview頁(yè)面，它只有一個(gè)頁(yè)面，你的h5頁(yè)面是在里面打開(kāi)的，無(wú)論你h5的路由棧有多少層多沒(méi)用，對(duì)于app來(lái)說(shuō)，就只有一個(gè)webview頁(yè)面。
所以，一定要注意放一個(gè)返回按鈕提供給用戶返回的機(jī)會(huì)，如果你要跳轉(zhuǎn)外部網(wǎng)頁(yè)，也不要用window.location去進(jìn)行跳轉(zhuǎn)，到時(shí)候就會(huì)返回不了了，你可以通知app端使用plus方法去打開(kāi)網(wǎng)頁(yè)
總結(jié)
官方文檔并沒(méi)有詳細(xì)去區(qū)分兩者的區(qū)別，網(wǎng)上的信息也很雜亂，所以在此特別去做區(qū)分和處理，如果你有更好的建議和方案，歡迎在評(píng)論區(qū)提出。
到此這篇關(guān)于uniapp-ios開(kāi)發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)的文章就介紹到這了,更多相關(guān)App端與webview端相互通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中PC端使用高德地圖實(shí)現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情(完整實(shí)例)
這篇文章主要介紹了vue中PC端使用高德地圖實(shí)現(xiàn)搜索定位、地址標(biāo)記、彈窗顯示定位詳情,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要給大家介紹了關(guān)于element的表單組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
使用Vue3實(shí)現(xiàn)倒計(jì)時(shí)器及倒計(jì)時(shí)任務(wù)的完整代碼
文章介紹了如何使用Vue3和Element-plus開(kāi)發(fā)一個(gè)倒計(jì)時(shí)器和倒計(jì)時(shí)任務(wù)管理界面,倒計(jì)時(shí)器具備手動(dòng)設(shè)置、開(kāi)始、暫停和重啟功能,文章還提供了倒計(jì)時(shí)器的完整代碼,包括HTML、JavaScript和CSS部分,感興趣的朋友一起看看吧2024-11-11
一文詳細(xì)了解Vue?3.0中的onMounted和onUnmounted鉤子函數(shù)
Vue3.0引入了新的組件生命周期鉤子函數(shù)onMounted和onUnmounted,分別用于組件掛載后和卸載前的操作,這些鉤子函數(shù)為開(kāi)發(fā)者提供了更多靈活性,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
vue3.0中的雙向數(shù)據(jù)綁定方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了vue3.0中的雙向數(shù)據(jù)綁定方法 ，文中通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue keep-alive中的生命周期,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue2.x通過(guò)Object.defineProperty()實(shí)現(xiàn)響應(yīng)式系統(tǒng),但存在一些限制,如不能檢測(cè)新增和刪除的屬性、深層嵌套對(duì)象性能開(kāi)銷大等,Vue3.0引入Proxy,可以更高效地?cái)r截對(duì)象操作,解決這些問(wèn)題2025-02-02
sublime如何配置開(kāi)發(fā)VUE環(huán)境自動(dòng)格式化代碼
這篇文章主要介紹了sublime如何配置開(kāi)發(fā)VUE環(huán)境自動(dòng)格式化代碼問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue和React中快速使用Electron的簡(jiǎn)單教程
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Vue開(kāi)發(fā)項(xiàng)目中如何使用Font Awesome 5
Font Awesome是一套流行的圖標(biāo)字體庫(kù),我們?cè)趯?shí)際開(kāi)發(fā)的過(guò)程中會(huì)經(jīng)常遇到需要使用圖標(biāo)的場(chǎng)景,對(duì)于一些常用的圖標(biāo),我們可以直接在Font Awesome中找到并且使用,這篇文章主要給大家介紹了關(guān)于Vue開(kāi)發(fā)項(xiàng)目中如何使用Font Awesome5的相關(guān)資料,需要的朋友可以參考下2021-11-11