最近在使用uni-app做APP开发,项目中有个需求:用户可以自己按需配置服务器链接,即APP可动态选择后台服务器。
在uni-app中自带存储API – uni.setStorage(OBJECT)与uni.getStorage(OBJECT),感兴趣的同学可以访问uni-app官网查看。但是我在使用这个API时发现退出APP后再进入,保存的数据会被清除,同步和异步的API我都试了,都不行。网上查找相关资料,说是uni-app框架本身有这个bug,至于到底是不是有bug这里不讨论,反正使用不了这个API。
此路不通那就只能换个方法,后来采用plus.Storage方法,该方法只能用在APP开发中,微信小程序中是无法使用的,但在使用时也是和上面一样的问题,退出APP后保存的数据被清空了,当然也许是本人技术上的欠缺导致的,但是确实是没有达到我的要求。
最后想到了使用plus.io对文件进行保存与读取来达到服务器链接的持久化存储,代码如下:

			//提交服务器设置
			submitSetURL: function() {
				let _this = this;
				if (this.serverURL == '') {
					this.$refs.loginToast.show({
						title: '服务器地址不能为空!',
						type: 'warning',
					});
				} else {
					//服务器链接
					Any.wsUrl = "wss://" + _this.serverURL + "/talkws";
					Any.httpUrl = "https://" + _this.serverURL + "/index.php/admin/";
					// 请求本地文件系统对象,将服务器链接写入文件进行本地化保存
					plus.io.requestFileSystem(
						plus.io.PUBLIC_DOCUMENTS, // 程序公用文档目录常量
						fs => {
							// 创建或打开文件, fs.root是根目录操作对象,直接fs表示当前操作对象
							fs.root.getFile('serverURL.json', {
								create: true // 文件不存在则创建
							}, fileEntry => {
								// 文件在手机中的路径
								//console.log(fileEntry.fullPath)
								fileEntry.createWriter(writer => {
									// 写入文件成功完成的回调函数
									writer.onwrite = e => {
										_this.$refs.loginToast.show({
											title: '服务器地址保存成功!',
											type: 'success',
										});
									};
									// 向文件中写入数据
									writer.write(JSON.stringify({
										URL: this.serverURL
									}));
								})
							}, e => {
								console.log("getFile failed: " + e.message);
							});
						},
						e => {
							console.log(e.message);
						}
					);
				}
			},
			
			//读取服务器地址
			getServerURL: function() {
				let _this = this;
				let sURL = "";
				//从本地文件中读取服务器链接
				plus.io.requestFileSystem(
					plus.io.PUBLIC_DOCUMENTS,
					fs => {
						fs.root.getFile('serverURL.json', {
							create: false
						}, fileEntry => {
							fileEntry.file(function(file) {
								console.log("文件大小:" + file.size + '-- 文件名:' + file.name);
								//创建读取文件对象
								let fileReader = new plus.io.FileReader();
								//以文本格式读取文件数据内容
								fileReader.readAsText(file, 'utf-8');
								//文件读取操作完成时的回调函数
								fileReader.onloadend = function(evt) {
									sURL = JSON.parse(evt.target.result).URL;
									//console.log("提取的服务器地址:", sURL);
									_this.serverURL = sURL;
									Any.wsUrl = "wss://" + sURL + "/talkws";
									Any.httpUrl = "https://" + sURL + "/index.php/admin/";
									if (sURL != "") {
										_this.$refs.loginToast.show({
											title: '服务器地址获取成功!',
											type: 'success',
										});
									}
								}
							});
						}, e => {
							console.log("getFile failed: " + e.message);
						});
					},
					e => {
						console.log(e.message);
					}
				);
			},

参考:H5关于手机本地系统文件的写入、读取及删除

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