总结微信小程序近期学习要点

总结目前微信小程序所学知识点：

新建页面要在 app.json 的 “pages”:{“pages/文件名/文件名”},

图片放在images文件夹里面

wxml:书写页面结构 类似于之前的html。称为组件

wxss:书写页面样式。和之前的css基本一样

json配置文件

js书写动态效果

wxml的总结

小程序中需要控制数据

<!-- 引入文字text -->

<text>请上传头像</text>

<!-- 引入视图、容器 view -->

<view>容器</view>

<!-- 小程序中的标签一定要闭合

 <标签 />或者<标签>< /标签> -->

<input type="text" />

<!-- 引入图片 -->

<image mode="aspectFit" src="填写地址"></image>

<!-- 音频 -->

<audio src="填写音频地址" controls="true"></audio>

<!-- textarea文本域 -->

<textarea name="" id="" cols="30" rows="10" bindinput="getcon"></textarea>

<!-- bindtap点击事件 -->

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

<!-- bindinput实时获取表单数据 -->

<input type="text" placeholder="请输入弹幕" bindinput="getcon" />

小程序wxml中使用js的变量的时候，需要使用{{}}代码片.

<!-- 小程序中使用js的变量的时候，需要使用{{}} -->

{{czx}}

<!-- {{}}可以放置变量或者表达式 -->

<image src="{{src}}" bindtap="ggg"></image>

三目运算符：

a?‘b’:'c’如果a为真的时候，得到b否则c

<view class="{{1==1?'txt':'one'}}">

    <!-- 类名是txt --> 

    <button class="txt" bindtap="ppp">-</button>

    {{num}}

    <!-- 类名是变量txt对应的值 -->

    <button class="{{txt}}" bindtap="ddd">+</button>

</view>

<!-- 类名是current和txt -->

<button class="current {{1==1?'txt':'one'}}">按钮</button>

wx:for="{{变量}} 实现遍历 动态复制标签

item代表每一个选项的值 index代表下标元

<!-- wx:for="{{变量}} 实现遍历 动态复制标签

     item代表每一个选项的值 index代表下标元素  -->

<!-- 小程序中，很多时候都是控制数据 -->

<!-- 小程序中事件传参  data-js中接受名字="传递参数" -->

<view wx:for="{{list}}" bindtap="toggle" data-id="{{index}}">{{item}}-{{index}}</view>

wx:if="表达式"表达式为真的时候显示 表达式为假的时候隐藏

<!-- wx:if="表达式"表达式为真的时候显示 表达式为假的时候隐藏-->

<button wx:if="{{1==2}}">按钮</button>

js的总结

data是放变量的

data: {

    czx:'hello 小程序',

    src:"../../images/aa.gif",

    num:10,

    txt:'one',

    list:['xxx','aaa','bbb','cccc']

   

  },

方法可以直接定义

方法名：function(){

fn:function(){

    //获取数据 this.data.变量名

    //修改数据

    this.setData({

    //变量名:值

    })

    var t=this.data.num-1

    this.setData({

      num:t 

  }),

ppp:function(){

    var t=this.data.num-1

    this.setData({

      num:t 

    })

  },

存储赋值

getcon:function(e){

        //储存的就是表单元素的值的出现

        console.log(e.detail.value)

        //把表单元素的值赋值给con

        this.setData({

            con:e.detail.value

        })

    },

e.target.dataset.wxml参数名

 toggle:function(e){

    // e.target.dataset.wxml参数名

    console.log(e.target.dataset.id)

  },

音频的创建步骤

//创建音频

const innerAudioContext = wx.createInnerAudioContext()

//播放地址

innerAudioContext.src='cloud://cloud1-0g93j3o74b59ab89.636c-cloud1-0g93j3o74b59ab89-1309767404/gyz.m4a'

//自动播放

innerAudioContext.autoplay = true

//循环播放

innerAudioContext.loop=true

//播放音乐

innerAudioContext.play()

//停止音乐

innerAudioContext.pause()

时间

send:function(){

        //获取当前日期

        var date=new Date()

        //获取年份

        var year=date.getFullYear()

        //获取月份，程序中只有1-11月份

        var month=date.getMonth()+1;

        //获取日期

        var d=date.getDate()

        //小时

        var hours=date.getHours()

        //分钟

        var minutes=date.getMinutes()

        //秒速

        var seconds=date.getSeconds()

        //a.push(b)把b追加到数组a的后面

        var mylist=this.data.list;

        //修改mylist

        mylist.push({

            con:this.data.con,

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

        })

        //修改list的值

        this.setData({

            list:mylist

        })

    },

数据库

wxml里面的

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

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

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

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

js里面的

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

    //collection集合

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

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

      data: {

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

        usesr:this.data.user,

        pass:this.data.pass

      },

      success: function(res) {

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

        console.log(res)

      }

    })

  },

wxss:书写页面样式。和之前的css基本一样

rpx是一个相对单位 750rpx和屏幕一样宽