微信小程序的简单开发流程，我用一个自制已上线的
发表时间：2023-09-14 14:58:59
文章来源：炫佑科技
浏览次数：215
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
对于微信小程序的简单开发流程，我以自制的微信小程序皮皮虎去水印为例，做更详细的开发流程分析。
镜框选择
选择：
1.为了开发效率，我选择框架，使用vue3.2语法。 与小程序自带的框架相比，该框架开发效率更高，编译出的代码也更好。
2、后端我选择了云开发，并且使用了语法，所以前端和后端我都可以自己搞定。
准备
注册小程序：
在微信公众平台注册小程序账号。 如果您已经有帐户，则可以跳过注册过程。
登录：
登录后进入菜单“设置”-“开发设置”中的开发设置获取AppID备份，并在其中配置服务器域名、消息推送等。
下载微信小程序开发工具：
小程序*终只能在其专门的开发工具上进行运行、发布等操作。
下载X开发工具：
选择好框架后，就可以使用X进行开发，方便快捷，大大提高了开发效率，值得推荐。 也可以使用脚手架，但我个人不推荐。
小程序运行配置：
小程序开发开发顶部开发”。
开发工作
创建项目：
转到顶部菜单左侧的“文件”-“新建”-“项目”-“uni-app 项目”。
配置appid：
打开项目根目录下的“.json”-“微信小程序配置”，配置appid。 这是为了后面直接在微信开发工具中运行做准备。 否则，即使运行某些功能也将无法使用。 上线前必须配置appid。
关联云服务空间：
为了关联云服务空间，一般新项目需要新的云服务空间。 对于小型项目，推荐阿里云。
云开发使用语言，数据库也是JSON格式的文档数据库。 对前端开发非常友好，简单易懂。
具体细节和开发文档请参考官方文档。
创建相关文件：
我自己的项目创建完毕（包括界面管理api/公共样式css/工具类utils等）、（公共组件，也是公共组件）、hooks（vue3派生的公共函数文件夹，可以使用）、（分包页面）、store（vuex管理全局变量、全局方法等）、.js（配置文件、一些全局配置）。
其他文件夹基本上是创建项目时附带的文件夹。 我提到的这些可以根据您自己的需要来创建。
配置页面：
在pages页面下创建页面，可以一键创建页面，也可以自己创建文件夹和对应文件（如：pages/index/index）。 *后，您需要在pages.json 中注册页面。 一键创建的页面会自动注册到pages.json中。
更多相关的开发配置需要在官方文档中学习，这里无法解释。
配置和：
tab页需要手动配置相关图标和页面。 具体可以参考我的小程序，也可以去官方文档查看相关配置。
开发页面：
创建的页面中使用vue开发页面。 具体的开发我这里就不多说了。 这就涉及到前端技术了。 不用解释你就能明白。 不懂的话还是要学啊~
前端页面：
我简单说一下我的小程序涉及到的页面——首页、红包、我的、分析页面、分析记录、教程页面、FAQ、设置等。
差不多10页，开发周期一周左右，以后会不断更新迭代功能。
后台数据：
下载通道2采用云功能上传后返回下载，避免下载地址未配置下载域名时下载失败；
使用云函数调用解析接口，调用第三方接口。 习惯上都是写在我的后台进行管理；
将分析数据记录至数据库，方便了解实时情况；
有一个计划任务，定期删除云存储的内容。 毕竟空间有限，所以直接删除使用过的文件；
获取公告内容并动态化，方便后续紧急情况发布公告；
配置下载域名。 为了方便后期维护，我直接做了接口配置，这样添加新接口时可以直接从数据库获取，避免修改源码。
8.运行到微信开发工具：
x开发工具上方的“运行”——“运行到小程序模拟器”——“微信开发工具”。 这里注意，首次运行需要打开微信开发工具的“设置”-“安全”-“服务端口”，这样运行小程序时就可以直接打开，并且在运行时会自动刷新您更改代码并保存它。 到*新状态。
页面的开发和调试就是这个过程。 路还很长很长，慢慢开发，记得少掉头发！ ！ ！
配置域名：
开发完成后微信小程序的简单开发流程，我用一个自制已上线的，下一步就是配置一些相关的域名，保证试用期间能够正常使用。 试用版与在线版类似微信小程序简单开发，因此可以使用试用版进行*终测试。
网上发布：
进入顶部“开发”-“小程序-开发”这是正式上线文档。 在微信开发工具中点击“上传”即可上传到小程序后台，在版本管理中可以直接看到。 提交前，您可以扫描二维码进行测试，然后决定是否提交。 提交审核通过后，即可直接上线。
效果图
