项目结构：

实现轮播图：

<swiper>
    <swiper-item>
        <image src="" ></image>
    </swiper-item>
</swiper>

方形铺满，设置样式宽高都为750rpx

uni.previewImage({})进行大图预览

• vscode用Ctrl+I唤醒代码提示

设置允许json文件里写注释

将文件设置为jsonc，如下图：

HbuilderX内置终端打不开的解决方法：

找到HbuilderX的安装位置，进入HBuilderX\plugins\builtincef3terminal\script下main.js，将shell="powershell.exe"改为shell = 'C:/Program Files/PowerShell/7/pwsh.exe' ，改成你自己终端的绝对路径，如下图：

修改tabBar页面样式：

在pages.json里修改

打包程序使其能导入微信开发者工具

执行命令pnpm dev:mp-weixin，将生成的dist文件夹下的dev文件夹下的mp-weixin文件夹导入到微信开发者工具中

sitemap.json文件找不到报错：

把sitemap.json删了再粘贴回来就解决了

使用uni-ui

uni-app官网 (dcloud.net.cn)

安装 uni-ui：npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui

配置easycom：pages.json文件里添加如下内容

// pages.json
{
    // 组件自动引入规则
  "easycom": {
    // 是否开启自动扫描
        "autoscan": true,
      // 以正则方式自定义组件匹配规则
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },

    // 其他内容
    pages:[
        // ...
    ]
}

ts项目使用uni-ui添加类型声明文件，安装：npm i -D @uni-helper/uni-ui-types，然后在tsconfig.json文件中的"types"项后面添加"@uni-helper/uni-ui-types"

Pinia持久化

store文件夹下的ts/js文件最后添加如下内容

// TODO: 持久化
  {
    // 网页端
    // persist: true,
    // 小程序端
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        }
      },
    },
  },

pinia解构注意事项：

export default defineComponent({
  setup() {
    const store = useCounterStore()
    // ❌ 这将无法生效，因为它破坏了响应式
    // 这与从 `props` 中解构是一样的。
    const { name, doubleCount } = store

    name // "eduardo"
    doubleCount // 2

    return {
      // 始终是 "eduardo"
      name,
      // 始终是 2
      doubleCount,
      // 这个将是响应式的
      doubleValue: computed(() => store.doubleCount),
      }
  },
})

为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。

import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const store = useCounterStore()
    // `name` and `doubleCount` 都是响应式 refs
    // 这也将为由插件添加的属性创建 refs
    // 同时会跳过任何 action 或非响应式（非 ref/响应式）属性
    const { name, doubleCount } = storeToRefs(store)
    // 名为 increment 的 action 可以直接提取
    const { increment } = store
    return {
      name,
      doubleCount,
      increment,
    }
  },
})