uniapp全局传值方式总结(7000字长文)

2022年05月14日 阅读数:3
这篇文章主要向大家介绍uniapp全局传值方式总结(7000字长文),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

uniapp的架构跟小程序同样,这样便于总体的管理和转译小程序,而uniapp的页面架构是借鉴的vue.js的单页面架构,由template(html)、script(js)、style(css)三部分组成。这样的页面架构是很是方便而独立的,不会影响到其余页面中的数据,那么问题来了,想要共享数据甚至在本页面要操控其余页面的数据怎么办?uniapp有着小程序和vue.js的有点,固然也有它们共享数据的方法。下面是分类说明一下uniapp的大部分传值方式,每种方式都粗略的介绍下几种方法。

javascript

全局变量globalData

小程序有一套本身的全局变量共享方法globalData,uniapp固然也要照搬过来,否则怎么号称打通全部小程序?globalData只是临时变量,在应用(小程序或者app)启动后到销毁前都是有效的,销毁后(被手机进程销毁,中止运行,有时切换到后台不会销毁,仍然在挂起运行,这取决于用户有没有给应用在后台运行的权限 [ 设置手机应用白名单 ] )globalData就没了,下次重启应用的时候globalData就恢复初始值,因此globalData是临时的。css

在App.vue中配置globalDatahtml

//配置globalData
<script>
    export default {
   
   
       globalData: {
   
   
			updateApp: {
   
   
				id: null,
				path: null,
			},
			voiceSpeed: 1.2,
			voicePicth: 1,
			schoolList: [],
		},
		onLaunch() {
   
   
			this.$options.globalData.voicePicth = 2;
		}
    }
</script>

其余页面使用globalData前端

//其余页面使用globalData
var app = getApp();

export default {
   
   
	onShow() {
   
   
		console.log(app.globalData.voicePicth);
	},
}

全局js变量工具类

会javaScript的都知道,js也是能够自定义全局变量的。js的自定义全局变量也是临时变量,销毁重建后会还原为设置的初始值,因此js全局变量跟小程序globalData的特色是同样的,只不过没有特定的写法,而globalData必须按照小程序的写法来,js全局变量由程序员本身设计。vue

在uniapp的common目录下新建js工具类tils.js文件html5

//tils.js文件
const config = {
   
   
	money: "8888888",
}

function isEqual(a, b) {
   
   
  return eq(a, b);
};

//暴露写法一
module.exports = {
   
   
  config: config,
  isEqual: isEqual
}

//暴露写法二
module.exports.config = config;
module.exports.isEqual = isEqual;

//暴露写法三
export default {
   
   
	config,
	isEqual,
}

//暴露写法四...写法太多太灵活了,本身去摸索吧


uniapp全局事件

见另外一篇文章uniapp全局事件详解,写的很是仔细java


小程序缓存

如今各家小程序大部分都是模仿鼻祖微信小程序的,不得不说张小龙这我的真的厉害,硬是带着微信作出各类带动时代的产品。微信小程序的存储机制也是很完善的,临时存储有globalData,固然也有长久性的存储缓存功能,不过是没有永久性的存储的。由于小程序再怎么牛逼,也是依赖微信app的,微信app都卸载,数据删除干净了,那么微信小程序还有什么意义呢?缓存是保存在用户手机本地的,uniapp可以跨端小程序和app等,固然也考虑了小程序的缓存功能。微信小程序的缓存只存在于微信小程序下载安装下来后到微信小程序被卸载以前的那一刻,一旦卸载或者删除了微信小程序,那么微信小程序的缓存就没有了,存在缓存里的数据固然也没有了。可是支付宝小程序不同,支付宝小程序卸载或删除后缓存仍是有的,就算清除支付宝的数据也仍是有,支付宝小程序的缓存作的十分保密,可是也有缺点,就是用户删除不了缓存,若是手机遗失被黑客破解的话仍是有隐患的,因此通常都不会把重要数据保存在缓存里,除非删除支付宝app,这跟微信小程序依赖微信app是同一个道理。
这里要重点说一下,无论uniapp作的怎么好怎么优秀,做为一个企业,在制做app也好,定制网站也好,都不能依靠前端,在前端是没有安全性可言的,由于可以看到的东西都是下载到了用户端本地而后被解析的,uniapp也是一款用前端技术开发app的,最好不要把用户敏感数据等重要数据保存到用户端手机本地,就算是微信小程序等也同样,虽然有的前端是有加密和防护等措施,可是也只是加深了黑客、病毒等攻击性行为的成本而已。因此在业务逻辑处过程当中,若是不是那些关于用户端的系统配置数据什么的,最好都用临时数据。程序员

