第十二，十三，十四周周总结

微信小程序-新手篇（十四周的重点）
    
虽然放假了 但是我依然还是会写小结，但是有的地方写的还是个人想法..所以就不写出来啦，虽然没人看，但是感觉不太好，所以三周汇总在一块发

       上一周看了看Java的教程视频，因为本来是说要做Android，但是后来..可能是我们菜鸟的拖累把，改做微信小程序，所以这周只理解了一下对象啊构造方法类什么的，就开始看微信小程序的教学视频了，早上一直窝在床上，下午看剧，然后聊天，晚上就学习一下…晚上还偶尔聊天

      一开始想着，啥都不会，就不敢动手来着，Java也是这样，仔细看了视频才开始装jdk,然后Android的sdk也不敢装.. 然后eclipse也不太会用，一开始有好多问题来着，微信开发者工具也不太会用，唉，没办法，谁叫我是计算机盲呢，出bug的时候问那个学长，为啥会在这样，他给我APPID 然后后来发现不能用让我们自己去注册..问我会不会注册的时候..我自嘲的说..计算机盲就是靠百度慢慢的一步步走来的。真是心酸啊，心酸的历程，感觉自己挺不容易的..(默默夸自己一下
哈哈) 但是学了学，慢慢的迈出第一步，凡事都有第一步嘛，那么就会有第二步，第三步。Android是完全没有管，没看，Java只会一点点基础的，每次报错，都自己慢慢摸索慢慢看到底是啥问题..不会用就慢慢用，然而后来也没看下去了，主要是想理解一下那些概念，看到那个教程上讲的还可以，然后一些概念在学js的时候就没太懂，所以就想学一下，然而没进行完，就开始了小程序的学习，就跟之前不太一样了，想着等视频看完了再跟着官方文档再学一遍，所以一开始只是简单的看了一下几种文件格式的简介。这几天，看了前四章，前四章主要都是前端的东西，学起来蛮轻松的，跟之前学的Web前端很多东西都共通，但是因为这是一个全新的，教程不多的，没接触过的东西，所以过程中还是遇到了挺多问题的，也没啥人教，在此总结一下。

1.视频讲到了弹性盒子模型，之前写前端没有用过这个，说是CSS3中的内容，但是当时在学CSS3的时候好像没看到display:flex, 然后跟着视频敲了之后，觉得弹性盒子模型超级好用的，Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float，clear，vertical-align将会没有效果，弹性盒子默认是有两条轴的，设置了display：flex的容器（也就是父元素）的属性有：flex-direction、flex-wrap，justify-content，flex-flow，align-items，align-content；其中：

  flex-direction决定了主轴的方向，其值有：row（默认值，自左向右）/row-reverse（自右向左）/column（主轴为垂直的，自上而下）/column-reverse（自下而上）。
  flex-wrap定义一排容不下的时候是否换行，默认为nowrap不换行（一行容不下时，各条目的宽度会按比例缩小）。wrap为正常换行。wrap-reverse是换行时第一行跑到了下面，第二行跑到了上面（暂时还没想好如何描述更清楚）flex-flow是flex-direction和flex-wrap的合并写法。默认为row nowrap。
  justify-content定义了条目在主轴上的排列方式：有左对齐flex-start（默认值），右对齐flex-end，居中对齐center，两端对齐space-between，等分space-around即每个条目两端的空隙相等。
  align-item定义了条目在纵轴上的排列方式：有顶部对齐flex-start，底部对齐flex-end，居中对齐center，strecth（默认值，如果条目不设置具体数值的高度，则高度会沾满整个父元素的高度），baseline，以条目里的第一行文字的基线为准。
  align-content定义了多跟轴线时，条目的在纵轴的对齐方式，如果只有一根主轴线则该属性不起作用。值和justify-content的值是一样的。
