手把手教学,从零到一打造一款专属的情侣小程序

简介: 很久之前就想做个情侣小程序来记录我们之间的一些事情,偶然翻开一年前自己制作的一个小程序(未完成版),虽然代码下的有点乱,但感觉可以重构一下,在此给大家展示一下,也希望在设计和功能上,大家可以给点意见,后续有空再进行完善。

预览

首页

在这里插入图片描述

消费记录(表单版)

在这里插入图片描述

睡觉打卡

在这里插入图片描述

消费记录(详细记录版)

在这里插入图片描述

辛苦日记录

在这里插入图片描述

许愿树

在这里插入图片描述

准备

工具

微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

文档

微信开放文档

https://developers.weixin.qq.com/miniprogram/dev/framework/

代码地址

https://gitee.com/zheng_yongtao/me-and-my-doodle.git

账号

没有小程序账号的需要先去申请一个账号

官网地址:https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1210542861

开发

1、下载代码

将代码拉取到本地,然后导入微信开发者工具,需要登录并关联自己的云空间。

2、设置账号信息

在这里插入图片描述

因为是自用的,所以也就没有将账号信息存放到数据库中,而是保存为一个用户配置文件,文件位置如上图。userConfig对象中的key对应账号,password则是密码,nickName为在小程序中显示的昵称,eName是英文别名(这里是随便起的),color为代表色,icon是代表图表,wishIcon为许愿树模块中的礼物盒图标,将账号信息配置好即可登录小程序。

3、上传图片并修改路径

图片包地址:https://gitee.com/zheng_yongtao/images-package.git

因为一开始只是为了做一个记账本功能的小程序,所以我在云存储中创建了一个记账本文件夹,如下图:
在这里插入图片描述
在这里插入图片描述

我们可以在这里创建一个文件夹(或者自己重新命名创建一个文件夹,代码中对应的图片路径要改变),下载好图片包后上传到该目录中,然后修改小程序中对应的文件路径即可。图片的公共路径在配置文件我已经进行了抽取配置,这里修改为你云空间的存储路径即可,如下图:

在这里插入图片描述

4、初始化数据库

首次导入需要先初始化数据库,已集成为函数一键初始化,只需点击我的页面中的初始化数据库按钮即可。

在这里插入图片描述

5、上传云函数

在这里插入图片描述

右键选择上传并部署(所有文件)

6、上传代码为体验版

在这里插入图片描述

上传之后代码可以在自己的小程序后台看到上传的版本,目前个人不支持上传为线上版本,所以我们只能使用体验版,设置为体验版的方法如下:
微信小程序管理后台地址:https://mp.weixin.qq.com/wxamp/wacodepage/getcodepage?token=1210542861&lang=zh_CN

在这里插入图片描述
在这里插入图片描述

7、添加体验成员

上传为体验版之后,还应该要将对方设置为体验成员或项目成员,对方才有权限体验小程序,和你一起使用小程序。
在这里插入图片描述
在这里插入图片描述

体验

点击体验版二维码这里,就会弹出一个二维码,扫码后即可打开小程序,然后将其分享给你的女朋友即可一起使用该小程序了。

在这里插入图片描述

一起开发

目前项目已全部开源,小程序样式相对来说还是不够美观,后续还会继续优化并开发完善新旧功能,有兴趣一起维护开发的可以一起。

个人主页:http://120.79.163.94//JYeontuComponents/#/JTableView

Gitee地址:https://gitee.com/zheng_yongtao

目录
相关文章
|
2月前
|
小程序 程序员
程序员的浪漫之——情侣日常小程序
程序员的浪漫之——情侣日常小程序
71 0
|
5月前
|
存储 小程序 数据库
给ta打造一款专属的情侣小程序
给ta打造一款专属的情侣小程序
37 0
|
5月前
|
小程序 程序员
情侣小程序2.0版本已提上日程
情侣小程序2.0版本已提上日程
47 0
情侣小程序2.0版本已提上日程
|
14天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
14天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
14天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
14天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
14天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
1月前
|
小程序 API
点餐小程序实战教程09-订单功能开发
点餐小程序实战教程09-订单功能开发
|
14天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。