缓存分为同步和异步,同步是代码按照顺序的方式执行,异步是代码在不堵塞当前执行顺序的状况下去执行另外的代码,异步与多线程、并行是不同的,想要深刻理解的还请绕道百度web

//异步缓存存储数据
uni.setStorage({
   
   
    key: 'name',
    data: '李四',
    success: function () {
   
   
        console.log('success');
    }
});

//异步缓存获取数据
uni.getStorage({
   
   
    key: 'name',
    success: function (res) {
   
   
        console.log(res.data);
    }
});

//异步获取当前storage的相关信息
uni.getStorageInfo({
   
   
    success: function (res) {
   
   
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    }
});

//异步缓存移除数据
uni.removeStorage({
   
   
    key: 'name',
    success: function (res) {
   
   
        console.log('success');
    }
});

//异步清除全部缓存
uni.clearStorage();

===============================================================================================================================================

//同步缓存存储数据
uni.setStorageSync('name', '李四');

//同步缓存获取数据
var name = uni.getStorageSync('name');
console.log(name);

//同步获取当前storage的相关信息
const res = uni.getStorageInfoSync();
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);

//同步缓存移除数据
uni.removeStorageSync('name');

//同步清除全部缓存
uni.clearStorageSync();

页面栈传值

页面栈就是从打开app第一个页面开始,就会生成一个页面记录栈,直到app关闭,用navigateTo方式会往页面栈里面添加一条 记录,用reLaunch方式会删除以前的记录后新增当前页记录,用redirectTo方式会替换跳转前那页的记录为当前页等等。经过页面栈能够方便直接的在当前页面去操控以前的那个页面的数据。sql

获取页面栈

//获取页面栈
var pages = getCurrentPages();  //获取页面栈,页面栈的表现形式是一个数组
var page = (pages[pages.length - 1]);  //获取当前页对象
var prepage = (pages[pages.length - 2]);  //获取上一页对象
...
var curRoute = page.route;  //获取当前页的路由地址
...

H5操控上一个页面的数据

//H5操控上一个页面的数据
var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];  //获取上一个页面对象
beforePage.orderList[2].amount = 123;  //操控上一个页面的数组数据
beforePage.checkOrder();  //操控上一个页面的函数方法

app和小程序操控上一个页面的数据,须要借助$vm

//app和小程序操控上一个页面的数据
var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];  //获取上一个页面对象
beforePage.$vm.orderList[2].amount = 123;  //操控上一个页面的数组数据
beforePage.$vm.checkOrder();  //操控上一个页面的函数方法

app端存储数据

用存储数据的办法来共享数据是间接手段,没有直接传递数据那么直观,至关于绕个弯去传递数据。app端独有的传递数据方法有sqlite和io文件等本地存储方案。
sqlite[连接] 用于app端操做本地数据库文件,可实现数据库文件的建立,执行SQL语句等功能,至关于把服务器搭建在了用户的手机里。
io[连接] 是app端管理本地文件系统,用于对文件系统的目录浏览、文件的读取、文件的写入等操做。这就是把想要存储的数据保存为相应格式的文件(好比:txt/json/jpg/png/mp3/mp4等),而后保存到手机文件系统里,须要用到时再取出来。

H5 的存储方式

H5是前端的一部分,由于H5的出现使得前端能够在不少地方都如鱼得水,原生app能够内嵌H5页面,浏览器能够浏览H5网站。其实在uniapp中的H5指的是网页版的Html文件,由于是如今移动端的html5标准,因此简称H5。H5储数据的方案有不少,随便百度都有一堆,这里我就不班门弄斧、多此一举了。

vue传值方式

uniapp的页面基本架构是vue.js[连接],每一个页面都是单页面结构,因此每一个页面之间的数据是隔离的,组件之间也是同样。既然uniapp是按照vue.js来的,那么固然也有vue.js的大部分功能(少部分还不支持),因此要作好一个uniapp还得去学习vue.js的语法。uniapp支持如下vue.js的传值方式(下面只列出部分uniapp支持的,毕竟uniapp一直在更新升级,其余的我也没用过也不知道)。

