VUE+HBuilder的uniapp技术路线开发应用使用总结

news2024/11/17 4:53:47

使用总结

  • 本来想做一个记录日常数据的应用,主要在Android端使用,后来发现在uniapp中使用sqllite数据库不是像原生中那样简单(所以当前准备去进行另一个路线,就是给我使用的电脑都安装一个portalble的服务端,用来记录数据,这样也不会占用手机的空间了)。当前的使用体验如下:
  • 考虑到兼容性问题,HBuilder比较适合写UI加服务端存储的项目(各种小程序,网页商城)(当然其他功能也可以进行uniapp的安卓原生插件开发或者与原生Android交互传递数据)
  • Hbuilder编辑器在使用打包时要进行登录,手机绑定。使用中还出现了以下问题:

在这里插入图片描述

  • 本地打包3.1.10版本起需要申请 Appkey。

基础

  • 官方文档: https://uniapp.dcloud.net.cn/quickstart.html
重要组成说明注释
vue的基础语法插值和数据绑定,条件与循环等重要
App.vue应用入口文件,监听应用生命周期、配置全局样式、配置全局的存储globalData处理app启动,切换时的命令,可以不用管
main.js/main.uts初始化vue实例、定义全局组件、使用需要的插件如 i18n、vueximport作用
pages.json页面管理,pages数组中第一项表示应用启动页重要配置文件
vue.config.js是一个可选的配置文件
vite.config.js是一个可选的配置文件
代码主要复用方式认识Vue 的 export、export default、import重要,例子
各种控件比如label控件重要
uni.scss整体控制应用的风格使用<style lang="scss">
存储uniapp本地kv存储:uni.getStorageSync
父子组件props传递值例子
Vue.mixin混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。提高复用性,在全局范围内共享代码
uView组件库uni-app 分不清的全局变量this, uni, $u, vm, uni.$u, this.$u,API集中管理:uni.$u.api.this.$u.api.register(data)=>http://192.168.0.30:8000/api/register
状态管理Vuex状态管理模式this.$store.dispatch:调取store里的user.js的login方法
插件快速实现各种功能时间格式化插件dayjs,Hbuilder使用tailwindcss

兼容性

  • 比如文件系统 uni.getFileSystemManager(),app平台需要使用uni-app x支持,另见,但是uni-app x是用的uts语言(uni-app x 没有使用js和webview,它基于 uts 语言。在App端,uts在iOS编译为swift、在Android编译为kotlin,完全达到了原生应用的功能、性能。并且uni-app x不支持vue2,新基座名称默认为uni-app x(之前叫HBuilder))。

例子

  • 各端兼容问题,比如以下代码无法在安卓端运行
<template>
  <view class="container">
    <button @click="createAndWriteTxt">创建并写入txt文件</button>
  </view>
</template>

