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-showbox: true,     //控制显示的,关键词 v-showweb: false,    //控制显示的,关键词 v-showinputValue: '',  //用来获取输入框值的 关键词v-modelsrcweb: '',      //用来控制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 服务器地址

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/51352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Javaer 5分钟入门 Golang

文章目录 前言一个 go 文件长啥样&#xff1f;Go 语言的变量变量类型变量声明 Go 语言的函数&方法Go 语言没有的概念访问修饰符面向对象模型异常处理机制 Go 语言高效简洁的并发编程总结 前言 这两年主流的编程语言 Golang&#xff0c;想必大家或多或少都接触过。云原生领…

使用 Docker Compose 部署 RabbitMQ 的一些经验与踩坑记录

前言 RabbitMQ 是一个功能强大的开源消息队列系统&#xff0c;它实现了高效的消息通信和异步处理。 本文主要介绍其基于 Docker-Compose 的部署安装和一些使用的经验。 特点 成熟&#xff0c;稳定消息持久化灵活的消息路由高性能&#xff0c;高可用性&#xff0c;可扩展性高支…

Python的异常处理机制

Python的异常处理机制 异常处理是编程中的一个重要概念&#xff0c;用于处理程序运行过程中出现的错误或异常情况。Python提供了强大的异常处理机制&#xff0c;使得程序能够优雅地处理错误&#xff0c;而不是直接崩溃。 1. 异常处理的基本概念 在Python中&#xff0c;异常处…

【PYTHON】多进程运行示例含共享数据

运行结果 Python多进程调用示例 import multiprocessing import time import os import sys# 注册多个函数用于不同进程分别调用 def testcase0():time.sleep(1)return "case0_"get_time()def testcase1(timestamp):return "case1_"timestampdef testcase…

Python | TypeError: ‘float’ object is not subscriptable

Python | TypeError: ‘float’ object is not subscriptable 在Python编程中&#xff0c;遇到“TypeError: ‘float’ object is not subscriptable”这一错误通常意味着你尝试对浮点数&#xff08;float&#xff09;使用了下标访问&#xff08;如数组或列表那样的访问方式&a…

数电票如何查验、管理?C#发票查验接口集成

数字化时代&#xff0c;一切事务都在逐渐向数字化转型&#xff0c;发票也不例外。现如今&#xff0c;数电票俨然成为了商业交易的新常态&#xff0c;不仅环保高效&#xff0c;还有助于简化财务管理流程。但任何事务都具有双面性&#xff0c;如何对数电票的真实性和有效性进行查…

Mindspore框架循环神经网络RNN模型实现情感分类|(四)损失函数与优化器

Mindspore框架循环神经网络RNN模型实现情感分类 Mindspore框架循环神经网络RNN模型实现情感分类|&#xff08;一&#xff09;IMDB影评数据集准备 Mindspore框架循环神经网络RNN模型实现情感分类|&#xff08;二&#xff09;预训练词向量 Mindspore框架循环神经网络RNN模型实现…

探索 Blockly:自定义积木实例

