微信小程序总结

本文主要是介绍微信小程序总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序总结:

1.

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

    https://developers.weixin.qq.com/miniprogram/dev/component/

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

    json配置文件

    js书写动态效果

    引入文字text

    引入视图、容器 view

    引入图片<image src=""></image>

2.

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)

    },

    文件内: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)

              }

            })

这篇关于微信小程序总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！