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)文章
vue項(xiàng)目如何實(shí)現(xiàn)前端預(yù)覽word與pdf格式文件
最近項(xiàng)目中需要在線預(yù)覽WORD文檔,所以給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目如何實(shí)現(xiàn)前端預(yù)覽word與pdf格式文件的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了rollup打包vue組件并發(fā)布到npm,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
本文主要介紹了Element el-upload上傳組件使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示
表格判斷在很多項(xiàng)目中都用得到,本文主要介紹了vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
Element?Plus，由餓了么大前端團(tuán)隊(duì)開源出品的一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于?Vue?3.0?的組件庫(kù)，Element?Plus是基于Vue3面向設(shè)計(jì)師和開發(fā)者的組件庫(kù)，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型2022-12-12
mockjs是用來(lái)模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒(méi)有開發(fā)出來(lái)時(shí)獨(dú)立開發(fā)。這篇文章主要介紹了vue項(xiàng)目中mock.js的使用,需要的朋友可以參考下2019-05-05
vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡
這篇文章主要為大家介紹了vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
解決VUE項(xiàng)目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected&n
這篇文章介紹了解決VUE項(xiàng)目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected token ＜ 報(bào)錯(cuò)的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue配置文件自動(dòng)生成路由和菜單實(shí)例代碼
因?yàn)椴煌挠脩粲胁煌臋?quán)限,能訪問(wèn)的頁(yè)面是不一樣的,所以我們?cè)趯懞笈_(tái)管理系統(tǒng)時(shí)就會(huì)遇過(guò)這樣的需求：根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)添加路由和菜單，這篇文章主要給大家介紹了關(guān)于vue配置文件自動(dòng)生成路由和菜單的相關(guān)資料,需要的朋友可以參考下2021-08-08
前端Vue?select下拉框使用以及監(jiān)聽事件詳解
由于前端項(xiàng)目使用的是Vue.js和bootstrap整合開發(fā),中間用到了select下拉框,這篇文章主要給大家介紹了關(guān)于前端Vue?select下拉框使用以及監(jiān)聽事件的相關(guān)資料,需要的朋友可以參考下2024-03-03