上次小程序（1）

上次学小程序还是在上次，还没来得及写些总结，结果因为某些原因电脑数据被清空了。。。

微信开发文档虽好，但是对我这种小小白来说，没那么容易看的懂，没有实际的代码实现我还是看的云里雾里。。。

先从wxml和wxss开始吧（前端毫无经验）

主要部分还是代码，搭配其中的注释来记录一些思路，方便在忘记的时候回想起来。

首先，我是这么分类的，wxml和wxss是一组，js和json是一组。

他们的关系更像是ad和辅助。。。

wxml写到的东西，用wxss去配置说明，来起到更好的呈现。

这一节是关于view与hover的用法（ 点击部分 ）

<!--pages/test/test.wxml-->
<!-- 中的类需要去wxss中去具体配置 -->

<view class="Cat">cat</view>
<!-- 简单的 view 与 class 的使用 -->
<!-- class的使用去wxss中去声明与配置 -->

<view class="Dog" hover-class="hoverDog" 
hover-start-time="1"  
hover-stay-time="1000"
>dog</view> 
<!--中间加入了
 hover-start-time (ms) 的属性，意义为点击后多久响应变换
 hover-stay-time (ms) 的属性，意义为点击后变换持续多久
 -->

<view class="Rabbit">rabbit</view>


<view class="Zoo" hover-class="hoverZoo" >
    <view class="People" hover-class="hoverPeople"
    hover-stop-propagation >people</view>
Zoo</view>
<!-- 嵌套部分
    hover-stop-propagation 的意义是防止冒泡事件
    即：点击子事件不会使父事件也一起响应
 -->

而与之对应的wxss：

/* pages/test/test.wxss */
.Cat{background-color: rgb(255, 115, 0);width: 70px;height: 70px;}  /* Cat类：简单布置*/

.Dog{background-color: aqua;width: 70px;height: 70px;}
.hoverDog{background-color: crimson;}
/* 
    Dog类：
    简单的模块属性布置：
    长宽、背景颜色

    hoverDog类：（伴随Dog类）
    点击一下dog模块，颜色变为红色，但自动复原为蓝色
*/
.Rabbit{background-color: rgb(102, 255, 0);width: 70px;height: 70px;}
.Rabbit:hover{background-color: darkgoldenrod;}  
/* 
    Rabbit类：
    装入hover属性
    这里实现的是： 点击 Rabbit，该模块变成 金色 ，直到点击其他地方，绿色复原
*/

.Zoo{background-color: darkgray;width: 100px;height: 100px;}
.hoverZoo{background-color: teal;}
.People{background-color:darkorange;width: 80px;height: 40px;}
.hoverPeople{background-color: wheat;}

另外呢，关于pages的快捷添加：可以在最外层的json的部分去声明：

只需要写上"pages/test/test"就可以发现自动创建了一个test文件包

另外，第一节：图：

                                                          

      （点击dog，会自动恢复）                                     （点击rabbit,不点击其他地方不恢复）

                                                               

   （嵌套事件people[防止冒泡事件]）                                      （嵌套事件zoo）

 仅做记录，具体的修改可以跑代码学习！

进度：