用uni-app开发一个多端的商城系统

1、用vs code开发uni-app项目

ts类型校验：

• 安装类型声明文件 pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types
• 配置tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    // 类型声明文件
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    // 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
    "nativeTags": ["block", "component", "template", "slot"], 
    "experimentalRuntimeMode": "runtime-uni-app" 
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

JSON 注释问题

• 设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc

{
  // 在保存时格式化文件
  "editor.formatOnSave": true,
  // 文件格式化配置
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 配置语言的文件关联
  "files.associations": {
    "pages.json": "jsonc", // pages.json 可以写注释
    "manifest.json": "jsonc" // manifest.json 可以写注释
  }
}

2、uni-app和原生小程序的开发区别

开发区别：

uni-app项目的每个页面是一个.vue文件，数据绑定及事件处理同Vue.js规范

• 属性绑定src="{ { url }}" 升级成 :src="url"
• 事件绑定@tap="eventName"，支持()传参
• 支持Vue常用指令，v-for，v-if，v-show，v-model等

其他区别补充

• 调用接口能力，建议前缀 wx 替换为 uni ，养成好习惯，支持多端开发。
• <style> 页面样式不需要写 scoped，小程序是多页面应用，页面样式自动隔离。生命周期分三部分：应用生命周期(小程序)，页面生命周期(小程序)，组件生命周期(Vue)

3、使用uni-ui组件库

构建界面

• 安装uni-ui

npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

• 组件自动引入

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

• 配置ts类型

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

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types", // uni-app 组件类型
      "@uni-helper/uni-ui-types" // uni-ui 组件类型  
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  }
}

4、小程序端持久化配置（Pinia）

多端持久化 API

// 兼容多端API
uni.setStorageSync()
uni.getStorageSync()

  // 配置持久化
    persist: {
      // 调整为兼容多端的API
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value) 
        },
        getItem(key) {
          return uni.getStorageSync(key) 
        },
      }