微信小程序前四周内容总结

WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

WXSS是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

text文字

view容器或者视图

image引入图片

mode="widthFix" 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

icon 图标组件

audio音频

video 视频

弹幕输入:

    <video src=".....mp4" danmu-list="{{danmu}}" id="myVideo" ></video>

    <input type="text" placeholder="请输入弹幕"

    bindinput="getcon" />

    <button type="primary" bindtap="send">发布弹幕</button>

固定弹幕: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') },

color 颜色

width 宽度

height 高度

background 背景

disply 定义行内块

button书写按钮

{{书写变量}}

data中书写变量

wx:if 条件渲染 在框架中，使用 wx:if="" 来判断是否需要渲染该代码块

wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名

bindtap 点击事件

bindinput实时获取数据

data- 数据绑定

动态类名 class="{{a?b:c}}"

定义模板：使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段

AudioContext.play() 播放音频

AudioContext.pause() 暂停音频

Keyframes 关键帧动画 keyframes 中对象的结构rotate旋转

发布评论方法：

Wxml

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

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

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

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

Js

getcon:function(e){

        console.log(e.detail.value)

        this.setData({

            con:e.detail.value

        })

    },

    send:function(){

        var mylist=this.data.list;

        mylist.push({

            con:this.data.con,

            date:'2022-03-16'

        })

        this.setData({

            list:mylist

        })

    },

    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.getMinutes()

        var seconds=date.getSeconds()

        var mylist=this.data.list;

        mylist.push({

            con:this.data.con,

            date:year+'-'+month+'-'+d+' '+hours+':'+minutes+':'+seconds

        })

        this.setData({

            list:mylist

        })

    },

数据的添加与查询

在云开发中新建Student数据库

add:function(){

    // 初始化

    const db = wx.cloud.database()

    // collection集合

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

      // data 字段表示需新增的 JSON 数据

      data: {

        // 获取值 this.data.变量名

        user:this.data.user,

        pass:this.data.pass

      },

      success: function(res) {

        // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id

        console.log(res)

      }

    })

  },

  getuser:function(e){

    // 设置值  e.detail.value存储的是表单元素的值

    this.setData({

      user:e.detail.value

    })

  },

  getpass:function(e){

    // 设置值

    this.setData({

      pass:e.detail.value

    })

  },

  select:function(){

    // 初始化

    const db = wx.cloud.database()

    // 查询语句

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

      user:'zzw',

      pass:'11111'

    })

    .get({

      success: function(res) {

        console.log(res.data)

      }

    })

  },