微信小程序四周课后总结

1：    
    app.json
    在app.json路径下在pages内可以新增文件，window内可修改增加页面内容
    images文件下放图片或音频或视频

    文件内的:xxx-wxml
    小程序中使用js的变量的时候，需要使用{{}}
    <image src=" "></image>添加图片 {{}}可以放置变量或者表达式：例如{{1+1}}
    点击事件 bindtap="方法名"方法名后面不加()：例如<button bindtap="fn">按钮</button>
    "注意"小程序中控制的就是数据
    语义：a?'b':'c'如果a为真的时候，得到b否则c
    类名是txt：
    <view class="{{1==1?'txt':'one'}}>
        类名是txt：
        <button class="txt" bindtap="sub">-</button>
        {{num}}
        类名是变量txt对应的值：
        <button class="{{txt}}" bindtap="add">-</button>
    </view>
    类名是current和txt:
    <button class="current {{1==1?'txt':'one'}}></button>
    小程序中{{变量}}变量在js中的data里面
    wx:for={{变量}}实现遍历动态复制标签；item代表每一个选项的值index代表下标元素
    小程序中事件传参 data-js中接受名字="传递参数"

    文件内的:xxx-js
    data:{
    变量名:值
    例如:wode:'hello world'    src:"../images/.."    num:10    txt:'one'    list:['aaa','bbb','ccc',]
    方法可以直接定义/方法名:function(){}
    function用法：        
    fn:function(){
    获取数据 this.data.变量名
    修改数据
    this.setData({
    变量名:值
    )}
    console.log(111)
    },
    fn:function(e){
    //e.target.dataset.wxml参数名
    console.log(e.target.daaset.id)
    },
2:
    总
    wxml:书写页面结构类似于之前的html，称为组件
    wxss:书写页面样式，和之前css基件一样
    json配置文件
    js书写动态效果

    文件内:xxx-wxml
    引入文字text 例子:<text>请上传</text>
    引入视图，容器 view 例子:<view>容器</view>
    小程序中的标签一定要闭合<标签/>或者<标签></标签>
    wx:if="表达式为真的时候显示，表达假的时候隐藏"例如:{{1==1}}显示{{1==2}}隐藏

    文件内:xxx-wxss
    会计标签独占一行，内行标签宽度由内容决定
    /rpx是一个相对单位 750rpx和屏幕一样宽/
    /wxss里面的背景图片下不能使用件地图片，但是可以使用网络图片，还可以使用base64位图片/
3:音频
    文件内:xxx-wxml
    小程序件地文件大小不能大于2M
    音频文件<audio src="../aaa.mp4"></audio>
    
    文件内:xxx-js
    创建音频：const innerAudioContext = wx.createInnerAudioContext()
    播放地址：innerAudioContext.src='......'
    自动播放：innerAudioContext.autoplay = true/false
    循环播放：innerAudioContext.loop = true/false

    文件内:xxx-wxss
    使用动画:animation：move 8s infinite linear；
    暂停动画:animation-play-state：paused；
    定义动画:@keyframes move{
    0%{
    transform：rotate（0deg）
    }
    100%{
    transform：rotate（360deg）
    }
    }
4.视频
    文件内:xxx-wxml
    视频导入:<video src=".......mp4"></video>
    弹幕输入:
    <video src=".....mp4" danmu-list="{{danmu}}" id="myVideo" ></video>
    <input type="text" placeholder="请输入弹幕"
    bindinput="getcon" />
    <button type="primary" bindtap="send">发布弹幕</button>
    
    文件内:xxx-js
    固定弹幕:data:{
        danmu:[
            {text:'文件',
             color:'颜色',
             time:在视频内的秒数
            },
            ]},
    输入式弹幕:function方法:
        data:{
            con:' '
        },
        getcon:function(e){
            console.log(e.detail.value)
            this.setData({ con:e.detail.value})
        },
        send:function(){
            this.video.sendDanmu({
            text:this.data.con,
            color:'pink'})
        },
    onReady:function(){ this.video=wx.createVideoContext('myVideo') },//获取音乐标签

5.发布
    文件内:xxx-wxml
    <textarea name="" id="" cols="30" rows="10" bindinput="getcon"></textarea>
    <button type="primary" bindtap="send">发布</button>

    <view wx:for="{{list}}" class="list">
        <text>{{item.con}}</text>
        <text class="right">{{item.date}}</text>
    </view>
    
    文件内:xxx-js
    固定发布:data:{
        list:[
            {con:'文件',
            date:'日期'
            }，

    输入发布function方法:
        getcon:function(e){
            console.log(e.detail.value)  ：储存的就是表单单位元素的值
            this.setDate({ con:e.detail.value }) ：把表单元素的值赋值给con
        }，
        send:function(){
            var date=new Date() ：获取日期
            var year=date.getFullYear() ：年
            var month=date.getMonth()+1; ：月
            var d=date.getDate() ：日
            var hours=date.getHours() ：小时
            var minutes=date.Minutes() ：分钟
            var seconds=date.getSeconds() ：秒
            var mylist=this,data.list; ：修改mylist
            :a.push(b)把b追加到数组a的后面
            mylist.push({  
                con:this.data.con,
                date:year+'-'+month+'-'+d+' '+hours+':
                '+minutes+':'+seconds+''
                        })
                this.setData({
                                list:mylist
                            })
                    },

6.数据添加与查询
    先创建一个数据库如：student
    数据添加:
    文件内:xxx-wxml
    <input type="text" placeholder="请输入用户名" 
    bindinput="getuser"/>
    <input type="password" placeholder="请输入密码" 
    bindinput="getpass"/>
    <button bindtap="add">增加数据</button>
    文件内:xxx-js
    data: {
            user:' ',
            pass:' '
        },
      add:function(){                
            const db = wx.cloud.database()    ：初始化
            db.collection('student').add({        ： collection集合
          data:{                 ：data 字段表示需增加的 JSON 数据
                user:this.data.user,            ：获取值
                pass:this.data.pass
              },
          success:function(res){
                console.log(res)        ：res 是一个对象，其中有 _id 字段标记刚创建的
              }
            })
      },
      getuser:function(e){
            this.setData({            ：设置值
              user:e.detail.value            ：存储的是表单元素的值
            })
      },
      getpass:function(e){
            this.setData({
              pass:e.detail.value
            })
          }
    }，
    数据查询
    文件内:xxx-wxml
    <button bindtap="select">查询</button>
    文件内:xxx-js
    select:function(){
            const db = wx.cloud.database()
            db.collection('student').where({
              user:'lzf',
              pass:'1111'
            })
        .get({
              success:function(res){
                console.log(res.data)
              }
            })