微信小程序第一个阶段总结

width: 10px // 宽度

height: 10px //高度

margin: //外边距

color: //颜色

font-size: //文字颜色

font-family: "楷体" //字体

font-size: 60px; //字体大小

background: //背景颜色

background:url(''"); //url里加图片地址

<text></text> //添加文本

<button></button> //按钮

<image src="../../images"></image> //添加图片，src添加图片的地址

<audio src=" "   controls="true"></audio> //添加音乐，src放置音乐的地址   controls控制条

<video src=" "    controls="true"></video> //添加视频，src放置视频的地址

音乐播放器

//创建音频

const innerAudioContext = wx.createInnerAudioContext()

//自动播放

innerAudioContext.autoplay = false

//设置播放地址

innerAudioContext.src='https://636c-cloud1-8g8r2it5150e75af-1309892085.tcb.qcloud.la/mm.mp3?sign=84daa669eadea2b1e0532a221fc1bce8&t=1646874658'

//加循环

innerAudioContext.loop=true

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

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

//src="" 中间放播放器图片   bindtap点击改变样式

wxss

图片样式

image{

  width: 300rpx; //宽度

  margin-left: 225rpx;//离左边的距离

  animation: move 10s infinite linear;//动画

}

旋转

@keyframes move{

  0%{

    transform: rotate(0deg);

  }

  100%{

    transform: rotate(360deg);

  }

}

.play{

  animation-play-state: paused;//暂停

}

视频&弹幕

js

Page({

  data: {

    danmulist:[

      {

        text:'点个赞！',   //弹幕内容

        color:'#ffff00',   //颜色

        time:1  //时间

      },   
    ],

    con:''

  },

  getcon:function(e){

    //e.detail.value 获取表单元素的值

    console.log(e.detail.value)

    this.setData({

      con:e.detail.value

    })

  },

  //发送弹幕

  send:function(){

    this.videoContext.sendDanmu({

      text:this.data.con,

      color:'pink'

    })

  },

  onReady: function () {

    //获取视频标签

    this.videoContext = wx.createVideoContext('myVideo')

  },

wxml

<video src="../mv.mp4" controls="true"  
danmu-list="{{danmulist}}" danmu-btn="true" id="myVideo"></video>  //视频地址 控制条
<input type="text" placeholder="请输入弹幕内容" bindinput="getcon" />  //弹幕内容框
<button type="primary" bindtap="send">发送弹幕</button> //按钮

wxss

video{
  width: 750rpx;  //视频大小
}

评论

js

Page({
    data: {
        list:[
            {
                con:"阿三大苏打是",   //评论内容
                date:"2022-01-01"    //评论日期
            }   
        ],
        con:''
    },
    getcon:function(e){
        console.log(e.detail.value)
        // 获取的表单元素的值赋值给con
        this.setData({
            con:e.detail.value
        })
    },
    send:function(){
        // a.push(b)把b追加到数组a后面
        //获取数据
        var mylist=this.data.list;
        //获取当前日期
        var date= new Date()
        //获取年份
        var year=date.getFullYear();
        //获取月份 月份只有0-11月份
        var month=date.getMonth()+1
        //获取日期
        var d=date.getDate()
        //小时
        var hours=date.getHours()
        //分钟
        var minutes=date.getMinutes();
        //秒
        var seconds=date.getSeconds();
        //追加数据
        mylist.push({
            con:this.data.con,
            date:year+'-'+month+'-'+d+' '+hours+':'+minutes+":"+seconds
        })
        //修改mylist的值
        this.setData({
            list:mylist
        })
    }

wxml

<!-- 文本域 -->
<!-- bindinput实时获取表单元素的值 -->
<textarea name="" id="" cols="30" rows="10" 
bindinput="getcon"></textarea>
<button type="primary" bindtap="send">发布评论</button>   //按钮
<view wx:for="{{list}}">
<text>{{item.con}}</text>
<text class="right">{{item.date}}</text>
</view>

wxss

textarea{
    border: 1px solid orange;  
    width: 600rpx;     //宽度
    margin-left: 75rpx;   //距左边距离
}
button{
    margin-top: 20px;   //距顶部距离
}
view{
    font-size: 12px;
    border-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid orange;
}
.right{
    float: right;
}

增加/查询数据

js

Page({
    data: {
        user:'',
        pass:''
    },
    getuser:function(e){
        this.setData({
            user:e.detail.value
        })
    },
    getpass:function(e){
        this.setData({
            pass:e.detail.value
        })
    },
    add:function(){
        //初始化
        const db = wx.cloud.database();
        // db.collection('集合名字')
        db.collection('nnn').add({
            // data 字段表示需新增的 JSON 数据
            data: {
                user:this.data.user,
                pass:this.data.pass
            },
            //success成功以后的指令
            success: function(res) {
              // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
              console.log(res)
            }
          })
    },
    check:function(){
        //初始化
        const db = wx.cloud.database();
        //查询语句
        db.collection('student').where({
            user:'hhh',
            pass:"123"
        })
        .get({
            success:function(res) {
                // 查询结果
                console.log(res.data)
            }
        })
    },

wxml

<input type="text" placeholder="请输入用户名" bindinput="getuser"/>
<input type="password" placeholder="请输入密码" bindinput="getpass"/>
<button bindtap="add">增加数据</button>
<button bindtap="check">查询数据</button>