uniapp插件uViewplus的使用(涉及TS下的问题)

在技术选型后最后定了使用有团队维护的uview-plus3.0,官方文档

配置参考:https://juejin.cn/post/7169875753100640270

ts配置参考:https://blog.csdn.net/m0_70027114/article/details/132957426

引入

在项目文件的pages.json中的"easycom"."custom": 添加如下

复制代码
"easycom": {
	"autoscan": true,
	"custom": {
		......
		"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
		"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
		"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
	}
},

main.js文件中引入插件

复制代码
// 引入全局uview-plus
 import uviewPlus from './uni_modules/uview-plus/index.js'

 const app = createSSRApp(App)
 app.use(uviewPlus)
 
 return {
  app
 }

TS相关

创建env.d.ts

复制代码
declare module '@/uni_modules/uview-plus';

并写入tsconfig.json

复制代码
{	
	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
	"typeRoots": [
		"@/env.d.ts"
	]
}

遇到的问题

我的vue3项目使用了ts,这个插件引入之后就开始报uni. u 属性不存在,但不影响运行。因为 u属性不存在,但不影响运行。 因为 u属性不存在,但不影响运行。因为u认不出来,他和下面的属性没有提示,书写起来不方便,容易写错。

参考了两个官方论坛的解决方案

https://ask.dcloud.net.cn/question/163482

https://ask.dcloud.net.cn/question/141695

编译器HBuilder3.99 是允许的

https://www.cnblogs.com/00544--/p/17097648.html

复制代码
declare module 'uview-plus' {  
  export function install(): void  //必要
  interface test {  
    /** 邮箱格式校验 */  
    email(email: string): boolean  
  }  
  interface $u {  
    test: test  
  }  

  global {  
    interface Uni {  
      $u: $u  
    }  
  }  
}

猜测需要将所有用到的类型一一注册,才能作为属性调用,uView的属性还挺多的,工程量有点大就没写

相关推荐
软件技术NINI2 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front3 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie3 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀3 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树4 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
毛毛三由4 小时前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
巴博尔4 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
技术钱4 小时前
uniapp使用音频录音功能
chrome·uni-app·音视频
焚 城4 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app