页面传值

  1. 路由传值

    以uni.navigateTo跳转为例,在起始页面跳转到test.vue页面并传递参数,其余跳转方式都相似

    //在起始页面跳转到test.vue页面并传递参数
    uni.navigateTo({
         
         
        url: 'test?id=1&name=uniapp'
    });
    

    在test.vue页面接受参数

    //在test.vue页面接受参数
    export default {
         
         
        onLoad(option) {
         
          //option为object类型,会序列化上个页面传递的参数
            console.log(option.id); //打印出上个页面传递的参数id:1。
            console.log(option.name); //打印出上个页面传递的参数name:uniapp。
        }
    }
    
  2. vuex全局数据管理
    学完vue全家桶和微信小程序,再来写uniapp,会爽得不要不要的,由于uniapp简直就是这二者的结合体。把vuex从vue.js学的照搬到本身的uniapp中,直接撸起袖子干。

    第一步,在uniapp的通用js文件夹common目录中新建store.js文件

    //store.js
    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    const store = new Vuex.Store({
         
         
        state: {
         
         ...},
        mutations: {
         
         ...},
        actions: {
         
         ...}
    })
    export default store;
    

    第二步,在入口文件main.js挂载vuex

    //在main.js挂载vuex
    import Vue from 'vue'
    import App from './App'
    
    //引入vuex
    import store from './store'
    //把vuex定义成全局组件
    Vue.prototype.$store = store
    
    Vue.config.productionTip = false
    App.mpType = 'app'
    
    const app = new Vue({
         
         
    	...App,
    	store  //挂载store
    })
    app.$mount()
    

    第三步,在uniapp的页面里使用vuex

    //页面里使用vuex
    <script>
    export default {
         
         
        created () {
         
         
            console.log(this.$store)
        }
    }
    </script>
    

    vuex的数据也是临时的,想要数据持久化那就要结合缓存来作,能够参考这个例子:[连接]

  3. vue页面和nvue页面通讯
    很少说,给个uniapp官方地址去看看吧:[连接]

组件传值

  1. 父子组件传值

    父组件传数据到子组件,数据的传递须要借助props,是单向不可逆的

    //子组件:child.vue
    export default {
         
         
    	props: {
         
         
    		//list接收父组件传过来数据
    		list: {
         
         
    			type: Array,
    			value: [] 
    		},
    		//或者下面的写法
    		list: {
         
         
    			type: Array,
    			default(){
         
         
    				return [];
    			}
    		},
    	},
    	methods: {
         
         
    		getList(){
         
         
    			console.log(this.list)
    		}
    	}
    };
    
    //父组件parent.vue
    <template>
    	<child :list="childList"></child>
    </template>
    <script>
    	import child from '@/components/child.vue';
    	export default {
         
         
    		components: {
         
         
    			child
    		},
    		data() {
         
         
    			return {
         
         
    				childList:[1,2,3,5,6]
    			}
    		}
    	}
    </script>
    

    父组件操控子组件数据和方法

    //父组件parent.vue
    <template>
    	<child ref="childComponent"></child>
    </template>
    <script>
    	import child from '@/components/child.vue';
    	export default {
         
         
    		components: {
         
         
    			child
    		},
    		methods: {
         
         
    			controlChild() {
         
         
    				//控制子组件的方法
    				this.$refs.childComponent.getList();
    				//控制子组件的数据
    				this.$refs.childComponent.list[2] = 10;
    			}
    		}
    	}
    </script>
    

    子组件传数据给父组件,数据的传递须要借助$emit,也是单向不可逆的

    //子组件:child.vue
    export default {
         
         
    	methods: {
         
         
    		getList(){
         
         
    			//子组件传递数据给父组件
    			this.$emit('changeValue', '干的漂亮');
    		}
    	}
    };
    
    //父组件parent.vue
    <template>
    	//父组件调用子组件自定义方法changeValue来接收数据
    	<child @changeValue="changeChildValue"></child>
    </template>
    <script>
    	import child from '@/components/child.vue';
    	export default {
         
         
    		components: {
         
         
    			child
    		},
    		methods: {
         
         
    			changeChildValue(event) {
         
         
    				//event是子组件传道父组件的变量
    				console.log(event)  //'干的漂亮'
    			}
    		}
    	}
    </script>
    
  2. 兄弟组件传值

    1、借助父组件统一管理子组件数据
    2、借助vuex
    3、借助globalData
    4、借助全局js变量
    5、借助缓存
    6、太多了不扯了…