uni-app obtains the current environment information
Use the uniapp shell to nest the webpage project link developed by Vue. In this Vue project, obtain whether the current environment is an APP or a WeChat applet, and perform exclusive operations in different environments and refer to dependent files
.
To call uni's API in the HTML loaded by web-view, you need to reference the necessary JS-SDK in the HTML
<!-- 微信 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>
use
HTML may need to perform different actions or deliver different messages under different circumstances. You can use the uni.getEnv() method to get the current environment information
1. Introduce JS-SDK in public/index.html
2. Use Vuex to prepare for other pages: 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. Use in 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)
});
}
}
Run to the applet to see the effect
