微信小程序开发说明

欣然～

1282人浏览 · 2025-03-03 09:40:45

欣然～ · 2025-03-03 09:40:45 发布

按照视频内容一步步实现微信小程序的开发、部署。并不是必须要用Cursor，用VScode调用deep seek同样可以进行编写。

https://www.iesdouyin.com/share/video/7466070549391854857/?region=CN&mid=7466072909417630491&u_code=0&video_share_track_ver=&titleType=title&share_sign=mJBSl0q0l7kY4wCErLDB6nWW82eDIQ.Xa73.86Chg7A-&share_version=7060040&ts=1740965629&from_aid=482431&from_ssr=1

Deepseek 开发全栈小程序的详细流程，从前端到后台再到数据库，实现了一个完整的业务开发，以下是详细步骤：

准备开发工具：需提前下载并安装 HBuilder、Cursor 和微信开发者工具这三款软件，它们在后续的开发过程中各自承担不同的重要角色。
搭建前端小程序基础框架：打开微信开发者工具，点击新建项目。在项目名称处填写 “前端小程序”，选择默认模板，接着启用 uniCloud 并选中阿里云，vivo 版本选择 2，完成设置后点击创建，即可搭建好前端小程序的基础框架。
开发前端小程序 UI 界面
- 用 Cursor 打开刚刚创建的前端小程序代码。点击 Cursor 右上角的设置按钮，在模型选择中勾选 Deepseek v3 模型，并取消其他模型的勾选。
- 通过快捷键 Command + I 或 Ctrl + I 呼出输入框，输入提示词，如 “这是基于 uni app 加 vivo 二框架的小程序，请帮我在主页创建一个用户意见反馈的表单”，并在输入完提示词后按空格，再输入 “@codebase”，这一步操作能让 Deepseek 读取整个代码文件，随后点击回车发送提示词。代码编辑完成后，点击确认修改。
- 若对生成的界面不满意，可再次在 Cursor 中输入提示词，如 “美化一下UI页面的设计。添加圆角和多种色彩渐变效果，要求简约自然，颜色协调统一”，修改代码后查看在微信开发者工具中的展示效果。
搭建云服务器：在 HBuilder 中，右键单击 uniCloud 文件夹，选择 “关联云服务空间或项目”。点击新建，在新建云服务空间时输入名称（如 test demo），选择阿里云，购买免费版本。云服务空间开通后，回到原界面点击刷新，当看到服务空间状态显示正常时，表明云服务器搭建完成，然后在 HBuilder 中点击刷新，选中创建好的云服务器进行关联，实现前端小程序与云服务器的绑定。
创建云函数和云数据库：在 Cursor 中输入提示词，如 “在 cloudfunctions 这个文件夹当中创建一个 unicloud 云函数并在 database 这个文件夹当中创建一个 feedback.schema.json的文件,向 unicloud 云数据库中传送用户的姓名联系方式和反馈内容请在已有的文件夹当中直接创建不需要重复创建 cloud functions 的文件夹”。代码修改好并确认后，回到 HBuilder。此时可以看到 HBuilder 中自动创建了云函数和数据库文件，右键单击云函数文件夹，选择 “上传部署”；右键单击数据库文件，选择 “上传到 dbskima” 并确认上传。完成上传后，右键单击 uniCloud 文件夹，选择打开 uniCloud 的 web 控制台，在云数据库中可以查看创建的用户表单数据库文件 feedback 及其表结构。
开发后台管理员面板
- 在 HBuilder 中，右键单击空白处，选择新建项目。项目名称填写 “后台管理员面板”，模板选择 uni admin，选中阿里云，版本选择 vivo 2 后点击创建。选择云服务空间时，选择与前端小程序相同的空间（如 test demo），后续按提示完成部署。
- 展开后台项目文件，右键单击 uniCloud 文件夹，选择 “关联云服务空间”，选择 “绑定其他项目的服务空间” 并选中前端小程序进行关联。接着，双击打开 uniCloud 文件夹，单击 cloud functions 文件夹，点击下载所有云函数并确认覆盖；对数据库文件执行相同操作，右键单击数据库文件，选择下载所有 dbs 给码，选中全部应用并点击替换。
- 右键单击 feedback.skimajason 数据库表结构文件，选择 “skima to code”，选择 unicloud admin 页面下的 pages init.json 后点击确定注册合并。完成后，展开 pages 文件夹，会出现 feedback 文件夹。选择 list.view，点击上方的运行并选择 chrome 浏览器。首次登录时需注册管理员账号，登录成功后进行菜单管理，添加一级菜单，填写标识、显示名称、选择图标，并将 feedback 列表对应的路径（在 HBuilder 的 pages.json 中获取）添加到页面 url 中，完成后提交并刷新网站。
测试与效果展示：在前端小程序输入相关内容（如姓名、反馈内容）并提交反馈，提交成功后，在后台管理员面板点击刷新，可看到前端提交的反馈信息；同时在云数据库中也能查看到相应存储的数据，以此确认小程序全栈开发成功。

————————

1.在后续上传的过程中，因为没有添加appid的字段，需要进行添加。手动添加 appid 字段

用文本编辑器（像 Visual Studio Code、Sublime Text 这类）打开 project.config.json 文件【文件路径：Opinion_Collection\unpackage\dist\dev\mp-weixin】，在合适的位置添加 appid 字段，并且把值设为你小程序的实际 AppID。示例如下：

json

{
  "description": "项目配置文件。",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "urlCheck": false,
    "es6": false,
    "postcss": false,
    "minified": false,
    "newFeature": true,
    "bigPackageSizeSupport": true,
    "condition": false,
    "ignoreUploadUnusedFiles": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "compileType": "miniprogram",
  "libVersion": "3.7.9",
  "projectname": "Opinion_Collection",
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  },
  "appid": "your_appid"
}

记得把 "your_appid" 替换成你真实的小程序 AppID，这个 AppID 可以在微信公众平台的小程序管理后台，“开发管理” - “开发设置” 页面找到。

2.小程序上传时提示按需注入

按需注入和用时注入在小程序启动的过程中，除了代码包下载以外，代码注入也是一个主要的耗时环节。注入代码量的大小与内存占用与注入耗时正相关。利用「按需注入」和「用时注入」的特性，可以优化代码注入环节的耗时和内存占用。

将以下内容添加到小程序项目的 app.json 文件中。

{
  "lazyCodeLoading": "requiredComponents"
}

如：

{
  "pages": [
    "pages/index/index"
  ],
  "subPackages": [],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "usingComponents": {},
  "lazyCodeLoading": "requiredComponents"
}