<script>
export default {
  methods: {
    createAndWriteTxt() {
      // 创建文件内容
      const content = "Hello, this is a txt file content.";

      // 创建Blob对象
      const blob = new Blob([content], { type: "text/plain" });

      // 创建下载链接
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = "example.txt";

      // 模拟点击下载链接
      document.body.appendChild(link);
      link.click();

      // 移除下载链接
      document.body.removeChild(link);
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

text {
  font-size: 16px;
  color: #007aff;
  text-decoration: underline;
  cursor: pointer;
}
</style>

CG

  • https://playcode.io/vue

  • https://gitee.com/iamxcd/yq-uniapp

  • 基于laravel+uniapp 开发的记账APP

  • 最好的 6 个免费天气 API 接口对比测评

  • 我为什么要选择flutter

  • AndroPHP是一款Android应用程序,它允许您在Android设备上搭建PHP服务器 : 手机搭建PHP+MYSQL完美运行WordPress

  • 【XIAO ESP32S3 sense 通过 ESPHome 与 Home Assistant 连接】

  • 第三篇 香橙派的外设开发基础(中)— 串口篇

  • 还有一个例子,是可以在网页端运行,但是打包到app无法运行

  • 前端

				fetch('http://192.168.31.28:5000/upload', {
						method: 'POST', 
						headers: {
							'Content-Type': 'application/json',
						},
						body: JSON.stringify(data),
					}).then(response => {
						window.alert("ok !");
					})
					.then(responseData => {
						// window.alert("sometext2");
					})
					.catch(error => {
						window.alert(error);
					});
  • 后端
from flask import Flask, request
app = Flask(__name__)
from flask_cors import CORS # pip install flask_cors
CORS(app)

@app.route('/')
def hello_world():
    return 'Hello, World!'


@app.route('/upload', methods=['POST', 'GET'])
def upload():
    if request.method == 'POST':
        content_type = request.headers.get('Content-Type')
        if content_type and 'application/json' in content_type:
            user_info = request.get_json(force=True)
            print(user_info)
            save_to_text_file(user_info, 'data.txt')
        else:
            # Processing form data (as a dictionary)
            user_info = request.form.to_dict()
            print(user_info)
            save_to_text_file(user_info, 'data.txt')
        return "Data received and saved successfully."
    else:
        save_to_text_file("user_info", 'data.txt')
        return "Data received and saved successfully."

def save_to_text_file(data, filename):
    with open(filename, 'a') as file:
        if isinstance(data, dict):
            # Save dictionary data
            file.write(str(data)+"\n")
        elif isinstance(data, str):
            # Save JSON data
            file.write(data+"\n")
        else:
            raise ValueError("Unsupported data type. Expecting dict or str (JSON).")
app.run(host='0.0.0.0',port=5000) # 访问 http://127.0.0.1:5000/ 即可

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

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

相关文章

linux环境下线程的介绍和POSIX线程接口应用实例

目录 概述 1 线程概念 1.1 线程的特性 1.2 线程的运行状态 2 线程API 2.1 pthread的数据类型 2.2 pthread函数的返回值 2.3 POSIX线程接口 2.3.1 创建线程函数pthread_create 2.3.2 终止线程 2.3.3 线程ID 2.3.4 连接已终止线程 2.3.5 线程分离 3 线程VS进程 4 线…

电子电器架构 —— 车载网关路由表和刷写场景

电子电器架构 —— 车载网关路由表和刷写场景 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 PS:小细节,本文字数5000+,详细描述了网关在车载框架中的具体性能设置。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有…

leetcode 热题 100_搜索二维矩阵

题解一&#xff1a; 二叉搜索树&#xff1a;从矩阵右上角观察&#xff0c;结构类似二叉搜索树&#xff0c;因此可以用类似的解法来做。具体做法是双指针从右上角开始&#xff0c;向左下角逐步搜索&#xff0c;如果当前值比目标值大&#xff0c;则向下移动&#xff0c;如果当前值…

MQ高可用相关设置

文章目录 前言MQ如何保证消息不丢失RabbitMQRocketMQKafkaMQ MQ如何保证顺序消息RabbitMQRocketMQKafka MQ刷盘机制/集群同步RabbitMQRocketMQKafka 广播消息&集群消息RabbitMQRocketMQ MQ集群架构RabbitMQRocketMQKafka 消息重试RabbitMQRockeMqKafka 死信队列RocketMQKaf…

Linux网络套接字之TCP网络程序

(&#xff61;&#xff65;∀&#xff65;)&#xff89;&#xff9e;嗨&#xff01;你好这里是ky233的主页&#xff1a;这里是ky233的主页&#xff0c;欢迎光临~https://blog.csdn.net/ky233?typeblog 点个关注不迷路⌯▾⌯ 目录 一、接口介绍 1.socket 2.listen 3.accept…

conda 设置国内源 windows+linux

默认的conda源连接不好&#xff0c;时好时坏&#xff0c;而且速度很慢&#xff0c;可以使用国内的源 如果没有安装conda&#xff0c;可以参考&#xff1a; miniconda安装&#xff1a;链接 anaconda安装winlinux&#xff1a;链接 windows使用命令提示符&#xff0c;linux使用…

后端八股笔记------Redis

Redis八股 上两种都有可能导致脏数据 所以使用两次删除缓存的技术&#xff0c;延时是因为数据库有主从问题需要更新&#xff0c;无法达到完全的强一致性&#xff0c;只能达到控制一致性。 一般放入缓存中的数据都是读多写少的数据 业务逻辑代码&#x1f447; 写锁&#x1f4…

Linux网络基础2之https

(&#xff61;&#xff65;∀&#xff65;)&#xff89;&#xff9e;嗨&#xff01;你好这里是ky233的主页&#xff1a;这里是ky233的主页&#xff0c;欢迎光临~https://blog.csdn.net/ky233?typeblog 点个关注不迷路⌯▾⌯ http是明文的可以通过一些的工具获取到正文层&#…

【Spring Boot系列】快速上手 Spring Boot

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【数学建模】传染病模型笔记

传染病的基本数学模型&#xff0c;研究传染病的传播速度、空间范围、传播途径、动力学机理等问题&#xff0c;以指导对传染病的有效地预防和控制。常见的传染病模型按照传染病类型分为 SI、SIR、SIRS、SEIR 模型等&#xff0c;按照传播机理又分为基于常微分方程、偏微分方程、网…

《计算机网络》考研:2024/3/7 2.1.4 奈氏准则和香农定理

2024/3/7 (作者转行去干LLMs了&#xff0c;但是又想搞定考研&#xff0c;忙不过来了就全截图了呜呜呜。。。 生活真不容易。) 2.1.4 奈氏准则与香农定理

出现“error: failed to push some refs to ‘https://github.com/****.git‘”,如何解决问题

一、出错情况&#xff1a; 今天继续推送整理的知识点的时候&#xff0c;出现了一个报错。“error: failed to push some refs to https://github.com/.git”&#xff0c;百思不得其解&#xff0c;之前推送的时候都可以轻松推送成功&#xff0c;如今却说本地库与远程库不一致。…

STM32电源及时钟介绍

一、STM32最小系统 二、电源电路 2.1供电电压VDD&#xff0c;VSS F103VET6 的引角图 在 F103VET6 的引角图中可找到 49\50 角&#xff0c; 74\75 角&#xff0c; 99\100 角&#xff0c; 27\28角&#xff0c;10 \11角一共 5 对的VDD&#xff0c;VSS&#xff0c;也就是给我们芯片…

体系班第十三节

1判断完全二叉树递归做法 有四种情况&#xff1a;1 左树完全&#xff0c;右数满&#xff0c;且左高为右高加一 2左满 &#xff0c;右满&#xff0c;左高为右高加一 3左满&#xff0c;右完全&#xff0c;左右高相等 4左右均满且高相等 #include<iostream> #include&l…

外边距折叠的原因和解决

参考文章 什么时候出现外边距塌陷 外边距塌陷&#xff0c;也叫外边距折叠&#xff0c;在普通文档流中&#xff0c;在垂直方向上的2个或多个相邻的块级元素&#xff08;父子或者兄弟&#xff09;外边距合并成一个外边距的现象&#xff0c;不过只有上下外边距才会有塌陷&#x…

Guiding Large Language Models viaDirectional Stimulus Prompting

1. 通过定向刺激提示指导大语言模型 论文地址&#xff1a;[2302.11520] Guiding Large Language Models via Directional Stimulus Prompting (arxiv.org) 源码地址&#xff1a;GitHub - Leezekun/Directional-Stimulus-Prompting: [NeurIPS 2023] Codebase for the paper: &qu…

[mmucache]-ARMV8-aarch64的虚拟内存(mmutlbcache)介绍-概念扫盲

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 思考: 1、cache的entry里都是有什么&#xff1f; 2、TLB的entry里都是有什么? 3、MMU操作…

保持长期高效的七个法则(一)7 Rules for Staying Productive Long-Term(1)

Easily the best habit I’ve ever started was to use a productivity system.The idea is simple:organizing all the stuff you need to do (and how you’re going to do it) prevents a lot of internal struggle to get things done. 无疑&#xff0c;我曾经建立过的最好…

简单了解TCP/IP四层模型

什么是计算机网络&#xff1f; 计算机网络我们可以理解为一个巨大的城市地图&#xff0c;我们想从A地前往B地&#xff0c;其中要走的路、要避开的问题都交给计算机网络解决&#xff0c;直到我们可以正常的到达目的地&#xff0c;那么我们会把其中的过程抽象成一个网络模型&…

分布式执行引擎ray入门--(3)Ray Train

Ray Train中包含4个部分 Training function: 包含训练模型逻辑的函数 Worker: 用来跑训练的 Scaling configuration: 配置 Trainer: 协调以上三个部分 Ray TrainPyTorch 这一块比较建议直接去官网看diff&#xff0c;官网色块标注的比较清晰&#xff0c;非常直观。 impor…