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

目录
  • uni-app获取当前环境信息
  • 引用依赖的文件
  • 使用
    • 1、在public/index.html中引入JS-SDK
    • 2、使用Vuex，为其他页面使用时准备：store/index.js
    • 3、在APP.vue中使用

uni-app获取当前环境信息

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

引用依赖的文件

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

<!-- 微信 JS-SDK 如果不需要兼容小程序，可以不引用 JS 文件。 两个文件同时引入时，微信的需要在前-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK，必须引用。 -->
<script type="text/javascript" src="https://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环境信息内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈VUE uni-app 开发环境

    目录 1.通过 HBuilderX 可视化界面 2.通过 vue-cli 命令执行 总结 1.通过 HBuilderX 可视化界面 a. 创建uni-app: b. 运行uni-app; c. 发布uni-app 2.通过 vue-cli 命令执行 a. 安装node.js,下载地址:https://nodejs.org/en/download/ ##检查node.js 版本 node -v v14.18.1 npm -v b. 全局安装 vue-cli npm install -g @vue/

  • uni-app的基本使用教程

    目录 一.uni-app介绍 1.1为什么要去学习uni-app? 1.2 环境搭建 1.3 利用HbuilderX初始化项目 1.4 运行项目 1.5 介绍项目目录和文件作用 2.全局配置和页面配置 2.1 通过globalStyle进行全局配置 ​2.2 创建新的message页面 2.3 通过pages来配置页面 2.4 配置tabbar 2.5 condition启动模式配置 一.uni-app介绍 ​​uni-app​​​ 是一个使用 ​ ​Vue.js​​ 开发所有前端应用的框架,开

  • uni-app多环境配置实现自动部署的方式详解

    目录 前言 一.uni-app 不同打包方式下的环境配置 1.HBuilderX 方式 2.基于 vue-cli 命令行方式 二.配置多环境实现自动部署 总结 前言 uni-app 项目在不同阶段需要部署到不同的环境,比如开发环境(dev).测试环境(test).UAT 环境(uat).生产环境(prod)等,那么如何通过自动化构建工具实现在多环境下自动部署呢?我们先来看看不同打包方式下的环境配置. 一.uni-app 不同打包方式下的环境配置 uni-app 可通过 HBuilderX 方式和

  • uni-app常用的几种页面跳转方式总结

    目录 一.uni.navigateTo(OBJECT) 二.uni.navigateBack(OBJECT) 三.uni.redirectTo(OBJECT) 四.uni.switchTab(BOJECT) 五.openURL 补充:传值与接收 总结 一.uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面 uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io) method

  • uni-app网络请求、数据缓存实例详解

    目录 一.网络请求 1.配置请求 1.1 发送get请求 1.2 发送POST请求 二.数据缓存 1.uni.setStorage(OBJECT) 2.uni.setStorageSync(KEY,DATA) 3.uni.getStorage(OBJECT) 4.uni.getStorageSync(KEY) 5.uni.removeStorage(OBJECT) 总结 一.网络请求 在uni中可以调用uni.request方法进行请求网络请求 需要注意的是:在小程序中网络相关的 API 在使用

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

    目录 uni-app获取当前环境信息 引用依赖的文件 使用 1.在public/index.html中引入JS-SDK 2.使用Vuex,为其他页面使用时准备:store/index.js 3.在APP.vue中使用 uni-app获取当前环境信息 使用uniapp 的 壳嵌套vue开发的网页端项目链接,在该Vue项目中获取当前环境是否为APP或者微信小程序 引用依赖的文件 在 web-view 加载的 HTML 中调用 uni 的 API,需要在 HTML 中引用必要的 JS-SDK. <!-

  • Android App获取屏幕旋转角度的方法

    本文实例为大家分享了Android App获取屏幕旋转角度的具体代码,供大家参考,具体内容如下 一.获取屏幕旋转角度的方法是:int rotation = mActivity.getWindowManager().getDefaultDisplay().getRotation(); 二.测试代码 1.getRotation\app\src\main\java\com\example\getrotation\MainActivity.java package com.example.getrota

  • uni-app配置APP自定义顶部标题栏设置方法与注意事项

    uni-app配置APP自定义顶部标题栏设置方法与注意事项

    目录 pages.json文件 页面部分或首页部分 注意: 附:uni-app如何动态设置页面的标题 1. 新建页面 2. js动态修改标题 总结 当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置.此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏 pages.json文件 代码块 //页面配置 "path"

  • uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录

    目录 前言 使用uni.createSelectorQuery() 附:ni-app获取DOM元素信息及跳到指定位置 总结 前言 最近写uniapp,遇到一个需要获取到页面中dom元素,我第一反应是使用this.$ refs进行获取,于是我开心的使用this.$refs写了很多代码,使用h5调试的过程中没有发现任何问题,但后来真机调试的时候发现在app端无效,于是我查看文档发现了: 非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view.text 使用uni.createSele

  • 微信公众平台实现获取用户OpenID的方法

    本文实例讲述了微信公众平台实现获取用户OpenID的方法.分享给大家供大家参考.具体分析如下: 用户点击微信自定义菜单view类型按钮后,微信客户端将会打开开发者在按钮中填写的url值 (即网页链接),达到打开网页的目的,但是view不能获取用户的openid,需要使用微信"网页授权获取用户基本信息"高级接口结合使用,获得用户的登入个人信息. 具体方法: 1.配置网页授权回调域名,如 www.jb51.net 2.模拟公众号的第三方网页,http://www.jb51.net/getc

  • iOS获取手机通讯录方式方法（最新）

    最近学习了iOS获取手机通讯录方式方法,现在分享给大家.希望此文章对各位有所帮助. 一.iOS 9 以前的通讯录框架 AddressBookUI框架:提供了联系人列表界面.联系人详情界面.添加联系人界面等,一般用于选择联系人. AddressBook 框架:纯 C 语言的 API,仅仅是获得联系人数据.没有提供 UI 界面展示,需要自己搭建联系人展示界面. 二. iOS 9 以后最新通讯录框架 ContactsUI 框架:拥有 AddressBookUI 框架的所有功能,使用起来更加的面向对象.

  • Yii操作数据库实现动态获取表名的方法

    本文实例讲述了Yii操作数据库实现动态获取表名的方法.分享给大家供大家参考,具体如下: yii  获取某个库中的表名,而且这个库不确定表的多少,此时没法按照gii去根据表去生成文件,这里有个方法去解决掉. $sqls = "show tables"; $datebase = YII::app()->db_order->createCommand($sqls)->queryAll(); //获取表名 这里$datebase 就是所有的表名,我当前有4个库,一个网站公用这

  • Android编程获取GPS数据的方法详解

    Android编程获取GPS数据的方法详解

    本文实例讲述了Android编程获取GPS数据的方法.分享给大家供大家参考,具体如下: GPS是Android系统中重要的组成部分,通过它可以衍生出众多的与位置相关的应用. Android的GPS有一个专门的管理类,称为LocationManager,所有的GPS定位服务都由其对象产生并进行控制. 首先需要明确的是,LocationManager类的对象获取并不是直接创建的,而是由系统提供的,具体来说,通过如下方法,为一个LocationManager对象建立一个对象引用: 复制代码 代码如下:

  • Android编程获取全局Context的方法

    本文实例讲述了Android编程获取全局Context的方法.分享给大家供大家参考,具体如下: 有时,在处理业务逻辑的时候,需要Context对象,但在某些情况下,并非容易获取,这时就需要一些巧妙的手段来管理Context. 在Android中,提供了一个类Application,当应用程序启动的时候,系统会自动将这个类进行初始化,所以我们可以编写自己的Application类以管理一些全局的状态信息. 在这里,以获取全局Context为例. 1.编写自己的Application类 packag

  • c# 配置文件App.config操作类库的方法

    实例如下: public class ConfigOperator { #region 从配置文件获取Value /// <summary> /// 从配置文件获取Value /// </summary> /// <param name="key">配置文件中key字符串</param> /// <returns></returns> public static string GetValueFromConfig(

随机推荐