哪个网站做logo,企业网站框架图,吴江网站开发,wordpress搜索用户个人首次使用UniAPP
使用注意事项以及踩坑 自我记录 持续更新
1.vscode 插件
uni-create-view 快速nui-app页面的
uni-helper uni-app代码提示的
uniapp小程序扩展 鼠标悬停查文档
Error Lens 行内提示报错
types: [dcloudio/types, mini…个人首次使用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/ucharts4.报错相关
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 classuni-title uni-common-pl地区选择器/viewview classuni-listview classuni-list-cellview classuni-list-cell-left 当前地区为: /viewview classuni-list-cell-dbpickermoderegion:valueregionListchangeonRegionChangecancelonRangeCancellevelcityview class v-ifregionList.length{{ regionList[0] }} - {{ regionList[1] }}/viewview v-else{{ 请选择城市 }}/view/picker/view/view/view源码里面是有 选择器层级的 province 省级 city 市级 region 区级 sub-district 街道级
但是官网文档没有显示 然后微信开发者工具也不好使,一度以为废弃了,偶然间发现*****mmp的手机预览就可以
