微信小程序学习总结1

小结1：这门课程介绍了微信小程序的开发 创建了账号（测试号、上线账号） 开启了云平台的功能

以及创建项目和介绍了目录结构（pages、js、json、wxml、wxss等目录结构）

小结2：获取图片(images)

图标(icon)

label(标签)

输入框（input）

view（相当于html:5里面的div盒子）

textarea(文本输入框）

button（按钮）

页面上的选项卡(绑定（bindtap） 写一个判断 是则执行前面 否则执行后面空 给id名 给一个list 表单定义 然后This.setData调用 最后在wxss修改样式）

小结3：做一个类似网某云音乐播放的转动动画以及上传音乐到云平台存储 

JS：

data: {

    num:1

  },

  change:function(){

    if(this.data.num==0){

      this.setData({

        num:1

      })

      innerAudioContext.play()

    }else{

      this.setData({

        num:0

      })

      innerAudioContext.pause()

    }

  },

WXML：

<div>

<image  class= "{{num==0?'paused':''}}" bindtap= "change"  src="../../images/hh.jpg" mode="widthFix"></image>

</div> （src是引入GIF动画图片 mode="widthFix" 宽度自适应，用来适应不用机型屏幕占比大小）

WXSS：

image{

  width: 300rpx;

  margin-left: 225rpx;

  background-image: linear-gradient(to right,red,yellow);（修改宽高大小左右颜色背景图样式）

  animation: move 5s infinite linear;（动画延迟和持续时间设定）

}

.pasued{

  animation-play-state: paused;（控制动画暂停开始）

}

 

@keyframes move{

  0%{

    transform:  rotate(0deg);

  }

  100%{

    transform: rotate(360deg);

  }

}（转动方向角度设定）

小结4：数据库实时获取功能

WXML：

（bindinput实时获取表单数据 ）

（绑定） 

<input type="text" placeholder="请输入用户名"bindinput="getuser"/>

（绑定 ）

<input type="password" placeholder="请输入密码" bindinput="getpass"/> 

<button bindtap="add">增加数据</button>

<button bindtap="select">查询数据</button>

JS：

add:function(){

         const db = wx.cloud.database()     （定义初始化）

         db.collection('student').add({          （控制db变量）

            data: {

                user:this.data.user,

                pass:this.data.pass

            },

            success:function(res){

                console.log(res);

            }

         })

     },

     （获取）

     getuser:function(e){

         （设置值 setData）

         this.setData({

             user:e.detail.value

         })

     },

     （获取）

     getpass:function(e){

         this.setData({

             pass:e.detail.value 

         })

     },

     select:function(){

         const db = wx.cloud.database() （const 声明变量 调用后再返回）

         db.collection('student').where({

             user:'aaa',

             pass:'111'

         })

         .get({

             success:function(res){    （ 返回值）

                console.log(res.data);   （输出调试console）

             }