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

模式潮汐
• 阅读 1835

预览

首页

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

消费记录(表单版)

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

睡觉打卡

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

消费记录(详细记录版)

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

辛苦(姨妈)日记录

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

许愿树

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

准备

工具

微信开发者工具

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

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
梦
5年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Easter79 Easter79
4年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Stella981 Stella981
4年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Easter79 Easter79
4年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
4年前
mysql查询每个学生的各科成绩,以及总分和平均分
今天看一个mysql教程,看到一个例子,感觉里面的解决方案不是很合理。问题如下:有学生表:!在这里插入图片描述(https://oscimg.oschina.net/oscnet/07b001b0c6cb7e0038a9299e768fc00a0d3.png)成绩表:!在这里插入图片描述(https://oscimg.o
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这