[uni-app] uni-app は現在の環境情報を取得します

uni-app は現在の環境情報を取得します
uniapp シェルを使用して、Vue によって開発された Web ページ プロジェクト リンクをネストします. この Vue プロジェクトでは、現在の環境が APP であるか WeChat アプレットであるかを取得し、異なる環境で排他的な操作を実行し、参照します依存ファイル
.

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"]),
},
  mounted() {
    
    
	setTimeout(() =>{
    
    
		this.getEnv()  
	});
  },
created() {
    
    
	    document.addEventListener('UniAppJSBridgeReady', () =>{
    
    
        this.getEnv()
      });
},
 methods: {
    
    
		getEnv() {
    
    
		if(uni.getEnv) {
    
    
			uni.getEnv((res) =>{
    
    
			  this.$store.commit('setIsApp',res.plus || false)
			});  
		}
}


アプレットを実行して効果を確認します
ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_44590591/article/details/127817195