uniapp

116 阅读1分钟

App.vue

onLaunch : 组件未出来之前
onShow:页面显示以后
onHide:APP 即将隐藏
mounted 数据挂载完成以后

条件编译

#ifdef APP-PLUS
需条件编译的代码                     仅出现在 App 平台下的代码
#endif
                       
#ifndef H5 
需条件编译的代码                    除了 H5 平台,其它平台均存在的代码
#endif
                  
#ifdef H5 || MP-WEIXIN              
需条件编译的代码                   在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)
#endif


 值                                    平台
APP-PLUS                            App
APP-PLUS-NVUE                 App nvue
H5                                         H5
MP-WEIXIN                          微信小程序
MP-ALIPAY                           支付宝小程序
MP-BAIDU                            百度小程序
MP-TOUTIAO                       字节跳动小程序
MP-QQ                                 QQ小程序
MP-360                                 360小程序
MP                                        微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
quickapp-webview                快应用通用(包含联盟、华为)
quickapp-webview-union      快应用联盟
quickapp-webview-huawei    快应用华为

以上在兼容H5、app、小程序有着非常重要的作用,记录下以便大家查找

存储 获取 清除本地存储的数据

let userInfo = uni.getStorageSync('userInfo') //获取缓存区存储的值
uni.setStorage: 将数据存储在本地缓存中  uni.getStorage:获取本地缓存中的数据
uni.setStorage({     //存入Storage
	key:'userInfo',    //自己取个名字
	data: {    //存的数据可以是很多条
	'uid': res.data.uid,
	'uname':res.data.uname,
	'phone': res.data.phone
	}
	success() {
	    console.log('userInfo储存成功');
	}
   })
	uni.getStorage({     
		key:'userInfo',
		success(res) {
			console.log('获取成功',res.data);
		}
	})/清除Storage
removeInfo(){
	uni.removeStorage({    //删除Storage
		key:'userInfo',
		success() {
			console.log('删除成功');
		}
	})
},

mapMutations 应用

注册mutaions
import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);
let store = new Vuex.Store({
    state: {
        name: 'hahahah',
        age: '19',
    },
    mutations: {
        changeName(state, params) {
            console.log(params);
            state.name = params.name 
        },
        changeAge(state, params) {
            state.age = params.age
        }
    },
})
export default store


<template>
  <div>
    <h4>这里是son1组件</h4>
    name:{{name}}
    age:{{age}}
    <button @click="hehe">改名字</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      list: {
        name: "6666"
      }
    };
  },
  computed: {
    ...mapState(["name", "age"])
  },
  methods: {
    hehe() {
      this.changeName(this.list);
    },
    ...mapMutations(["changeName"])
  }
};
</script>

mapActions 和 都是在methods中获取的

...mapActions(['login','exit']),
...mapMutations(['login','exit']),