《从零搭建可直接使用的档案软件微信小程序实操指南》

实操前置准备

工具与账号获取

1. 下载微信开发者工具：直接访问官方地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，选择对应系统版本（Windows/Mac）安装。

2. 获取小程序测试账号：访问https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/register.html，用个人微信扫码登录，填写项目名称后生成测试用AppID，复制备用。

3. 开通云开发环境：登录微信公众平台（https://mp.weixin.qq.com），进入「开发」→「开发工具」→「云开发」，点击「开通云开发」，完成后记录生成的环境ID（格式如cloud1-xxxx）。

项目初始化与数据库配置

创建小程序项目

打开微信开发者工具，点击「新建小程序项目」，按以下配置填写：

• 项目名称：自定义（如「个人档案小程序」）
• AppID：粘贴测试账号的AppID
• 项目目录：选择本地空文件夹
• 关键：勾选「使用云开发快速启动」，不选中「创建云函数」

创建档案数据库集合

在微信开发者工具中，点击顶部工具栏的「云开发」，打开云开发控制台：

• 左侧点击「数据库」→「添加集合」，命名为archive_files
• 集合创建后，点击「权限设置」，将「所有用户」的读写权限都设置为「可读可写」（此步骤是代码正常运行的核心，必须操作）

核心功能代码实现

以下代码可直接复制到对应文件，注意替换环境ID：

修改全局配置（app.js）

```javascript // app.js App({ onLaunch: function () { wx.cloud.init({ env: '你的云环境ID', // 替换为你自己的环境ID（如cloud1-xxxx） traceUser: true }) } }) ```

首页页面代码（pages/index/index）

1. 页面结构（index.wxml）：

```xml 新增档案 {{item.title}} {{item.content}} 删除 暂无档案，请新增 ```

2. 页面逻辑（index.js）：

```javascript // pages/index/index.js const db = wx.cloud.database() Page({ data: { archiveList: [], archiveTitle: '', archiveContent: '' }, onLoad: function () { this.getArchiveList() }, // 同步输入框内容 handleTitleInput(e) { this.setData({ archiveTitle: e.detail.value }) }, handleContentInput(e) { this.setData({ archiveContent: e.detail.value }) }, // 获取档案列表 getArchiveList() { db.collection('archive_files').get({ success: res => { this.setData({ archiveList: res.data }) }, fail: () => wx.showToast({ title: '加载失败', icon: 'none' }) }) }, // 新增档案 addArchive() { const { archiveTitle, archiveContent } = this.data if (!archiveTitle.trim() || !archiveContent.trim()) { wx.showToast({ title: '请填写完整信息', icon: 'none' }) return } db.collection('archive_files').add({ data: { title: archiveTitle, content: archiveContent, createTime: new Date() }, success: () => { wx.showToast({ title: '新增成功' }) this.setData({ archiveTitle: '', archiveContent: '' }) this.getArchiveList() }, fail: () => wx.showToast({ title: '新增失败', icon: 'none' }) }) }, // 删除档案 deleteArchive(e) { const id = e.currentTarget.dataset.id db.collection('archive_files').doc(id).remove({ success: () => { wx.showToast({ title: '删除成功' }) this.getArchiveList() }, fail: () => wx.showToast({ title: '删除失败', icon: 'none' }) }) } }) ```

3. 页面样式（index.wxss）：

```css / pages/index/index.wxss / .container { padding: 20rpx; box-sizing: border-box; } .add-box { margin-bottom: 40rpx; } .add-box input, .add-box textarea { width: 100%; margin-bottom: 20rpx; border: 1rpx solid e5e5e5; border-radius: 8rpx; padding: 15rpx; font-size: 28rpx; } .add-box textarea { height: 200rpx; } .add-box button { width: 100%; background: 07c160; color: fff; border-radius: 8rpx; } .list-box .archive-item { border-bottom: 1rpx solid f0f0f0; padding: 20rpx 0; } .item-title { font-size: 32rpx; font-weight: bold; margin-bottom: 10rpx; } .item-content { font-size: 28rpx; color: 666; margin-bottom: 10rpx; word-break: break-all; } .empty-tip { text-align: center; color: 999; margin-top: 50rpx; font-size: 28rpx; } ```

测试与发布

1. 预览测试：点击微信开发者工具顶部「预览」，用手机微信扫描弹出的二维码，即可在手机上测试新增、删除、查看档案功能，所有操作实时同步。

2. 发布体验版：功能测试完成后，点击开发者工具顶部「上传」，填写版本号（如「v1.0」）和项目备注，点击确定。上传完成后，登录微信公众平台，进入「开发」→「开发管理」→「版本管理」，在「体验版本」中可生成体验版二维码，分享给他人测试。