2020暑期腾讯小程序开发训练营结课心得

前传

我之前简单学习过js、html、css，数据库也学过一些所以对于微信小程序开发来说应该算有一点基础，我对微信小程序本身也有点兴趣，因为觉得做出来会很好玩。这种兴趣也许来源于以前做算法的时候总是对着一个黑框框，有时候会想什么时候才能做一个好看的用户界面出来，我还觉得做网页是很nb也比较复杂的一件事情，也是一直想尝试。

初阶

这个阶段的内容首先是学会使用小程序开发工具，这个开发工具使用体验还是蛮好。大概布局就是一个微信小程序模拟器+vscode然后集成了很多开发时候需要用的比如说云开发，里面就有数据库和云函数之类的。不过我使用过程中发现自动补全稍有些瑕疵，比如说输入style=""这种，前面的style有补全，引号里的内容就没有补全了，所以这劝我多写wxss，因为那里有补全
然后是了解一下小程序的架构，和基础知识。架构比如说，每一个页面都有4个文件，分别是js,wxml,wxss,json文件，wxml和wxss基本上就是html和css改个名字，不过wxml和html差别还是比较大（至少从标签名字上来说感觉是这样的），js文件主要是放小程序的数据和一些函数的，这些函数有的是在小程序生命周期（比如说第一次展示，被挂到后台，被拿到前台这种时候）被自动调用，有的是wxml文件中的一些组件被点击，或者其他操作的时候，会被调用。js文件也就差不多等于小程序的后台。我本身对于网页开发也不是非常在行，所以也不是很分得清楚前端后端，靠感觉。
这一阶段的作业也不难，目标是做一个静态展示的相册，大概就需要学习以下几点：

• flex布局，这个因为有WEUI作为模板，还是挺容易的，而且在教程里给了一个很好看的排版方式
  
  用这个排版基本可以解决不知道怎么做一个比较现代化的设计的问题，而且布局也并不复杂，简直是新手福利。
• 基本的wxml标签和属性，比如说image，view，navigator啥的，其实刚学的时候，谁看到那么多属性都会头大，但是自己逐渐实践下来，一是对整体的认识更深刻了，二是用得比较多的也熟悉了，就比如刚开始的时候看到image的mode有那么多，好复杂，但是现在回过头看，用的比较多的也只有widthFix和aspectFill这两个，也不用每次要写这个mode属性的时候就去翻一次文档（但是最开始的时候不得不说的确是每动一下键盘就要去翻一下文档）。跳转的话目前还是使用navigator，因为这个阶段基本上不会动js文件，就是慢慢画画的感觉。

总的来说感觉这个阶段还是比较轻松的，基本上就是像积木一样，反正都是静态嘛，慢慢堆，哪里不好看就拆了重来，主要是熟悉环境。我觉得学习的时候，还是真的要去动键盘，不能光看看教程，那样到时候自己要用的时候全忘干净了，只能再回去把教程翻一遍，学的时候看起来很快，但是后面会花更多的时间弥补。

下面是第一阶段的成果截图：
挺粗糙的，界面不咋好看，相册内的图片展示因为flex还不熟悉，只能这样子一行一张的展示

中阶

中阶就要涉及到js文件了，js文件的作用还是很大的，可能因为我的wxml并没有用到很多复杂的架构，所以js文件的编写时间和长度远远超过wxml文件。主要涉及以下内容：

• 数据绑定：从静态到动态最重要的一个转变就是数据绑定，就好像最开始我们都学打印HelloWorld，后来就会变成打印字符串变量，如果只能打印固定的字符串，那么可想而知功能会很差。每个Page的数据都放在对应js文件的data里，整个小程序公用的数据放在app.js的globalData里，然后要学习如何修改数据，那当然就是this.setData函数
• 列表渲染：之前展示一张图片就是一个image，十张图片就是十个image，现在不管多少图片，只要往data上把链接一写，wxml里面一个wx:for语句，就能全部展示出来，所以后来wxml的代码反而少了。
• 事件绑定：教你如何设置各种事件对应触发函数，比如说点击按钮，或者输入框输入，点击按钮就设置bindtap属性，设为一个函数名，然后在js文件里面写好这个函数，就可以调用了，并且调用的时候还会传入一些数据，比如说是谁触发了这个事件，谁接受了这个事件，如果有设置data-*属性的话，还会携带一些数据，这些都是在编写函数的时候可能会用到的数据，都提供好了。
• 上传文件、数据库操作：既然要做到动态修改内容，那肯定就要用云端存储，然后数据库肯定会用到，来存放用户相关信息，主要就要学习上传文件，比如说wx.uploadFile，然后数据库的相关查询、修改函数。然后也要自己设计一下数据库的格式，但是也不复杂，按照教程里的来基本上可以走通。这里其实是整个相册最核心的点，也就是最基础的结构，在完成中阶任务的时候，我本来想在初阶任务上改一下，后来发现基本是要整个推翻重写，在数据库和云存储弄好之后，就可以拼拼凑凑其他的功能了。顺便，我之前把数据存在云开发的那个存储里（好像是小程序自带的存储），后来发现要用腾讯云的图片处理的话，必须要存在腾讯云的COS对象存储里面才可以，所以又捣鼓了半天授权和各种验证，才把数据又存到COS上去，这才能够使用图片处理。
• 云开发相关，包括云函数和数据库之类的，云函数我还不是特别懂他的优势在哪里，只是最开始不会在本地引入包，所以都在云函数写的，然后有的教程的数据库代码必须要在云函数里写，本地写就报错，所以用了一些云函数，调用云函数也很方便，就一个callFcuntion然后写一下name和data就行了，和调用本地的函数并没有太大的差别（这个调用形式能写回调函数也许算一个区别）
• 异步和同步，这个我感觉挺难的，可能以前全部写的都是按顺序执行的代码，这下一下子多线程跑起来，脑子就会一片浆糊，异步大概就是说代码不一定会按照顺序执行，比如说有一句代码是网络请求，要等网络，下一句代码就等不及，直接运行着走了，一般来说是会提升运行速度，但是也会导致不少问题，比如说如果下一句代码要用到这些请求的结果，但是这些结果都还没拿到（像极了流水线cpu的冲突之类的），那怎么解决呢？我比较熟悉的就只会在云函数上加await，然后如果下一句代码要用到结果，就挪到上一句的success函数里面（虽然可能会套很多层但是也没有办法），能解决一部分问题，但是获取用户信息的时候这两个方法都不奏效，那就要用到一个回调标志，这个我也是照着网上的代码写的，具体原理也不是很懂，能用就行了（雾）。
• 小程序生命周期，简单来说就是理解js文件的一堆初始函数什么时候被调用，比如说onload就是刚到这个页面的时候会调用，onshow是只要这个页面展示了就会调用（如果想实现返回并且刷新页面，就可以在onshow里调用onload函数）。我在写onload函数的时候就发现，因为可以通过跳转路径传参，onload会接收到参数，这时我们不仅要考虑有参数的情况，也要考虑没有参数的情况，这样一是避免运行错误，二是在调试该页面的时候，一般是直接设置该页面为首页，不这么处理可能会出错，三是如果在onshow里面调用了onload，那么这时没有参数，就会发生意想不到的错误。
• 用户信息获取，就比如如何请求用户权限，如何查看用户已经授权了哪些权限，这块往往容易被忽略，我就是忽略了。这导致我把我的小程序给别人体验的时候，我发现很多我自己测试没有的bug，后来调试一番才发现是没有请求权限，然后用到用户信息的操作都报错了。
• 引用nodejs的其他包，这算js基础内容，不过我不是很熟悉，比较简单但是也不可获取的一个内容，不然完全没法引入其他包。同时也要注意，有的包云函数上不支持，只能在本地用，比如说sharp（之前捣鼓了好久报错提示，后来想起来已经有同学问过这个问题了，血亏）

