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

写在开头

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

正文

功能介绍 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`
}) 

接收

微信小程序云数据库

左侧集合相当于表名，用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].tempFilePathbackground.value = filePathwx.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,}) 

写在最后

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

6.19

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