我只用过flex-direction，当看到一个布局的时候，先看它是应该垂直布局还是水平布局，一般大体上是垂直的，然后这个时候就可以用这个属性，规定主轴的方向，弹性盒子和普通的盒子模型一样，可以层层嵌套，所以如果有水平的，比如图片和文字，文字和文字（text和p标签好像都是块状元素）就可以这样布局，【后来发现 text是行内元素来着应该】 蛮整齐的，所以觉得很好用，后期可以再多自己写写感受一下，目前没啥大感觉。

2.有一个bug卡了我半个小时.. 真的一个晚上时间全白费了，就报错pages/post/post.json文件巴拉巴拉，然后之前还出现过app.json文件解析出问题，有几个地方写的有问题会各种报错：

Ÿ   大小写是最经典的错误了，如果命名的时候全部统一用小写，那就不会有这种问题了，但是还是要理解这些东西代表了啥，

{
"pages": [
"pages/posts/posts",
"pages/welcome/welcome"

],
"window": {
"navigationBarBackgroundColor": "#b3d4db"
}
}

最前面的pages是固定的，然后后面的pages是你根目录的那个文件名，后面的pages下的文件名，我不小心把目录命名成了大写，然后一开始啥都不懂，就大小写的试这个地方，然后报错，然后逗号也会引起报错，但是这个地方报错会比较明显，这个对符号蛮敏感的，就标签一定得闭合，之前火狐能容忍我这个问题，但是它可能跟我没啥感情，就一定会提示我有错，所以找半天，才能看到问题在哪里..有点麻烦 所以 切忌，符号一定要缩进对齐，然后敲的时候就敲一对，不然代码多了，找错的时候简直头晕脑胀。
Ÿ   奥，那个文件解析错误还没说，那个报错的时候我还以为是app.json里写的不对，想了半天，改了半天，结果后来，发现是post.json有问题，简直傻死了，人家都说的那么明显是那个文件有问题..我都没意识到..不过就算意识到了，我也不会知道简单的加个花括号{}就好了，大概是因为那个文件是空的，所以以为有问题来着，但是我当时的解决方案是，删掉那个文件夹，然后再建，建完之后不要一个个建文件，直接建一个Page，我猜测，一个个建的时候是完全空的，需要自己写的文件，但是建Page是会生成一整套的，感觉好像是系统自动生成的，然后我后来才意识到，那个json文件里就是有一个花括号的。一开始没意识到系统可以生成那些文件，因为在我没有新建那些文件的时候，我在app.json里写了post，R然后Ctrl+S，系统就生成了对应的一套文件，然后页面也有文字显示了，但是提示我保存不了…忘记为啥保存不了了。不用质疑，不知道为啥自己各种错误。
Ÿ   不知道为啥，我后来设的border都没有效果，就很奇怪，感觉是有bug，然后有时候又好了
Ÿ   <text>标签的那个margin很奇怪啊，我给它套一个border，就是为了看一下到底有没有外边距发现如果字换行了，只有第一行才有那个margin-left的效果， 【这个时候出现了一个新的问题..之前不知道为啥我的那个模拟器上的字 只要是设置的rpx的就突然变小了..但是我加了border之后又放大了..这是什么鬼啊，而且只有border是px才会大，如果是rpx就不会】后来想到了之前第三次任务的时候，应该是那个时候，写的文本部分不整齐，我靠删几个字让它整齐，然后后来发现应该设一个display：block，就OK了。
Ÿ  我遇到了一个这样的问题“Failed to load local image resource/pages/posts/NaNthe serverresponded with a status of 404 (HTTP/1.1 404 Not Found)       对于我来说..有点棘手，这个是我在进行数据绑定的时候出现的问题，这是一种单向的数据绑定，这个是在讲 我们一般把文字啊之类的放在前端里吗，但是实际上不应该这样做，就这个地方是在页面初始化的那个函数里写一些东西  就可以在页面初始化刷新的时候向服务器请求数据，但是因为学习阶段没有这个环节，所以就假设
模拟 我们获取到了这样一些数据，然后这些东西是通过 把date之类的变成  data里的属性 然后由data来实现传递到wxml里，用双花括号就可以。    我一开始想到之前看到有人说在这个开发者工具里，background-image用的有点问题，可以使用网络图片，或者 base64，或者使用标签，但是据说本地图片在手机上显示会有点问题【本人没试过，不清楚..道听途说】，所以我就改成网络图片试了一下，但是没有出效果，困住我一两个小时了…我看到有人总结出现这种错误，通常是由于图片的路径不对而引起的。若是外网的图片，就是你外网的图片url错了（因为它没有相对和绝对的路径概念）。现在只说说本地的图片路径问题。有这么一种情况，如果图片路径被写在一个A.js文件里，而B.js文件引用了A.js，此时图片的路径必须是相对于B.js的相对路径。建议最好在公共的js文件里使用绝对路径。
然而我还是改不对。             All right，时隔十分钟之后，我发现问题所在了，author_img 我在wxml中写成了author-img

