11 11 2020
正文

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

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

1.微信开发者工具。(下载地址)

2.小程序项目文件。(下载地址)

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

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


一、导入项目

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

undefined

图1.0导入项目

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

undefined

图1.1 APPID所在位置


二、云开发的基本设置

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

undefined

图1.2 项目目录

2.打开云开发设置

undefined

图1.3 云开发

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

undefined

图1.4 创建环境

undefined

图1.5 配额选择

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

undefined

图1.6 复制环境ID

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

undefined

图1.7 覆盖环境ID

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

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

undefined

图1.8 选择环境

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

undefined

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

三、云数据库相关处理

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

undefined

图2.0 创建user集合

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

undefined

图2.1 user集合字段

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

undefined

图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去判断,仅此而已。不理解的童鞋略过,阅后即焚。

undefined

图2.3 项目列表界面

undefined

图2.4 project表结构详情

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

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

undefined

图2.5 集合数据权限设置

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

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

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

undefined

图2.6 项目列表举例

模拟器左下方可以看到对应的路径,如图:

undefined

图2.7 页面路径所在

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

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

undefined

图2.8 projiect.js图片路径

(1)怎么实现呢,第一步打开云开发控制台,找到 存储 选项。

undefined

图2.9 云存储所在

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

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

延伸阅读
  1. Layui富文本框插件拓展
  2. .Net常用中间件
发表评论