Skip to main content

情侣商城微信小程序部署详细教程

准备​

本小程序基于UxxHans Rainbow Cats的项目进行二次开发，优化了UI，突破20条数据获取限制，增加纪念日计时功能，增加记事本功能，允许上传图片。下面将从最基础的地方开始，讲述如何部署这个微信小程序。
话不多说求星星，请给我一个STAR！仓库地址
1

特点​

1.免费。从部署到上线不需要任何费用。除非你的数据库存储很多数据和图片，会付一点钱，但是免费额度已经足够。😁
2.快速。你只需要克隆我的项目，在你的电脑上部署，修改部分参数就可以上线，不到一小时就能使用。
3.功能丰富。突破了20条限制，让你不需要在乎发了多少条都能获取。增加记事本功能和倒计时功能，记录美好瞬间。
4.使用了云开发三大基础能力。不需要自己配置服务器，高效便捷。使用云开发数据库对文档型数据库进行读写。在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理。在云端运行的代码，微信私有协议天然鉴权，开发者只需编写业务逻辑代码。

注册小程序并下载微信开发者工具​

进入微信公众平台,点击“小程序”进入注册。
1654647638272.png
填写一个尚未在公众平台注册过的邮箱，完成如下设置后，点击注册。
image.png
此时，腾讯会给你的这个邮箱发一条验证码，点击链接验证即可。
image.png
填写主体信息，选择“个人”。
image.png
填写管理员信息，进行身份验证（很快！）
image.png
您也可以用已经存在的公众号注册小程序
完成注册后，进入管理界面。 点击设置，拉到最下边，获取AppID（重要）并记录下来。
1654648210458.png
1654648266364.png
在基本设置中完善小程序信息，类别随意选择。

⚠

您不需要进行微信验证，这是花钱的。是商业性App需要的东西。

进入微信开发工具下载界面下载微信开发工具。选择Stable版即可。
不出意外的话，您的电脑应该是64位。

🔔

建议不要安装在C盘。

安装完成后，打开。
image.png
到这一步，你就不用管了，也不用新建，等会再说。

克隆源代码​

到仓库地址，克隆源代码。
1654648878085.png
你可以使用git工具进行克隆，我想会的一定不需要我来讲，那么我就说小白方法。
你只需要在“Code”下拉菜单中，选择Download ZIP，将压缩包下载下来，解压即可。
1654649086792.png

🔔

你可能需要ladder才能访问Github，如果你访问不了，可以给我发邮件：czhorange@foxmail.com或者加我的QQ：605031236,可以答疑解惑哦！

打开项目开通云开发​

点击微信开发者工具，选择导入项目，导入刚刚克隆的文件夹或者解压的文件夹。
image.png
这里的AppID你需要修改成上面让你记录的AppID，默认的这个是我的，你用不了。
1654649515857.png
点击左上角“云开发”进入云开发管理界面。
1654649631524.png
按照提示，新建一个云环境。
记录你的云环境ID。
1654649718210.png
打开"Miniprogram/envlist.js"，将拷贝的云环境ID更换原有的envID。
1654649976383.png
在cloudfunctions文件夹上右键选择环境。
image.png
然后在cloudfunctions文件夹下的文件上右键，上传并部署云函数。（cloudfunctions文件夹内所有文件夹都要上传依赖！）
image.png
可以到云开发控制台查看是否部署成功。
1654650227912.png

数据库部署​

在控制台数据库页，创建三个云开发数据库集合 'MarketList'， 'MissionList' ,'Txts','UserList'. 在UserList集合里面创建两个数据，里面创建两个值：_openid(string类), credit(number类)，credit设置为0 。（openid具体数据稍后再填） 1654650456730.png

⚠ 重要步骤

选择云开发里数据库三个选项中的最后一个 数据权限，选择自定义，然后点击新窗口下面蓝色加亮文字，把所有用户读写权限设置为true。接下来重复此步骤把剩下三个数据集合的权限也设置好。（没有设置会导致你们互相看不到彼此发的任务和商品，也无法赚积分）

1654650566088.png
1654650593726.png
1654650625377.png
注意，一定要把四个集合全部这样设置！
在云开发数据库添加新的文件夹photo：
1654652591306.png

你需要替换的地方​

app.json修改里面的小程序名称：
1654651017397.png
about.wxml里面修改开发者信息，把汉字替换掉就行：
image.png
Account/index.wxml里面修改积分信息的前缀：
1654651261087.jpg
mainpage/index.wxml里面修改欢迎名称：
1654651331218.jpg mainpage/index.js修改在一起的时间：
1654651434765.png
一定要按照原来的格式修改时间。

图片替换​

项目文件夹中的图片需要你替换：
image.png
首先是home/a.jpg需要你换成你自己的名称的图片。

⚠

注意，你替换的图片必须与原图名称一模一样。

然后是miniprogram\images\Mission中的标识你们的图片，可以替换成你想要的图。他会在帖子上显示表明是谁发的。南瓜是女生，橙子是男生。

创建体验版小程序​

在左边的预览器中测试功能是否正常。
1654650785697.png
进入微信公众平台将刚刚上传的小程序版本号改为体验版。
image.png
你不需要上传审核，只要设为体验版即可。
将小程序分享到女朋友手机上。
在两个手机上运行小程序，分别在两个手机上的小程序里新建任务，然后到missionlist数据库集合去找自己和女朋友的_openid变量。
1654652145363.png
你发的那个openid就是你的id号，女朋友发的openid就是她的id号。
把这两个openid拷贝到UserList数据集合里刚刚创建的的_openid变量中 同时也要把他们拷到app.js文件里的kirbyOpenId和deeOpenId的值里。
1654652276301.png
然后再试试看是不是成功了！（右滑任务或商品可以删除或者星标哦）
然后改好了再在右上角上传，这次在这里上传了就好了，一会手机上就会更新了，你不需要审核，体验版足矣。

后记​

如有疑问可以留言哦！如果你觉得有用请在github给我一个star！ 1
给我一个STAR！！！！🤕
仓库地址