微信小程序阶段总结一

暴躁卓卓

已于 2022-03-22 16:57:27 修改

阅读量1.1k

点赞数 1

文章标签：微信小程序

于 2022-03-21 23:21:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_57823256/article/details/123606278

版权

本文概述了微信小程序的基础配置app.json，包括pages和tabBar设置，并深入介绍了回调函数、媒体组件（音频和轮播）的应用，如实时弹幕和发微博功能，以及增删改查操作在云开发中的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

前言

一、app.json

二、基本小知识

回调函数

三、媒体组件

四、实现一些小功能

实时发送弹幕

发微博功能

增删改查

前言

微信小程序课程第一阶段总结。

一、app.json

app.json 是当前小程序的全局配置

pages：每一个子页面都需要写进这个数组里
window：系统配置，用来设置小程序的窗口。window 属性的值是一个对象，其常用属性：navigationBarBackgroundColor 导航栏颜色、navigationBarTextStyle 导航栏标题颜色（只支持 black 或 white ）、navigationBarTitleText 导航栏的文字
tabBar：导航栏。list 为导航数组，存放导航项
iconPath、selectedIconPath 分别放置 tabBar 导航栏点击前后的图标路径

二、基本小知识

wxml 类似于 html ，用于描述小程序的页面。元素名都是由微信新定义的，不存在传统的 div、span、p 等元素，取而代之的是 view、text 等（注意：每个标签都是成对使用，需要有闭合标记）
wxss 类似于 css，wxss 背景图片不能使用本地图片，可以使用网络图片
height:100%; // 页面高度为整个屏幕高度
width:750rpx; // 页面宽度为整个屏幕宽度（注意这里的单位是 rpx 而不是 px。不管什么手机屏幕，宽度一律为 750rpx，如果一个元素的宽度是页面的一半，则其宽度为375rpx）
小程序中使用 js 的变量的时候需要使用 {{...}} ，可以放置变量或表达式：{{wzt}}、{{1+1}}，变量在 js 中的 data 里面（变量名区分大小写）
js基本格式
btn01: function () {
        // 获取数据 this.data.变量名
        // 修改数据
        // this.setData({
        //     变量名：值
        // })
    }

// e.target.dataset.wxml参数名
wx:for={{变量}} 实现遍历动态复制标签，item 代表每一个选项的值 index 代表下标元素
 <view wx:for="{{list}}" bindtap="toggle" data-id="{{index}}">{{item}}-{{index}}</view>
wx:if="表达式" 表达式为真的时候显示表达式为假的时候隐藏
<button wx:if="{{1==2}}">按钮</button>
scroll-x 横向滑动，scroll-y 纵向滑动
navigator 实现页面跳转，url 跳转的地址
<navigator url=" ">首页</navigator>
如果跳转页面在 tabbar 中出现过，不能直接跳转，要加 open-type="switchTab" 提示
<navigator url=" " open-type="switchTab">我的</navigator>
回调函数
事件回调函数的参数是 event 事件对象，可以从其上面获取事件信息
事件回调函数内部的 this，指向页面实例
页面实例的 this.setData( ) 可以更改配置对象的 data 属性

注意：修改页面配置对象的 data 属性时，不要直接修改this.data，这不仅无法触发事件绑定机制去变更页面，还会造成数据不一致，所以一定要通过this.setData( ) 去修改。

三、媒体组件

        云开发—存储—上传文件

