正文
由于微信小程序项目开源后,很多小伙伴来咨询我问题,咳。那什么,问啥的都有,基础水平也都不一致。所以为了节约大家的时间,我觉得有必要写一个教程。咳。博主这么努力还不赶紧码云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,将我原本的覆盖掉就行了,就这么简单。
然后将对应的文字修改,图片修改,就完成了你的个人简历开发了。最后上传发布小程序就可以了。发布小程序步骤这里就不讲了,篇幅太长,有兴趣的可以百度或者私信问我,或者后面我再出一篇教程。
非特殊说明,本文版权归 Guo_Blogs 所有,转载请注明出处.
本文标题: 个人简历微信小程序修改教程
本文网址: https://guoqingyun.top/Article/Detail?DPOR369E0zc=516C1E7D43F085B0