正文

由于微信小程序项目开源后，很多小伙伴来咨询我问题，咳。那什么，问啥的都有，基础水平也都不一致。所以为了节约大家的时间，我觉得有必要写一个教程。咳。博主这么努力还不赶紧码云star一波？

话不多说，开整之前我们需要准备以下几个方面：

1.微信开发者工具。（下载地址）

2.小程序项目文件。（下载地址）

3.微信开发者账号。（注册地址戳我）

PS：如果是纯小白，其实不太建议搞这个，毕竟跨行我觉得其实学不到什么东西，顶多就是需要一个成品。如果需要微信开发者账号申请与小程序项目下载教程，请大力的戳度娘，几乎是无脑注册的，很easy，这里就不再占用篇幅赘述了。

一、导入项目

1.打开微信开发者工具，然后微信扫码登录你的账号，导入项目，输入你的appid（一般你申请后开发者账号后，会自动填充，或者下拉框有，别点那个测试号，就用自己的appid）

图1.0导入项目

如果实在找不到Appid，就在你申请开发者的页面--开发--开发设置中，如图：

图1.1 APPID所在位置

二、云开发的基本设置

1.打开目录结构，可以看到有两个大文件夹。cloudfunctions就是云函数文件夹，miniprogram就是存放小程序页面的文件夹。

图1.2 项目目录

2.打开云开发设置

图1.3 云开发

3.创建新环境，名称随你写就是。支付方式默认即可。配额方案选基础版1（免费的）

图1.4 创建环境

图1.5 配额选择

4.成功开通后，进入到云开发控制台，点击设置，找到你的环境ID，并复制。

图1.6 复制环境ID

5.切换回开发者工具主界面，打开miniprogram文件夹下的app.js文件。

图1.7 覆盖环境ID

将你的环境ID覆盖我原本的ID即可。

6.找到cloudfunctions文件夹，可以看到显示的是当前环境为无，鼠标右键，选择当前环境选项，找到你刚刚创建的环境名称，选中单击即可。然后环境就显示为你刚刚创建的名称了。

图1.8 选择环境

7.找到cloudfunctions文件夹下，将login文件夹右键点上传并部署（云端安装依赖）。第一次打开可能没有"上传并部署"选项而是"创建并部署"，可以先点击“创建并部署”，然后再右键点击login就会出现“上传并部署（云端安装依赖）”。且成功后，你的文件夹会变成绿色。然后getOpenid，node_modules，openapi等这几个文件夹进行同样的操作即可。

图1.9 上传部署云函数，文件夹变绿色

三、云数据库相关处理

1.接着又打开云开发控制台，找到上面的数据库 选项，点击+号，创建新的集合user（也就是表）。怕麻烦的话集合名字最好与我一致。

图2.0 创建user集合

2.填写字段名，没啥好说的，照着我这填就完事了。

图2.1 user集合字段

3.再次新建集合，名字为project。字段如下所示：

图2.2 创建project集合

提一嘴，这个比较麻烦，每次添加一条记录都得重新写一次字段。

project这个集合对应的就是项目列表页面(project-list文件夹)，ids为0的对应的就是项目列表中第一个选项（对应project文件夹），为1的则为第二个（对应project-1文件夹），为2的则为第三个（对应project-2文件夹），为3的则为第四个（对应project-3文件夹），为9的则为第五个。为什么第四个ids是9呢？因为我1到3个选项都是用户点击后会进入到相关的页面。而第四个则是点击后弹出了图片，而并非进入某个页面，所有我把他ids改为了9，在js里写了一个If去判断，仅此而已。不理解的童鞋略过，阅后即焚。

图2.3 项目列表界面

图2.4 project表结构详情

4.由于逻辑都是一样的。你要修改的话，就修改name与pic字段。一个是名字，一个图片所在的路径。只要图片路径填对，进入到项目列表界面，就会正常加载出来了。

5.重点：将user与project数据权限修改为 所有用户可读，仅创建者可读写。（不设置这个的话，除了你之外的人，别人是看不到你的数据的）

图2.5 集合数据权限设置

四、修改项目列表以及详情图片

1.如果你上述步骤进行都没有问题的话，你单击项目列表页面，第一个选项，你会发现项目详情里面的图片显示为空白。我们这一步就是解决这个问题。

2.以本项目举例，单击第一个选项进入页面。

图2.6 项目列表举例

在模拟器左下方可以看到对应的路径，如图：

图2.7 页面路径所在

所以我们就打开projiect文件夹下的projiect.js，如果你要修改对应的文字的话在projiect.wxml修改即可，这里只讲怎么改图片。

3.打开之后，你会发现imageUrlList数组里面的图片路径看不懂，是以cloud开头的字符串，不是正常图片的绝对或者相对路径。这个其实就是将图片上传到了云开发里面的云存储，然后将地址复制过来的。

图2.8 projiect.js图片路径

（1）怎么实现呢，第一步打开云开发控制台，找到 存储 选项。

图2.9 云存储所在

（2）然后点击上传文件，将你对应的图片上传上去，复制对应的FileID到projiect.js，将我原本的覆盖掉就行了，就这么简单。

然后将对应的文字修改，图片修改，就完成了你的个人简历开发了。最后上传发布小程序就可以了。发布小程序步骤这里就不讲了，篇幅太长，有兴趣的可以百度或者私信问我，或者后面我再出一篇教程。

延伸阅读

1. Layui富文本框插件拓展
2. Git使用的常用命令