audio 音频,有些不支持云平台,可以使用下载地址
controls 是否显示默认控件
const innerAudioContext = wx.createInnerAudioContext() // 创建音频
innerAudioContext.autoplay = true   // 自动播放
innerAudioContext.loop = true   // 循环播放
innerAudioContext.play() // 播放音乐
innerAudioContext.pause() // 暂停音乐
<swiper> 轮播组件
动画
/* 暂停动画 */
.paused{
  animation-play-state: paused;
}
/* 定义动画 */
@keyframes move{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

四、实现一些小功能

实时发送弹幕

wxml 代码如下：

<video src="cloud://cloud1-7gkqm7en4d6eb3ff.636c-cloud1-7gkqm7en4d6eb3ff-1309767451/dxj.mp4" danmu-list="{{danmu}}" id="myVideo"></video>
<!-- bindinput获取表单元素的值 -->
<input type="text" placeholder="请输入弹幕" bindinput="getcon"/>
<button type="primary" bindtap="send">发布弹幕</button>

js 代码如下：

Page({

    /**
     * 页面的初始数据
     */
    data: {
        danmu:[
            {
                text:'为什么熬夜掉的不是腿毛？？',
                color:'white',
                time:1
            },
            {
                text:'人生在世三万天',
                color:'yellow',
                time:2
            },
            {
                text:'有酒有肉小神仙',
                color:'pink',
                time:3
            }
        ],
        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:'red'
        })
    },
    onReady: function () {
        // 获取音频
        this.video = wx.createVideoContext('myVideo')
    }
})

发微博功能

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>

wxss 代码如下：

textarea{
    width: 600rpx;
    height: 100rpx;
    margin-left: 75rpx;
    border: 1px solid orange;
    border-radius: 10px;
}
.list{
    font-size: 12px;
    border-bottom: 1px solid orange;
    margin-top: 8px;
    padding-bottom: 2px;
}
.right{
    margin-right: 6px;
    float: right;
}

js 代码如下：

Page({

    data: {
        list:[
            {
                con:'暴躁卓卓',
                date:'2022-03-14'
            },
            {
                con:'炸毛星',
                date:'2022-03-15'
            },
            {
                con:'橘子怪',
                date:'2022-03-16'
            }
        ],
        con:''
    },
    getcon:function(e){
        // 存储的就是表单元素的值
        console.log(e.detail.value)
        // 把表单元素的值赋值给con
        this.setData({
            con:e.detail.value
        })
    },
    send:function(){
        // 获取日期
        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()

        // 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
        })
    },
})

增删改查

云开发—数据库—创建集合名称

首先要在数据库中创建一个集合名称以方便使用，这里创建 student 为例
const db = wx.cloud.database( ) 初始化。在开始使用数据库 API 进行增删改查操作之前，需要先获取数据库的引用。
db.collection('student') 集合。我们可以通过此引用在该集合上进行增删查改的操作
add 增加数据
get 查询数据

我们也可以一次性获取多条记录。通过调用集合上的 where 方法可以指定查询条件，再调用 get 方法即可只返回满足指定查询条件的记录

update 修改数据
remove 删除数据

wxml 代码如下：

<input type="text" placeholder="请输入用户名" bindinput="getuser"/>
<input type="password" placeholder="请输入密码" bindinput="getpass"/>
<button bindtap="add">增加数据</button>
<button bindtap="select">查询数据</button>
<button bindtap="update">修改数据</button>
<button bindtap="del">删除数据</button>

js 代码如下：

Page({
    data: {
        user:'',
        pass:''
    },
    add:function(){
        // 初始化
        const db = wx.cloud.database()
        // collection 集合
        db.collection('student').add({
        // data 字段表示需增加的 JSON 数据
            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:'wzt',
            pass:'123'
        })
        .get({
            success:function(res){
                console.log(res.data)
            }
        })
    },
    update:function(){
        const db = wx.cloud.database()
        // 修改方法
        db.collection('student').where({
            // 修改的条件
            user:'wzt'
        })
        .update({
            data:{
                // 修改以后的条件
                user:'zhuoting'
            },
        })
    },
    del:function(){
        const db = wx.cloud.database()
        db.collection('student').where({
            // 删除条件
            user:'zhuoting'
        }).remove()
    }
})

每增加、修改一个数据，都要在数据库刷新，确认数据都存储在数据库中后，点击删除数据，再刷新，数据被删除。