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

预览
首页 手把手教学,从零到一打造一款专属的情侣小程序
文章图片

消费记录(表单版) 手把手教学,从零到一打造一款专属的情侣小程序
文章图片

睡觉打卡 手把手教学,从零到一打造一款专属的情侣小程序
文章图片

消费记录(详细记录版) 手把手教学,从零到一打造一款专属的情侣小程序
文章图片

辛苦(姨妈)日记录 手把手教学,从零到一打造一款专属的情侣小程序
文章图片

许愿树 手把手教学,从零到一打造一款专属的情侣小程序
文章图片

准备
工具 微信开发者工具
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

    推荐阅读