微信小程序档案系统从零开发实操指南 全步骤可直接复制落地

一、前置准备（10分钟完成）

1. 账号准备

打开微信公众平台https://mp.weixin.qq.com/，注册小程序账号，类目选择「工具-信息查询」，个人开发者可申请测试号快速开发，企业开发者需完成备案后正式使用。

2. 开发工具安装

直接下载微信开发者工具稳定版https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，安装完成后用微信扫码登录。

3. 项目初始化

打开开发者工具，选择「小程序」项目类型，填写项目名称、本地目录，AppID填写自己申请的小程序AppID，测试可选择「测试号」，模板选择「不使用云服务」的基础JS模板，点击确定完成初始化。

二、核心功能模块开发

1. 档案列表页开发

首先修改pages/index/index.wxml代码，实现列表渲染：

```xml 上传新档案 {{item.name}} {{item.uploadTime}} 查看 ```

修改pages/index/index.js的data部分，加入模拟数据：

```js Page({ data: { archiveList: [ {id:1, name:"员工档案2024.pdf", uploadTime:"2024-05-20 14:30"}, {id:2, name:"项目验收文档.docx", uploadTime:"2024-05-19 10:15"} ] }, goUpload() { wx.navigateTo({url: '/pages/upload/upload'}) }, viewArchive(e) { const id = e.currentTarget.dataset.id wx.downloadFile({ url: '你的档案文件存储地址', success: res => { wx.openDocument({filePath: res.tempFilePath}) } }) } }) ```

注意：wx:key必须绑定唯一值如档案id，否则会触发列表渲染警告，影响性能

2. 档案上传页开发

新建pages/upload页面，修改upload.wxml：

```xml 选择档案文件 已选择：{{selectedFile.name}} 确认上传 上传进度：{{uploadProgress}}% ```

修改upload.js代码：

```js Page({ data: { selectedFile: null, uploadProgress: 0 }, chooseFile() { wx.chooseMessageFile({ count: 1, type: 'file', extension: ['pdf','doc','docx','xls','xlsx'], success: res => { this.setData({selectedFile: res.tempFiles[0]}) } }) }, uploadFile() { const file = this.data.selectedFile wx.uploadFile({ url: '你的后端上传接口地址', // 用云开发的话替换为云存储上传接口 filePath: file.tempFilePath, name: 'file', formData: { fileName: file.name }, onUploadProgress: res => { const progress = Math.round((res.loaded 100) / res.totalBytesExpectedToSend) this.setData({uploadProgress: progress}) }, success: res => { wx.showToast({title: '上传成功'}) setTimeout(() => wx.navigateBack(), 1500) } }) } }) ```

重点：正式发布前，必须在小程序后台「开发管理-开发设置-服务器域名」中添加上传、请求、下载域名，否则真机无法正常使用

3. 权限校验模块

在app.js的onLaunch生命周期中加入登录逻辑，获取用户身份标识：

```js App({ onLaunch() { wx.login({ success: res => { // 把code传给后端换openid和token wx.request({ url: '你的后端登录接口地址', method: 'POST', data: {code: res.code}, success: res => { wx.setStorageSync('token', res.data.token) } }) } }) }, // 封装统一请求方法，自动带token request(options) { return new Promise((resolve, reject) => { wx.request({ ...options, header: { 'Authorization': wx.getStorageSync('token') }, success: res => { if(res.data.code === 401) { wx.showToast({title: '请重新登录', icon: 'error'}) // 跳转登录页逻辑 } resolve(res.data) }, fail: reject }) }) } }) ```

三、零基础后端替代方案（云开发）

如果没有后端开发能力，直接使用微信云开发，无需自己搭建服务器：

• 点击开发者工具右上角「云开发」按钮，按照提示开通，选择按量付费（个人测试每月免费额度足够使用）
• 新建cloudfunctions文件夹，在project.config.json中配置云函数根目录："cloudfunctionRoot": "cloudfunctions/"
• 新建云函数getArchive，代码如下：

```js // 云函数getArchive入口文件 const cloud = require('wx-server-sdk') cloud.init({env: cloud.DYNAMIC_CURRENT_ENV}) const db = cloud.database() exports.main = async (event, context) => { const {OPENID} = cloud.getWXContext() // 只返回当前用户上传的档案 const res = await db.collection('archives').where({openid: OPENID}).get() return res.data } ```

右键点击云函数文件夹，选择「上传并部署：云端安装依赖」，前端调用直接用wx.cloud.callFunction即可获取列表，上传文件直接调用wx.cloud.uploadFile上传到云存储，无需配置域名。

四、测试与发布

1. 测试

首先在模拟器测试所有功能，然后点击开发者工具右上角「预览」，扫码在真机测试，测试时开启右上角三个点里的「开发调试」模式，跳过域名校验，正式发布前必须关闭调试模式，确认所有域名已配置完成。

2. 发布

点击开发者工具右上角「上传」，填写版本号和更新说明，登录微信公众平台，进入「版本管理」，找到刚上传的版本，点击「提交审核」，审核通过后点击「发布」即可正式上线。

五、常见问题排查

• 上传文件失败：检查文件大小是否超过10M，超过的话需要用分片上传，调用wx.uploadFile时传入sliceId参数分段上传
• 权限校验失效：检查请求header中是否携带了正确的token，云开发场景直接通过云函数上下文的OPENID判断身份，无需手动传token
• 列表加载慢：档案数据超过20条时必须做分页，在页面的onReachBottom生命周期中加载下一页数据，每次拉取10条即可