写在开头

被产品（女朋友）要求做一个小程序，直接仿照记忆日app的功能就行了。
然后就想着正好试一下uniapp
因为服务器到期好久没续费了，所以直接用了微信小程序的云开发免费额度。就一张表，也省事了

正文

功能介绍 6.19修改

产品验收没过啊，ui太丑了，还不能上传背景图片。赶紧改了一波

首页显示

卡片显示所有纪念日（因为就准备和女朋友用，没搞什么分页，懒加载之类的。

新增和编辑页面

三个内容输入，标题、日期和描述

详情页面

展示详情，包括描述

以及删除和编辑两个功能按钮

uniapp

首先先安装官方的vite-vue3-ts模板

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

基础src目录如下。

.
├── pages
│   └── index
│       └── index.vue
├── static
│   └── logo.png
├── App.vue
├── pages.json
├── main.ts
├── manifest.json
└── uni.scss

pages存放页面，static放静态文件

编写完后的目录，添加了interfaces存放声明，components存放共用组件。
只有三个页面，首页展示、详情还有编辑（新增）

.
├── components
│   └── BoxItem.vue
├── interfaces
│   └── data.ts
├── pages
│   ├── add
│   │   └── index.vue
│   ├── details
│   │   └── index.vue
│   └── index
│       └── index.vue

详细的页面功能代码就不放出来了，因为实现比较简单。有兴趣的可以在git上clone下来看。

路由

在pages.json中添加

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "纪念日"
      }
    },
    {
      "path": "pages/add/index",
      "style": {
        "navigationBarTitleText": "新增"
      }
    },
    {
      "path": "pages/details/index",
      "style": {
        "navigationBarTitleText": "详情"
      }
    }
  ],
}

页面中使用,navigateTo跳转到对应url,传参方式"?key=value"

uni.navigateTo({
  url: `/pages/details/index?${params.slice(0, -1)}`
})
// 可以通过navigateBack返回上一个页面
uni.navigateBack({
  delta: 1
})

用reLaunch可以关闭所有页面，打开到应用内的某个页面，就不能用back去返回上一个页面了。

uni.reLaunch({
  url: '/pages/index/index'
})

在setup语法糖下获取路由跳转传递的参数的方式也是用props去接收。如

uni.navigateTo({
  url: `/pages/details/index?key=123`
})

接收

<script setup lang="ts">
interface Props {
  key: number;
}
const props = withDefaults(defineProps<Props>(), {})
props.key === '123' // 传参都是字符串
</script>

微信小程序云数据库

左侧集合相当于表名，用json形式存放数据。

在uni中使用

先安装

npm i -D miniprogram-api-typings/types

并在tsconfig.json中添加

"compilerOptions": {
  "types": [
    ...
    "miniprogram-api-typings/types"
  ]
}

安装wx的ts提示

云数据库的使用

获取所有数据

const db = wx.cloud.database({})
const { data } = await db.collection('day').get()

collection('day')中day代表集合名字

新增数据

db.collection('day').add({data})

更新数据

db.collection('day').doc(_id).set({data})

.doc(id)就是跟个自生成的_id来查找对应数据

高级操作边上的+有许多模板。

云储存的使用

使用了wx的chooseMedia和uploadFile

  wx.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sizeType: ['original'],
    success: (res) => {
      const filePath = res.tempFiles[0].tempFilePath
      background.value = filePath
      wx.cloud.uploadFile({
        cloudPath: `background`,
        filePath,
      })
    }
  })

以及downloadFile来获取图片

wx.cloud.downloadFile({
    fileID: 'cloud://cloud1-7gz0i8yt6c752d67.636c-cloud1-7gz0i8yt6c752d67-1312553943/background',
    success: (res) => {
      background.value = res.tempFilePath
    },
  })

详情对应的图片cloudPath用的数据_id来存，如下

const { _id: backId } = _id
    ? await db.collection('day').doc(_id).set({data})
    : await db.collection('day').add({data})
  
  wx.cloud.uploadFile({
    cloudPath: `image/${_id || backId}`,
    filePath,
  })

写在最后

gitee地址
程序功能比较简单。主要是体验了一下uniapp和微信小程序

6.19

首页ui优化了一下，其他两个页面ui还是丑，估计等产品大大醒了又要骂了
新增了微信小程序云开发中云储存的使用（上传和下载图片

uniapp+vue3+ts+微信小程序云数据库开发记忆日