uni-app获取当前环境信息的方法

 更新时间:2022年11月12日 16:09:45   作者:周围都是小趴菜  
uni-aap提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息,这篇文章主要介绍了uni-app获取当前环境信息的相关知识,需要的朋友可以参考下

uni-app获取当前环境信息

使用uniapp 的 壳嵌套vue开发的网页端项目链接,在该Vue项目中获取当前环境是否为APP或者微信小程序

引用依赖的文件

在 web-view 加载的 HTML 中调用 uni 的 API,需要在 HTML 中引用必要的 JS-SDK。

<!-- 微信 JS-SDK 如果不需要兼容小程序,可以不引用 JS 文件。 两个文件同时引入时,微信的需要在前-->  
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
<!-- uni 的 SDK,必须引用。 -->  
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

使用

HTML 在不同的环境下,可能需要执行不同的操作或传递不同的消息。可以通过 uni.getEnv() 方法,来获取当前的环境信息

1、在public/index.html中引入JS-SDK

2、使用Vuex,为其他页面使用时准备: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','当前环境为【App】')
          } else if (res.miniprogram) {
           this.$store.commit('setIsApp','当前环境为【微信小程序】')
          }
        });
      });
}

运行到小程序看看效果

到此这篇关于uni-app获取当前环境信息的文章就介绍到这了,更多相关uni-app环境信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue封装组件的过程详解

    vue封装组件的过程详解

    这篇文章主要为大家详细介绍了vue中封装组件的相关知识,文中的示例代码讲解详细,对我们深入了解vue有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • Vue中的前端crypto.js加解密

    Vue中的前端crypto.js加解密

    这篇文章主要介绍了Vue中的前端crypto.js加解密问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 基于Vue3实现无限滚动组件的示例代码

    基于Vue3实现无限滚动组件的示例代码

    如果你在社交媒体上停留的时间过长,那么,你所在的网站很可能正在使用无限滚动组件。这篇文章教你利用Vue3实现无限滚动组件,感兴趣的可以参考一下
    2022-09-09
  • 快速解决element的autofocus失效问题

    快速解决element的autofocus失效问题

    这篇文章主要介绍了快速解决element的autofocus失效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue关于页面刷新的几个方式解读

    vue关于页面刷新的几个方式解读

    这篇文章主要介绍了vue关于页面刷新的几个方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 浅谈将three项目迁移至vue项目遇到的问题

    浅谈将three项目迁移至vue项目遇到的问题

    本文主要介绍了将three项目迁移至vue项目遇到的问题,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue 如何引入本地某个文件 require

    vue 如何引入本地某个文件 require

    这篇文章主要介绍了vue 如何引入本地某个文件 require,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue项目中添加electron的详细代码

    vue项目中添加electron的详细代码

    这篇文章通过实例代码给大家介绍了vue项目中添加electron的方法,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-11-11
  • Vue3.x项目开发的一些常用知识点总结

    Vue3.x项目开发的一些常用知识点总结

    目前Vue3.0是会兼容大部分2.x的语法,下面这篇文章主要给大家介绍了关于Vue3.x项目开发的一些常用知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 一篇超详细的Vue-Router手把手教程

    一篇超详细的Vue-Router手把手教程

    这篇文章主要给大家介绍了关于Vue-Router的相关资料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08

最新评论