3.实例 3.1.基础块 无输入 , 无输出 3.1.1.json var textOneJson {"type": "sql_test_text_one","message0": " one ","colour": 30,"tooltip": 无输入 , 无输出 };javascriptGenerator.forBlock[sql_test_te…

数据结构:二叉树(堆)的顺序存储

文章目录 1. 树1.1 树的概念和结构1.2 树的相关术语 2. 二叉树2.1 二叉树的概念和结构2.2 二叉树的特点2.3 特殊的二叉树2.3.1 满二叉树2.3.2 完全二叉树 2.4 二叉树的性质 3. 实现顺序结构二叉树3.1 堆的概念和结构3.2 初始化3.3 销毁3.4 插入数据3.5 向上调整算法3.6 删除数据…

【二叉树】—— 算法题

一、单值二叉树 题目要求&#xff1a;判断二叉树是不是单值二叉树&#xff08;就是所以节点的值都相等&#xff09;。 思路&#xff1a; 利用二叉树的递归思想&#xff0c;判断每一个节点值与其左右子节点的值是否相等&#xff0c;如果遇到空节点&#xff0c;就返回true&#…

JavaScript的常见难点(一)

1. 异步编程 如何使用&#xff1a;使用回调函数、Promise、async/await 来处理异步操作。面试问题&#xff1a; 解释什么是 Promise&#xff0c;如何使用它。async 和 await 是什么&#xff1f;它们如何简化异步代码&#xff1f;面试问题的答案&#xff1a; Promise&#xff1…

linux异步操作接口

aiocb数据结构 需要头文件 #include <aiocb.h>结构定义为 struct aiocb {/* The order of these fields is implementation-dependent */int aio_fildes; /* File descriptor */off_t aio_offset; /* File offset */volatile void *ai…

醒醒,别睡了...讲《数据分析pandas库》了—/—<7>

一、 1、处理缺失值 1.1 认识缺失值 系统默认的缺失值 None 和 np. nan datapd.Series([3,4,np.nan,1,5,None]) dfpd.DataFrame([[1,2,None],[4,np.nan,6],[5,6,7]]) 1.2 缺失值查看 直接调用info() 方法就会返回每一列的缺失情况。 dfpd.DataFrame([[1,2,np.nan],[4,np.n…

后端面试题日常练-day12 【Java基础】

题目 希望这些选择题能够帮助您进行后端面试的准备&#xff0c;答案在文末 Java中的重载&#xff08;Overload&#xff09;和重写&#xff08;Override&#xff09;有何区别&#xff1f; a) 重载是指在同一个类中可以有多个方法同名&#xff0c;但参数列表不同&#xff1b;重写…

SpringMVC异步处理的 5 种方式

SpringMVC异步处理的 5 种方式 Spring MVC 处理异步请求的主要原因是提高 Web 应用的性能和可扩展性&#xff0c;特别是在处理长时间运行的任务或需要等待外部资源&#xff08;如数据库查询、远程服务调用等&#xff09;时。以下是一些具体原因和优势&#xff1a; 优势 1. 资…

迁移FastDFS

迁移FastDFS 停止旧集群服务 [rootnode01 fastdfs]# systemctl stop fdfs_tracker [rootnode01 fastdfs]# systemctl stop fdfs_storage [rootnode01 fastdfs]# systemctl stop nginx把旧集群的配置文件复制到新的集群上&#xff0c;并修改对应的IP地址&#xff0c;路径可以保…

Activity A跳转Activity B,再按返回键,生命周期执行的顺序

开A A:onCreate ----> A:onStart ----> A:OnResume 此时startActivity B A.onPause &#xff0d;> B.onCreate &#xff0d;> B.onStart&#xff0d;> B.onResume---->A.onStop 也就是B可见了 A才会stop 这时候back按键&#xff1a; B.onPause —>A。reS…

在Linux中,MySQL备份与恢复

随着自动化办公与电子商务的不断发展&#xff0c;企业对于信息系统的依赖性越来越高&#xff0c;而数据库在信息系统中担任着非常重要的角色。尤其一些对数据可靠性要求非常高的行业,如银行、证券、电信等&#xff0c;如果发生意外宕机或数据丢失&#xff0c;其损失是非常严重的…

[ACTF2020 新生赛]Upload1

打开靶机&#xff0c;发现什么都没有 查看源码发现有个表单&#xff0c;不过高度为0&#xff0c;所以被隐藏了&#xff0c;我们直接找打css文件&#xff0c;清空&#xff08;也可以设置原始高度&#xff09; 然后提交木马脚本&#xff0c;直接提交PHP不通过 修改为phtml&#x…

Java | Leetcode Java题解之第299题猜数字游戏

题目&#xff1a; 题解&#xff1a; class Solution {public String getHint(String secret, String guess) {int bulls 0;int[] cntS new int[10];int[] cntG new int[10];for (int i 0; i < secret.length(); i) {if (secret.charAt(i) guess.charAt(i)) {bulls;} e…