个人首次使用UniAPP使用注意事项以及踩坑
个人首次使用UniAPP
使用注意事项以及踩坑
自我记录
持续更新
1.vscode 插件
uni-create-view 快速nui-app页面的
uni-helper uni-app代码提示的
uniapp小程序扩展 鼠标悬停查文档
Error Lens 行内提示报错
"types": ["@dcloudio/types", "miniprogram-api-typings", "@uni-helper/uni-app-types","@uni-helper/uni-ui-types"]miniprogram-api-typings 是一种增强小程序开发体验的工具,特别适用于使用 TypeScript 进行小程序开发的开发者。
@uni-helper/uni-app-types 是一个用于增强 uni-app 开发体验的 TypeScript 类型声明库,它可以帮助你在编写跨平台应用时获得更准确的代码提示和类型检查,提高代码质量和开发效率。
@uni-helper/uni-ui-types 是一个为 uni-ui 组件库提供的 TypeScript 类型声明库。
2.统一代码风格
- 安装
eslint
+prettier
pnpm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig
新建 .eslintrc.cjs
文件,添加以下 eslint
配置
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution') // 加载模块解析的修复补丁。
// 导出一个对象,该对象包含ESLint的配置信息。
module.exports = { root: true, // 指定该配置文件为根配置文件。extends: [ // 指定扩展的规则集,这里包括了一些规则的插件和扩展。'plugin:vue/vue3-essential', // Vue.js 3.x项目的基本规则。'eslint:recommended', // ESLint官方推荐的规则。'@vue/eslint-config-typescript', // Vue.js项目中使用TypeScript的规则。'@vue/eslint-config-prettier',// 与Prettier代码格式化工具一起使用的规则。],// 小程序全局变量globals: { //指定全局变量,这些变量可以在代码中直接使用而不需要声明。uni: true,wx: true,WechatMiniprogram: true,getCurrentPages: true,getApp: true,UniApp: true,UniHelper: true,App: true,Page: true,Component: true,AnyObject: true,},parserOptions: { //指定解析器选项,这里将ECMAScript版本设置为最新。ecmaVersion: 'latest',},rules: { //指定自定义的规则,这里列出了一些自定义规则的配置。'prettier/prettier': [ //使用Prettier的规则进行代码格式化,包括使用单引号、省略分号、限制一行的最大字符数、使用逗号结尾等。'warn',// 表示如果代码与这些配置不符合,ESLint将发出警告。具体的配置包括:{singleQuote: true, // 使用单引号而不是双引号。semi: false, //不使用分号结尾。printWidth: 100, // 限制一行的字符数为100。trailingComma: 'all', // 使用逗号结尾的方式。endOfLine: 'auto', // 自动识别换行符。},],'vue/multi-word-component-names': ['off'], // 禁用在Vue组件名中使用多个单词的规则。'vue/no-setup-props-destructure': ['off'], // 禁用在Vue组件props中使用解构赋值的规则。'vue/no-deprecated-html-element-is': ['off'], // 禁用使用已废弃的`is`属性的规则。'@typescript-eslint/no-unused-vars': ['off'], // 禁用未使用的TypeScript变量的规则。},
}
package.json 中添加
{"script": {// ... 省略 ..."lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore"}
}
然后 运行 pnpm lint 自动修复了
- https://prettier.io/docs/en/options.html 常见规则
vscode 开启 eslint 自动修复
json
"editor.codeActionsOnSave": {"source.fixAll": true,},
3.使用uCharts
组件方式
快速上手
npm i @qiun/ucharts
4.报错相关
Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.
不能用标签选择器 如 button text 这样的 应该加类名
5.获取屏幕边界到安全区域的距离
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
6.分享
onShareAppMessage
// 分享的信息
onShareAppMessage((res) => {// 分享事件来源:menu(右上角分享按钮)return {title: '请来填写一下个人信息!',path: '/pages/addInfo/index',}
})
7.内置组件picker的踩坑
<view class="uni-title uni-common-pl">地区选择器</view><view class="uni-list"><view class="uni-list-cell"><view class="uni-list-cell-left"> 当前地区为: </view><view class="uni-list-cell-db"><pickermode="region":value="regionList"@change="onRegionChange"@cancel="onRangeCancel"level="city"><view class="" v-if="regionList.length">{{ regionList[0] }} - {{ regionList[1] }}</view><view v-else>{{ '请选择城市' }}</view></picker></view></view></view>
源码里面是有 选择器层级的 province 省级 city 市级 region 区级 sub-district 街道级
但是官网文档没有显示 然后微信开发者工具也不好使,一度以为废弃了,偶然间发现*****mmp的手机预览就可以
相关文章:
个人首次使用UniAPP使用注意事项以及踩坑
个人首次使用UniAPP 使用注意事项以及踩坑 自我记录 持续更新 1.vscode 插件 uni-create-view 快速nui-app页面的 uni-helper uni-app代码提示的 uniapp小程序扩展 鼠标悬停查文档 Error Lens 行内提示报错 "types": ["dcloudio/types", "mini…...
VSCode 如何解决 scanf 的输入问题——Code is already running!
文章如何使用 VSCode 软件运行C代码中已经介绍了如何在 VSCode 软件中运行C代码,但最近在使用 scanf 想从键盘输入时,运行代码后显示“Code is already running!”,如下图所示,在输出窗口是无法通过键盘输入的。 解决办法如下&am…...
短视频seo源码矩阵系统开源---代码php分享
前言:短视频seo源码 短视频seo矩阵系统源码私有化部署 短视频seo源码 短视频seo矩阵系统源码私有化怎么部署? 首先我们来给大家普及一下什么是短视频seo矩阵系统?视频矩阵分为多平台矩阵与一个平台多账号矩阵,加上seo排名优化&…...
【docker】中文无法显示输入等问题解决方法
every blog every motto: You can do more than you think. csdn: https://blog.csdn.net/weixin_39190382?typeblog ID: 胡侃有料 0. 前言 docker 路径中文不显示,无法输入中文问题解决方法 1. 解决方法 1.1 临时解决 打开etc/profile文件,末尾添…...
leetcode 1035. 不相交的线
2023.8.25 本题可以转化为:求两数组的最长公共子序列。 进而可以用dp算法解决。 方法类似于这题最长公共子序列 。 代码如下: class Solution { public:int maxUncrossedLines(vector<int>& nums1, vector<int>& nums2) {vector<…...
Hystrix: 服务降级
cloud是基础,eureka是服务注册和发现,consumer是消费者去消费provider里的东西,消费方式就是Feign和Ribbon,feign 接口消费,ribbon Rest消费 服务降级发生在客户端,客户端因为请求关闭的服务器࿰…...
高精度运算(加减乘除乘法)
所谓高精度,就是大数的运算,这个大数可能是要远远超过现有数据类型的最大范围。如果我们想进行这样的运算,就要掌握计算的原理——竖式运算。 加法 我们这里先简单考虑非负数的加法,竖式这么列对吧: ①存储 我们如何…...
Mysql数据库技术知识整理
Mysql的知识点目录 重点:架构,引擎,索引,锁机制,事务机制,日志机制,集群,调优 3、Mysql索引 索引概念 覆盖索引: 条件列和结果列都在索引中索引下推: 查询会先过滤条件列,然后回表查数据最左前缀匹配&am…...
SpringBoot整合Mybatis 简单试用
1. 导入依赖 我使用MySQL,需要导入MySQL的驱动依赖此外要在SpringBoot中使用Mybatis,则需要导入Mybatis启动器 <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifact…...
SpringBoot案例-配置文件-yml配置文件
配置格式 SpringBoot提供了多种属性配置方式 application.propertiesapplication.ymlapplication.yaml常见配置文件格式对比 XML(臃肿) <configuration><database><host>localhost</host><port>3306</port><use…...
Web Components
Web Components标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为custom elements(自定义标签),可以使用CustomElementRegistry来管理自定义标签 <script>//1、创建自定义标签class NewElement extends HTML…...
IT运维软件的费用是多少?
正常一套IT运维软件费用一般在5千-50万之间不等,而且分为一次性付费或年付费模式,付费方式导致的价格也不同。 正常情况下IT运维软件的具体价格,是需要根据企业的实际需求来进行综合评估,一般来说,影响具体价格费用有以…...
基于Three.js的WebXR渲染入门
1、Three.js 渲染管线快速概览 我不会花太多时间讨论 Three.JS 渲染管道的工作原理,因为它在互联网上有详细记录(例如,此链接)。 我将在下图中列出基础知识,以便更容易理解各个部分的去向。 2、WebXR 设备 API 入门 在我们深入了解 WebXR API 本身之前,您应该知道 WebX…...
resource doesn‘t have a corresponding Go package.
resource doesnt have a corresponding Go package. GO这个鬼东西不能直接放src下。 ************ Building Go project: ProjectGoTest ************with GOPATH: D:\Go;D:\eclipse-jee-oxygen-2-win32-x86_64\workspace\ProjectGoTest >> Running: D:\Go\bin\go.exe …...
【微服务】微服务调用原理及服务治理
本文通过图文结合,简要讲述微服务的调用原理,以及服务治理的相关概念。 1.微服务的调用原理 举个栗子:你去会所洗脚。首先,技师肯定要先去会所应聘,通过之后,会所会记录该技师的信息和技能,然后…...
【在Windows下搭建Tomcat HTTP服务】
文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器,不仅名字很有趣࿰…...
前端Vue3框架知识点大全
Vue.js是一种流行的JavaScript前端框架,它的第三个版本Vue3带来了许多令人兴奋的新特性和改进。 1、响应式数据: Vue 3采用了基于Proxy的响应式系统,相比Vue 2中的Object.defineProperty,Proxy提供了更强大和灵活的拦截器&#…...
C语言练习2(巩固提升)
C语言练习2 选择题 前言 “志之所趋,无远弗届,穷山距海,不能限也。”对想做爱做的事要敢试敢为,努力从无到有、从小到大,把理想变为现实。要敢于做先锋,而不做过客、当看客,让创新成为青春远航的…...
Vulnhub: DriftingBlues: 1靶机
kali:192.168.111.111 靶机:192.168.111.215 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.215 80端口首页源码 访问noteforkingfish.txt,发现为Ook!加密的密文 解密后提示需要用户eric和修改hosts文件&…...
Android项目如何上传Gitee仓库
前言 最近Android项目比较多,我都是把Android项目上传到Gitee中去,GitHub的话我用的少,可能我还是更喜欢Gitee吧,毕竟Gitee仓库用起来更加方便 一. 创建Gitee仓库 1. 先创建一个Gitee账号,然后登录上去 2. 创建Androi…...
MySQL——基础——联合查询
联合查询 - union,union all 对于union查询,就是把多次查询的结果合并起来,形成一个新的查询结果集 SELECT 字段列表 FROM 表A ... UNION [ALL] SELECT 字段列表 FROM 表B ...; 1.将薪资低于5000的员工,和 年龄大于50的员工全部查询出来 use itcast; select * from participat…...
Vue3+Vite 初始化Cesium
Vue3Vite 初始化Cesium 安装依赖 yarn add cesium yarn add vite-plugin-cesium -D加载vite-plugin-cesium插件 import { defineConfig } from vite import vue from vitejs/plugin-vue import cesium from vite-plugin-cesium;export default defineConfig({plugins: [vue(…...
c++内存地址分配
...
改进YOLO系列:9.添加S2Attention注意力机制
添加S2Attention注意力机制 1. S2Attention注意力机制论文2. S2Attention注意力机制原理3. S2Attention注意力机制的配置3.1common.py配置3.2yolo.py配置3.3yaml文件配置1. S2Attention注意力机制论文 论文题目:S 2 -MLPV2: IMPROVED SPATIAL-SHIFT MLP ARCHITECTURE…...
微服务Feign组件远程调用自定义解码器
Feign远程调用响应结果格式 public class Result<T> {/*** 响应码,200为成功*/private Integer code;/*** 响应信息*/private String message;/*** 响应的具体对象*/private T data; }自定义Feign解码器 Component // 注入Spring的IOC容器中,所有…...
FairyGUI编辑器自定义菜单扩展插件
本文涉及到的软件有:FairyGUI,VSCode 代码环境涉及到了:Lua VSCode插件:EmmyLua 在编写FairyGUI编辑器菜单前,了解一下FairyGUIEditor的API会有效的帮助我们解决很多问题。FairyGUI的扩展是通过编辑器自带的插件功能…...
若依二次开发
目录 本地启动 前端代码 后端代码 代码适配 数据表初始化 远程部署...
安全(权限)框架Shiro概述及原理
1.1 Shiro是什么 Apache Shiro是一个功能强大且易于使用的Java安全(权限)框架。Shiro可以完成:认证、授权、加密、会话管理、与Web集成、缓存 等。借助Shiro您可以快速轻松地保护任何应用程序——从最小的移动应用程序到最大的Web和企业应用…...
java: 无法访问org.springframework.boot.SpringApplication 错误的类文件
项目场景: 提示:这里简述项目相关背景: 错误1: java: 无法访问org.springframework.boot.SpringApplication 错误的类文件: /D:/Software/env-java/apache-maven-3.6.1/repository/org/springframework/boot/spring-boot/3.1.2/sp…...
改进YOLO系列:7.添加CA注意力机制
添加CA注意力机制 1. CA注意力机制论文2. CA注意力机制原理3. CA注意力机制的配置3.1common.py配置3.2yolo.py配置3.3yaml文件配置1. CA注意力机制论文 论文题目:Coordinate Attention for Efficient Mobile Network Design 论文链接:Coordinate Attention for Effi…...
Linux笔记--Ubuntu设置sftp服务
目录 1--修改配置文件 2--注销代码 3--更改代码 4--重启服务 1--修改配置文件 vim /etc/ssh/sshd_config 2--注销代码 ① 注销: Subsystem sftp /usr/libexec/openssh/sftp-server ② 更改为: Subsystem sftp internal-sftp 3--更改代码 Per…...
火山引擎边缘云,助你沉浸式回忆童年
发现了吗?在抖音、西瓜视频上能观看4K修复的经典港片了!得益于抖音、中国电影资料馆、火山引擎共同发起的“经典香港电影修复计划”,我们童年时期看过的《大话西游之大圣娶亲》《武状元苏乞儿》等22部港片以更清晰、流畅、颜色饱满的状态回归…...
Axios跨域请求处理
问题背景: vue 项目用 axios 进行请求的时候,总是报“Access to XMLHttpRequest at ‘http://localhost:8889/api/login’ from origin ‘http://localhost:8080……’”的错误 实际上就是前后端分离的情况下,发生了跨域的问题 跨域定义&…...
Docker(二) Docker容器
在docker中的容器都是由镜像所创建的,一个镜像可以创建多个容器。 一、调试Docker 启动Docker systemctl start docker 查看Docker中有哪些镜像 docker images 下载镜像 docker pull hello-world 运行镜像 docker run hello-world 出现 Hello from Docker! 这…...
【业务功能篇81】微服务SpringCloud-ElasticSearch-Kibanan-docke安装-入门实战
ElasticSearch 一、ElasticSearch概述 1.ElasticSearch介绍 ES 是一个开源的高扩展的分布式全文搜索引擎,是整个Elastic Stack技术栈的核心。它可以近乎实时的存储,检索数据;本身扩展性很好,可以扩展到上百台服务器,…...
【UniApp开发小程序】私聊功能uniapp界面实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】
文章目录 效果显示WebSocket连接使用全局变量WebSocket连接细节 最近和自己聊天的用户信息界面效果界面代码最近的聊天内容太长日期时间显示未读消息数量显示 私聊界面界面展示代码实现英文长串不换行问题聊天区域自动滑动到底部键盘呼出,聊天区域收缩,聊…...
【BASH】回顾与知识点梳理(三十六)
【BASH】回顾与知识点梳理 三十六 三十六. 认识与分析登录档36.1 什么是登录档CentOS 7 登录档简易说明登录档的重要性Linux 常见的登录档档名登录档所需相关服务 (daemon) 与程序CentOS 7.x 使用 systemd 提供的 journalctl 日志管理 登录档内容的一般格式 36.2 rsyslog.servi…...
十三、pikachu之暴力破解
文章目录 1、暴力破解概述2、基于表单的暴力破解3、验证码的绕过3.1 验证码的认证流程3.2 验证码绕过(on client)3.3 验证码绕过(on server)3.4 token防爆破? 1、暴力破解概述 “暴力破解”是一攻击具手段,…...
用手势操控现实:OpenCV 音量控制与 AI 换脸技术解析
基于opencv的手势控制音量和ai换脸 HandTrackingModule.py import cv2 import mediapipe as mp import timeclass handDetector():def __init__(self, mode False, maxHands 2, model_complexity 1, detectionCon 0.5, trackCon 0.5):self.mode modeself.maxHands max…...
【leetcode 力扣刷题】移除链表元素 多种解法
移除链表元素的多种解法 203. 移除链表元素解法①:头节点单独判断解法②:虚拟头节点解法③:递归 203. 移除链表元素 题目链接:203.移除链表元素 题目内容: 理解题意:就是单纯的删除链表中所有值等于给定的…...
leetcode503. 下一个更大元素 II 单调栈
思路: 与之前 739、1475 单调栈的问题如出一辙,唯一不同的地方就是对于遍历完之后。栈中元素的处理,之前的栈中元素因无法找到符合条件的值,直接加入vector中。而这里需要再重头遍历一下数组,找是否有符合条件的&…...
Oracle中列的维护
由于商业环境中,数据是不断变化的,客户的需求也是不断变化的,所以当一个表用了一段时间后,其结构就有可能需要变化。 而在Oracle中,提供了alter table这种方式来改变列。 从Oracle9.2版本之后: 如果需要变…...
后端项目开发:分页功能的实现(Mybatis+pagehelper)
分页查询是项目中的常用功能,此处我们基于Mybatis对分页查询进行处理。 引入分页依赖 <!-- pagehelper --> <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId>…...
SpringBoot集成Drools
一:简介 规则引擎全称为业务规则管理系统(Business Rule Management System)简称BRMS,主要思想是将应用程序中的业务决策部分分离开来,并使用预定义的语义模块编写业务决策(业务规则),由用户或开发者在需要时进行配置、管理。 其实就是将计算逻辑写在脚本中,通过Jav…...
React创建组件的三种方式及其区别是什么?
在React中,创建组件的三种主要方式是函数式组件、类组件和使用React Hooks的函数式组件。以下是对每种方式的详细解释以及它们之间的区别: 1、函数式组件: 函数式组件是使用纯粹的JavaScript函数来定义的。它接收一个props对象作为参数&…...
W6100-EVB-PICO进行UDP组播数据回环测试(九)
前言 上一章我们用我们的开发板作为UDP客户端连接服务器进行数据回环测试,那么本章我们进行UDP组播数据回环测试。 什么是UDP组播? 组播是主机间一对多的通讯模式, 组播是一种允许一个或多个组播源发送同一报文到多个接收者的技术。组播源将…...
Qt 阴影边框
阴影边框很常见,诸如360以及其他很多软件都有类似效果,了解CSS3的同学们应该都知道box-shadow,它就是来设定阴影效果的,那么Qt呢?看过一些资料,说是QSS是基于CSS2的,既然如此,box-sh…...
前端面试:【性能优化】页面加载性能、渲染性能、资源优化
嗨,亲爱的前端开发者!在今天的Web世界中,用户期望页面加载速度快、交互流畅。因此,前端性能优化成为了至关重要的任务。本文将探讨三个关键方面的性能优化:页面加载性能、渲染性能以及资源优化,以帮助你构建…...
从按下电源键到进入系统,CPU在干什么?
本专栏更新速度较慢,简单讲讲计算机的那些事,简单讲讲那些特别散乱杂的知识,欢迎各位朋友订阅专栏啊 感谢一路相伴的朋友们 浅淡操作系统系列第2篇 目录 通电 保护模式和实模式 内存管理单元MMU 逻辑地址?物理地址࿱…...
TypeScript初体验
1.安装编译TS工具包 npm i -g typescript 2. 查看版本号 tsc -v 3.创建ts文件 说明:创建一个index.ts文件 4.TS编译为JS tsc index.ts 5.执行JS代码 node index.js 6.简化TS的步骤 6.1安装 npm i -g ts-node 6.2执行 ts-node index.ts...