8 uniapp

约 597 字大约 2 分钟

2025-06-18

uni-app是国人开发的基于vue语法,可以编译成各个小程序的项目,不过由于种类多,且小程序api经常更改,uniapp会有较多bug

vscode创建uniapp项目

npx degit dcloudio/uni-preset-vue#vite demo

创建基于ts的项目

npx degit dcloudio/uni-preset-vue#vite-ts demo

访问仓库失败处理

npx @dcloudio/uvm

vue3创建的项目默认不安装api语法提示依赖,手动安装

npm i @dcloudio/types miniprogram-api-typings mini-types -D

安装uni-ui组件库也有其他组件库可使用,但uni-ui组件库是跨平台的

pnpm i @dcloudio/uni-ui

运行项目相关的命令在package.son文件中

配置uni-ui类型(ts) uni-ui是js开发的,因此所有的uni-ui组件都没有类型,要想使用ts的类型检查需要导入第三方的软件包

npm i -D @uni-helper/uni-ui-types

自动导入规则的配置

在pages.json文件中添加

  "easycom": {
    "autoscan": true,
    "custom": {
	  // 以uni-开头的文件自动导入@dcloudio/uni-ui/lib/后续文件夹中的对应文件,$1是占位符表示uni-后面名字
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
    }
  }

ts配置

安装ts类型校验

pnpm i-D @types/wechat-miniprogram @uni-helper/uni-app-types

ts配置文件

"compileroptions":{
	"types":[
		"@dcloudio/types",
		"@types/wechat-miniprogram""
		"@uni-helper/uni-app-types"
	]
}
"vueCompileroptions":{
	"experimentalRuntimeMode":"runtime-uniapp"
}

持久化

在uniapp中可以使用pinia持久化,但默认开启的持久化方式只适用于浏览器需要对创建的store对象进行额外的配置

persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        }
      }
    }