这个部分的内容较上一个部分更多，同时调试难度也更大，老师也给我们传授了一些调试技巧，比如说调试器里的console。wxml，appdata的用处，初阶基本上没有用到调试（因为不咋会），或者只用来看看console.log的输出内容。这部分的成果和最终成果差别不大，就不放了。

高阶

这部分主要涉及web SDK和网页的一些内容，因为我是打算做小程序，没有打算做网页（因为感觉网页的会比较难），所以也没有过多的接触和实践，所以就略过了。

最终

最终的小程序在中阶内容上做了一点修改，润色，还是有些不足，因为时间稍微紧了一点。比如说

• 删除，我并没有做，照片删除和相册删除都没有做。不知道那种，点了编辑按钮就可以选中好多图片那种样式怎么做，同样的，我也不知道如何在预览的时候，让下面显示出编辑框（手机上的相册都有这个功能），但是我的预览都用的是preview函数，那我肯定改不了了，只能强行用按钮切换模式，然后在不同模式对点击图片做出不同处理
• 美颜，说实话腾讯云那个图片处理真的花了挺多时间，单看文档比看教程麻烦多了，还经常出错，之前搭数据库和云存储的时候都是挺顺了，到这里就盯了一天的报错信息，然后挺不容易终于把水印弄上去了。美颜虽然也是腾讯云有工具不过就没来得及做了。编辑也只做了加水印
• 没法在相册里上传视频，这是因为最开始我不太清楚用wx:for的时候应该用什么组件才能既展示视频又展示图片，想来用hidden好像可以实现，但是预览又怎么同时支持图片和视频？preview只能用于照片，就挺迷惑的，于是只针对图片实现了。

本次训练营时间虽然不长，但是还是有一些感触，比如说以前以为组件的位置都是靠什么center之类的决定的，后来在看别人的小程序的时候才发现别人也会通过计算来设置图片的位置，然后自己也试着去这样子做，发现虽然算的时候比较麻烦，但是布局很精准（也更有技术含量），不过我担心可能维护的时候不太好维护，但是我已经管不了这么多了（雾）。然后自己实现了一个小程序，别人扫码也能用，挺自豪的，虽然其实很简单一个小程序，肯定比不上其他大佬开发的，但是毕竟是一个新手作品，有了基础，以后再精进就比较快了。
同时也是挺惊叹于小程序这样一个概念的，因为如果不是小程序出现，要么我要独自开发一个app，要么要搭一个网站，都会涉及很多问题，比如说买服务器，在服务器上部署，买数据库之类的，对于我这种比较小白的人来说，这真的是太痛苦了，我就想做一个小小的相册入门，我希望的就是尽量省去不必要的麻烦，专心在开发上。小程序就完成了这样一个任务，让开发非常的轻松，什么都送到你面前来，需要就直接用，有一种用python的感觉，很多资源也有免费额度，入门的话根本不用花钱，只有当你有了用户，有了流量之后才花钱买更多的资源，总结一个字就是，爽。
不过也不能太沉迷，否则以后离开微信，自己就啥都不是了，自己开发app，自己搭网站这些内容，迟早还是要接触的，但是小程序作为中间一个跳板，既不是很难，又有趣+成就感，我现在终于能理解为什么那么多时候会用到小程序了，就是方便，简单。和python成为大部分人的入门语言一样。最后贴上我的成果截图：

（黑色水印有点不明显），完结撒花！