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多进程调用示例 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…

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&#…

醒醒,别睡了...讲《数据分析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…

在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…

初学Mybatis之多对一查询 association 和一对多查询 collection

XML 映射器 多对一&#xff1a;关联&#xff08;association&#xff09; 一对多&#xff1a;集合&#xff08;collection&#xff09; mysql 创建教师、学生表&#xff0c;插入数据 create table teacher(id int(10) primary key,name varchar(30) default null ) engineI…

OpenSource - Ip2region 离线IP地址定位库和IP定位数据管理框架

文章目录 Ip2region 是什么Ip2region 特性1、IP 数据管理框架2、数据去重和压缩3、极速查询响应 xdb 数据查询xdb 数据生成xdb 数据更新手动编辑更新检测自动更新 相关备注1、并发查询必读2、技术资源分享 Release Ip2region 是什么 https://github.com/lionsoul2014/ip2regio…

【C++】使用哈希表封装unordered_map与unordered_set

文章目录 1. unordered系列关联式容器1.1 unordered_set1.2 unordered_map 2. unordered_set/map的封装2.1 基本接口2.2 迭代器2.2.1 迭代器的结构2.2.2 set迭代器的封装2.2.3 map迭代器的封装 3.完整代码3.1HashTable3.2unordered_set3.3unordered_map 1. unordered系列关联式…

Windows Redis启动方式及保持服务运行方法

1. Redis启动方法 1. cmd进入redis文件夹下&#xff0c;输入&#xff1a;redis-server.exe redis.windows.conf&#xff0c;出现如下界面启动成功。但此cmd窗口要一直保持打开状态&#xff0c;一旦关闭redis也就关闭了。要想cmd关闭&#xff0c;但redis处于打开状态&#xff…

医疗器械上市欧美,需要什么样的网络安全相关申报文件?

医疗器械在欧美上市时&#xff0c;需要提交的网络安全相关申报文件主要包括以下几个方面&#xff0c;这些要求基于欧美地区的法律法规和监管机构的指导文件。 一、美国FDA要求 1. 网络安全管理计划 内容&#xff1a;制造商需要提交一份网络安全管理计划&#xff0c;该计划应包含…

【人工智能】人工智能概论(一):人工智能基本概概念、学派、发展历程与新一代人工智能

文章目录 1. 人工智能的基本概念与定义2. 人工智能的主要学派及主旨思想2.1. 符号主义学派&#xff1a;AI源自数学逻辑2.2. 连接主义学派&#xff1a;AI源自仿生学2.3. 行为主义学派&#xff1a;AI源自控制论 3. 人工智能的起源及发展历程4. 驱动新一代人工智能快速发展的因素 …

【C语言】C语言期末突击/考研--导学篇

前言 我将把C语言的知识要点&#xff0c;学习收获以文章形式发表&#xff0c;由于我目前也还是一个菜鸟&#xff0c;难以避免错误和存在观点片面的部分&#xff0c;非常感谢读者指正&#xff01;希望能在这里与大家共同进步&#xff0c;早日成为大牛&#xff01;进入大厂&…

本地使用Git同步、配合Gitee同步至仓库并下拉到本地(亲手调试,全能跑通)

这几天在公司&#xff0c;同事都在使用Gitee上传项目&#xff0c;进行同步&#xff0c;我也进行了简单学习了解了一下版本控制软件Git&#xff0c;挺不错的&#xff0c;故写个笔记记录一下。 本篇博文主要涉及的内容&#xff1a; 1&#xff0c;本地写代码&#xff0c;通过Git同…