Esp_server 安卓嵌入壳子,原创! 2024/7/28 20:58

用到的软件: uni-app 

             思路: 让用户感觉是,一个完整的程序.实际上只是一个类浏览器壳子.轻便小巧.

                  由于是第一次用uni-app开发类软件,所以前前后后耗费7小时!

                     隔行如隔山,不是白讲的.

---

软件界面:

软件功能: 

 简化输入:   

          输入ip地址,例:http://    www.baidu.com 完整网址

          前面http:// 内部自动拼接了 所以...........你懂的填  www.baidu.com 省点劲.........

记忆输入: 存档!

---

代码如下: 

<template>
	<view class="content">
		<text id="tsz">{{titleshow}}</text> //顶部提示

		<view v-show="box" id="box"> //输入框显示控制
			<form>

<input type="text" v-model="inputValue" id="inputout" placeholder="设置设备IP地址" />

			</form>

			<button @click="getout" id="butre">保存设置</button> //按钮触发切换操作 
		</view>

		<view v-show="web" id="webshow"> //内联浏览器显示控制
			
			<web-view :src="srcweb"></web-view>
		
		</view>


	<button v-show="backes" @click="backe" id="back">返回</button> //重置按钮

	</view>
</template>

//代码处理逻辑
<script>
	export default { //把组件踢出来让其他人用
		data() {     //数据处理
			return {
				backes:false,  //控制显示的,关键词 v-show
				box: true,     //控制显示的,关键词 v-show
				web: false,    //控制显示的,关键词 v-show
				inputValue: '',  //用来获取输入框值的 关键词v-model
				srcweb: '',      //用来控制src地址的 关键词 v-bind  简写 :src="srcweb"
				titleshow: '请把设备链接到同一局域网下' //提示字 控制 关键词{{}}
                            写法>>>>>   {{titleshow}}
			};
		},
		onLoad() {   //页面加载完成后执行 读取 

			const key = 'http'; // 键名
			
			try {
			  const value = uni.getStorageSync(key); //读取键值
			  if (value) {
			    console.log('读取字符串成功:', value);  //输出值
				this.inputValue=value;                //传递给输入框以自填入
				this.$nextTick(() => {                //强制重绘页面 
				        console.log('界面更新完成');
				      });
			  } else {
			    console.log('键名不存在或值为空');
			  }
			} catch (e) {
			  console.error('读取字符串失败', e);
			}
		},	
		methods: {    //方法定义

			getout() {  //提交按钮动作
				if (this.inputValue != '') {  //检查是否有值
					console.log(this.inputValue);
					   if (!this.inputValue.match(/^(http|https):\/\//)) {
                    //检查是否有填写http://   如无,自动补全
					      this.srcweb = 'http://' + this.inputValue;
					    } else {
					      this.srcweb = this.inputValue; //把地址传递给内联浏览器
					    }
					
					this.box = !this.box;   //控制显示
					this.web = !this.web;   //控制显示
					this.backes=!this.backes;   //控制显示
					this.titleshow = "设备IP地址:" + this.srcweb;   //控制显示
					// 保存字符串到本地
					const key = 'http'; // 键名
					const value = this.srcweb; // 要保存的字符串
					
					try {
					  uni.setStorageSync(key, value);
					  console.log('字符串保存成功');
					} catch (e) {
					  console.error('字符串保存失败', e);
					} 
					
					
					

				}


			},
			backe(){                    //复位
				this.inputValue='';  
				this.srcweb = '';
				this.box = !this.box;
				this.web = !this.web;
				this.backes=!this.backes;
				this.titleshow = '请把设备链接到同一局域网下';
				
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100vw;
		
	}

	#inputout {
		margin-top: 10%;
		font-size: 30px;
	}
	#box{
		position: relative;
		top: 0;
	
	}
	#webshow {
		background-color:black;
		height: auto;
		width: 100%;
		position: relative;

	}

	#butre {
		position: relative;
		width: 100%;
		align-items: center;
		margin-top:10% ;

	}

	#tsz {
		position: relative;
		top: 0;
		width: 100%;
		text-align: center;
		border: 2px solid black;
		overflow: hidden;
	}

#back{
	width: 100%;
	position: absolute;
	bottom: 0;
}
	
</style>

配置文件:pages.json 

 

配合H5页面展示: http://192.168.100.103 服务器地址