3.教程讲了一下那个分辨率的问题，

4.总结一下需要注意一下的小细节（除了报错的问题），都是一些前端就应该注意的小问题

Ÿ   让文字在边框里居中对齐的时候只需要设置行高，让行高等于那个边框高就可以了，之前知道这一点，但是没咋用过，所以在此再强调一下，
Ÿ   水平布局的时候，记得都要设垂直居中，这样才会对齐，不然不太好
Ÿ   那个轮播图真的超级好用，感觉用这种封装好的东西贼棒，但是在设置的时候要多试一下，才知道应该在哪里加class，因为是一层套一层的嘛
Ÿ   讲到数据绑定的时候说到了 轮播图swiper关于水平还是竖直的问题，加一个vertical =”true”就可以垂直，那么把true换成false，可以变成竖直吗，实际上在小程序里，它解析这个字符串的时候会转化为布尔值，转化之后又不是空的，所以还是会垂直，解决方法就是在双花括号里放false。（so 只要是涉及到那个值要是false的时候，都是同理 加花括号）
Ÿ   控制显隐的时候是  wx:if={{}}（这个地方同上，要用花括号） 在花括号里写变量，然后通过js来控制【因为这个地方期望的是一个布尔值，但是解析到这个值的的时候会发现，既不是true也不是false 就需要向布尔值转换，于是就会往下找，有这个变量名的值到底是什么，然后来替换】、
Ÿ   花括号里还可以进行一些简单的运算关于在wxml文件里for循环：需要一个标签<block>,它像大括号一样把内容括起来，

<blockWx:for="{{posts_content}}"wx:for-item="item">

posts_content是获取的数据的数组，但是我们要数组里面元素的值映射到文章列表里, 把数据源换成了数组，那我要绑定这个数组下面的子元素的时候，需要找到子元素的代称，而现在这个item就可以指代数组元素下面的子元素，                                我各种设置完之后…emmm….空了 页面空了，暂时没找到原因，明明代码写的一样的…就是不知道哪里错了…
这种感觉真的难受…

 
 
这么看来 这周收获还是挺多的，学了很多新的东西，OK，我知道我寒假答辩作品压根没动静..这不是一个好兆头，但是学习为先嘛，学习新东西的感觉还不错，因为会觉得挺有收获的，但是当面对新的东西的时候，有些地方很难理解…就很恼火了，改bug相对痛苦，但是我发现了一件比报错还痛苦的事情，就是..它没有出效果，但是又不报错，然而这又是一个比较难的知识点出的问题，相当痛苦..无助的都想哭了..我尝试做了一下题目..做题的感觉也还不错，专心思考的时候就像很久以前全神贯注写网页的那种感觉，然后不知不觉时间就过去了..
当然也感觉到自己的不足了，虽然说术业有专攻..但是不足的地方还是尽量要补一些，本来打算下午做题，晚上写小程序的，但是今天小程序代码改了挺久了，下午和晚上都卡了特别久，下午的问题改出来了，晚上的没改出来，有点点难过。