uni-app獲取當(dāng)前環(huán)境信息的方法
更新時(shí)間：2022年11月12日 16:09:45 作者：周圍都是小趴菜
uni-aap提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個(gè)API獲取系統(tǒng)信息，這篇文章主要介紹了uni-app獲取當(dāng)前環(huán)境信息的相關(guān)知識(shí),需要的朋友可以參考下
uni-app獲取當(dāng)前環(huán)境信息
使用uniapp 的 殼嵌套vue開發(fā)的網(wǎng)頁(yè)端項(xiàng)目鏈接，在該Vue項(xiàng)目中獲取當(dāng)前環(huán)境是否為APP或者微信小程序
引用依賴的文件
在 web-view 加載的 HTML 中調(diào)用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK。
<!-- 微信 JS-SDK 如果不需要兼容小程序，可以不引用 JS 文件。 兩個(gè)文件同時(shí)引入時(shí)，微信的需要在前--> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <!-- uni 的 SDK，必須引用。 --> <script type="text/javascript" src="http://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
使用
HTML 在不同的環(huán)境下，可能需要執(zhí)行不同的操作或傳遞不同的消息?？梢酝ㄟ^(guò) uni.getEnv() 方法，來(lái)獲取當(dāng)前的環(huán)境信息
1、在public/index.html中引入JS-SDK
2、使用Vuex，為其他頁(yè)面使用時(shí)準(zhǔn)備：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isApp: false
},
mutations: {
setIsApp(state, data) {
state.isApp = data
}
},
actions: {},
modules: {},
getters: {}
})3、在APP.vue中使用
import {mapState} from "vuex";
computed: {
...mapState(["isApp"]),
},
created() {
document.addEventListener('UniAppJSBridgeReady', () =>{
uni.getEnv((res) => {
if (res.plus) {
this.$store.commit('setIsApp','當(dāng)前環(huán)境為【App】')
} else if (res.miniprogram) {
this.$store.commit('setIsApp','當(dāng)前環(huán)境為【微信小程序】')
}
});
});
}運(yùn)行到小程序看看效果
到此這篇關(guān)于uni-app獲取當(dāng)前環(huán)境信息的文章就介紹到這了,更多相關(guān)uni-app環(huán)境信息內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue中封裝組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入了解vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
這篇文章主要介紹了Vue中的前端crypto.js加解密問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
基于Vue3實(shí)現(xiàn)無(wú)限滾動(dòng)組件的示例代碼
如果你在社交媒體上停留的時(shí)間過(guò)長(zhǎng)，那么，你所在的網(wǎng)站很可能正在使用無(wú)限滾動(dòng)組件。這篇文章教你利用Vue3實(shí)現(xiàn)無(wú)限滾動(dòng)組件，感興趣的可以參考一下2022-09-09
快速解決element的autofocus失效問(wèn)題
這篇文章主要介紹了快速解決element的autofocus失效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue關(guān)于頁(yè)面刷新的幾個(gè)方式解讀
這篇文章主要介紹了vue關(guān)于頁(yè)面刷新的幾個(gè)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
淺談將three項(xiàng)目遷移至vue項(xiàng)目遇到的問(wèn)題
本文主要介紹了將three項(xiàng)目遷移至vue項(xiàng)目遇到的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了vue?如何引入本地某個(gè)文件?require，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue項(xiàng)目中添加electron的詳細(xì)代碼
這篇文章通過(guò)實(shí)例代碼給大家介紹了vue項(xiàng)目中添加electron的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
Vue3.x項(xiàng)目開發(fā)的一些常用知識(shí)點(diǎn)總結(jié)
目前Vue3.0是會(huì)兼容大部分2.x的語(yǔ)法,下面這篇文章主要給大家介紹了關(guān)于Vue3.x項(xiàng)目開發(fā)的一些常用知識(shí)點(diǎn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要給大家介紹了關(guān)于Vue-Router的相關(guān)資料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08