微信小程序开发的笔记【二】

时隔一个多月，今天终于有空来整理一下我这段时间浏览过的 参考资料 啦，顺便也在字里行间分享一下手头的“项目”。

P.S.其实认真计较起来，我第一个 项目 应该是转盘抽奖的小程序，那时候也就自学过一点安卓开发（学校里要求的），可我顶多就算是见过这么个开发的“形式”，所以真的做微信小程序倒也不算是太容易，但也说不上是为难我——毕竟我是这个专业的学生，应该算是从0.5开始了，但我也知道闷头学习大概会是我近来的常态，只是空下来就来这儿吐吐槽吧，也分享一下学习的过程。抽奖小程序 做到后来真的有一种不了了之的感觉，我也没来得及继续迭代下去就被拉过去做了 预约功能 的那个“页面”，很简单的一个前端页面吧，不过我却也因此接触到了实习以来最“齐全”的知识，应该说是接触得东西一下子变多了，我好像也终于有了一点在公司里做项目的感觉。

一开始，刚知道这个“任务”的时候我也不懂什么叫“功能需求”，只是一个人闷着头找项目原型看，然后就接触到了let ，我看着觉得比较稀奇，所以特意留心了一下：用let的方式声明的变量，为局部变量，该变量只会在最靠近{ }内的范围有效，出了{}之后，该变量就不能够再用了，否则会报该变量未定义的错误。也就是说，该变量的作用域为所在的代码块内。

做出了最简单的页面之后“添加”了一个智慧功能~就是通过一个标识disabled的布尔值实现填入数据之后才能触发“提交表单”的按钮，具体还是用图片来说清楚吧（至于实现过程一两行代码也说不清楚，不过我可以简单举个例子）如果什么都不输入的话“预约拍照”的按钮就是灰的，只有在输入了 必填项  之后这个按钮的disabled才会改为false。

最初的预约页面

其实我写的这个页面最难实现的部分还是 上传附件 那一块，一方面用到了 本地数据缓存 ，另一方面还要考虑怎么显示到这个页面上并且需要传给后台——如果不是做微信小程序，这个工程量还是挺大的，但幸好微信小程序有这个封装的功能，所以实现起来并不难。

这一步现在看起来的确是没什么，但我前几天还是挺头疼的，故此也看了一些材料：

如何使用微信小程序做出图片上传 http://www.php.cn/xiaochengxu-399460.html （前端+java后台）

https://www.cnblogs.com/freeliver54/p/7728498.html 

https://blog.csdn.net/ulike_MFY/article/details/78257834

微信小程序上传、预览多张图片 https://blog.csdn.net/m0_37852904/article/details/79853745

微信小程序自定义拍照开发 https://blog.csdn.net/u010606780/article/details/80887589

这个过程中也涉及到了写wxss然而我之前做的页面并没有那么多“要求”，所以这个过程中我也相当于是又“复习”了一遍CSS+H5，我知道以后肯定还要补充的，但这两天看到的比较有价值的材料还是可以拿出来分享一下的：

transform属性 http://www.cnblogs.com/minghui007/p/8178423.html

微信小程序----wxss设置样式  https://www.cnblogs.com/yjq1021/p/8310451.html

鉴于先解决前端再处理后台的流程，我在折腾完前端之后还看了一点微信小程序怎么和服务器相连的资料，毕竟后台的逻辑写完了还是要和服务器连起来的嘛~可我之前好像连服务器的概念都理解不到位。

关于小程序开发 前端 后台 最基础的一个印象 http://www.php.cn/xiaochengxu-398998.html

关于小程序开发过程中服务器请求的一些参考资料：

小程序与服务器的连接（java实现，tomcat）https://blog.csdn.net/qq_41500251/article/details/80173985  

服务器上传图片，表单提交 https://blog.csdn.net/qq_35713752/article/details/77970370

既然提到了表单提交，那就再把最近我看到的关于表单提交的材料也列一下吧~

https://www.cnblogs.com/zhouqi666/p/6272802.html （后台是php实现的）

对于表单输入input我在这个过程中也看到了不错的材料：http://tieba.baidu.com/p/4907941981?traceid=

当然，这个表单在输入信息的时候也是需要考虑到校验的，我这次用的是第三方插件Validate.js源代码在github上有很多，我就不在这里分享了，主要还是拉两篇博文吧（天知道为什么会是一样的页面）

https://www.cnblogs.com/cisum/p/9556736.html

http://www.cnblogs.com/cisum/p/9558405.html

鉴于涉及到插件，再来一篇关于引入区别的内容：https://www.jianshu.com/p/edaf43e9384f

顺便提一下es6和js的区别：http://developer.51cto.com/art/201711/557514.htm

摸黑玩了几天，找公司的前辈请教之后他们给我推荐了 云开发 ，我借此又看了一点东西：

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage/api.html

不过事实上我并没有接触到云开发，公众号倒是注册了两个，顺便还看了官网的资源中心，里面有一些开发工具的安装包，这里给个地址：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419319167&token=cab743fb2b504772e2b622c743f25cce7ab180b5&lang=zh_CN

 

下一步，我本来是想写一个分享功能的，结果我被path的单引号还是双引号给缠住了。

后来查了一些资料才知道我貌似是一个连json都不懂的家伙…………

• JSON 格式的数据：属性名和属性值都用双引号""包裹起来；当然，要是属性值是数字可以不用双引号
• 普通对象的数据：属性值用单引号''包裹起来，属性名不用

至于分享功能，小程序里有封装的接口，在此我也就不贻笑大方了~当然，我终于体会到了小程序知识点的零碎！哎，在摸索的过程中顺便看到了几篇有意思的文章，算是在我学习过程中看到的比较不错的东西，分享一下吧：

https://www.jianshu.com/p/6359500b5576

https://blog.csdn.net/xwx617/article/details/79337139

https://www.jianshu.com/p/dd809a0ddd5a

v-bind系列~

https://www.cnblogs.com/liuchuanfeng/p/6742631.html

https://www.jianshu.com/p/98dfa4c6389c

https://www.runoob.com/vue2/vue-events.html

计算机属性computed 和 methods 的区别

https://www.cnblogs.com/rainbow8590/p/7251824.html

我看着还不错的一本书，书上配套资源的网站：http://www.weixinbook.net/

 

最后再分享一篇和专业无关却也挺有意思的文章：“老员工”眼中的实习生——让我凭什么留下你？

http://bbs.tianya.cn/post-395-101160-1.shtml

共勉吧~

（至于这个表单页面的具体代码，等我自己满意了之后再来开一篇 专题 好好记录一下！）