软三05陈群彬第一阶段总结
作者:互联网
<!-- wxml类似于之前的html,书写页面结构 称为组件
https://developers.weixin.qq.com/miniprogram/dev/component/button.html-->
<!-- text引入文字 -->
<!-- view使用方法和一样 view实现视图,容器类的布局 -->
<!-- image引入图片 mode缩放模式 -->
<!-- 小程序内部,标签必须有结束 -->
/* wxss书写样式,样式和css基本一样 */
/* 背景图片不能本地路径,可以使用网络地址,或者base64位图片 */
/* rpx是一个相对单位,750rpx和当前屏幕一样 */
// 此处书写方法
add:function(){
// 获取变量的值 this.data.变量
// 修改变量的值 this.setData({
// 变量名:值
// })
var t=this.data.num+1;
this.setData({
num:t
})
},
<!-- 在小程序中,使用js的数据。需要{{数据}} -->
<!-- 点击事件 bindtap="方法"方法后面不能加() -->
<!--
wx:for="{{所要遍历的数据}}"
相当于复制标签
item代表数据每一项
index数组下标
-->
<!-- 事件传参 data-js中接收的参数="传递的参数" -->
<text wx:for="{{list}}" bindtap="fn" data-id="{{index}}">{{item}}-{{index}}</text>
</view>
<!-- 类名是txt -->
<button class="txt">按钮1</button>
<!-- 类名是变量txt对应的值 -->
<button class="{{txt}}" >按钮2</button>
<!-- a?'b':'c'如果a为真的时候,得到b否则得到c -->
<!-- 类名根据表达式进行判断 类名是txt -->
<button class="{{1==1?'txt':'one'}}">按钮3</button>
<!-- txt类名肯定存在 one类名根据表达式 -->
<button class="txt {{1==1?'one':''}}">按钮4</button>
add:function(){
// 获取变量的值 this.data.变量
// 修改变量的值 this.setData({
// 变量名:值
// })
var t=this.data.num+1;
this.setData({
num:t
})
},
切换按钮
<button bindtap="toggle">切换</button>
<!-- wx:if=""控制标签是否存在 true存在 false不存在-->
<button wx:if="{{1==n}}">按钮1</button>
<!-- hidden控制标签显示隐藏 true隐藏 false显示 效率高-->
<button hidden="{{1==n}}">按钮2</button>
弹幕发送
js
<!-- 获取表单元素的值 bindinput可以实时获取表单元素的值 -->
<input type="text" placeholder="请输入弹幕内容" bindinput="getcon" />
<button type="primary" bindtap="send">发送弹幕</button>
wxml
// e.detail.value 获取表单元素的值
getcon:function(e){
console.log(e.detail.value)
this.setData({
con:e.detail.value
})
},
引入媒体
<!-- 有些url不支持云平台地址 -->
<!-- audio引入音频 -->
<audio src="https://7a73-zsh-gmx9p-1257218395.tcb.qcloud.la/aa.m4a?sign=62715763737699ec225108f2ce0be0c4&t=1646810798" controls="true"></audio>
<!-- video引入视频 -->
<video src="cloud://zsh-gmx9p.7a73-zsh-gmx9p-1257218395/bb.mp4" controls="true"></video>
音乐
<!-- 小程序中,一定要想着控制数据 -->
// 创建音频
const innerAudioContext = wx.createInnerAudioContext()
// 自动播放
// innerAudioContext.autoplay = true
// 设置播放地址
innerAudioContext.src='cloud://zsh-gmx9p.7a73-zsh-gmx9p-1257218395/aa.m4a'
// 加循环
innerAudioContext.loop=true
change:function(){
if(this.data.num==0){
this.setData({
num:1
})
// 播放音乐
innerAudioContext.play()
}else{
this.setData({
num:0
})
// 暂停音乐
innerAudioContext.pause()
}
},
评论
wxml
<!-- bindinput实时获取表单元素的值 -->
js
getcon:function(e){
console.log(e.detail.value)
// 获取的表单元素的值赋值给con
this.setData({
con:e.detail.value
})
},
send:function(){
// a.push(b)把b追加到数组a后面
// 获取数据
var mylist=this.data.list;
// 获取当前日期
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();
// 追加数据
mylist.push({
con:this.data.con,
date:year+'-'+month+'-'+d+' '+hours+':'+minutes+":"+seconds
})
// 修改mylist的值
this.setData({
list:mylist
})
},
标签:function,软三,05,date,num,var,陈群彬,data,setData 来源: https://blog.csdn.net/m0_65704333/article/details/123614042