小程序中,一定要想着控制数据
数据绑定
动态数据来自对应 Page 的 data。
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
组件属性<view id="item-{{id}}"> </view>
控制属性<view wx:if="{{condition}}"> </view>
列表渲染
wx:for控制属性绑定一个数组
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
item 指定数组当前元素的变量名
index 指定数组当前下标的变量名
条件渲染
wx:if="" 判断是否需要渲染该代码块
<view wx:if="{{condition}}"> True</view>
也可以用 wx:elif 和 wx:else
type类型 placeholder文本框内文字 bindinput 监听 input 输入框的输入
<input type="text" placeholder="请输入用户名" bindinput="getuser"/>
bindtap 绑定点击事件
<button bindtap="add">增加数据</button>
e.detail.value 获取表单元素的值 赋值给con
getcon:function(e){
console.log(e.detail.value)
this.setData({
con:e.detail.value
})
}
追加数据
a.push(b)把b追加到数组a后面
mylist.push({
con:this.data.con
})
创建音频
const innerAudioContext = wx.createInnerAudioContext()
自动播放
innerAudioContext.autoplay = true
设置播放地址
innerAudioContext.src=''
循环
innerAudioContext.loop=true
播放/暂停音乐
innerAudioContext.play/pause()
audio引入音频
<audio src="" controls="true"></audio>
video引入视频
<video src="" controls="true"></video>
小程序中本地文件大小只能是2M
区块滑动
<scroll-view scroll-y="true">
<scroll-view scroll-x="true">
实现普通页面跳转 url书写跳转地址
<navigator url="/pages/logs/logs">日志</navigator>
跳转到tabbar中出现过的页面,需要加open-type="switchTab"
<navigator url="/pages/my/my" open-type="switchTab">我的</navigator>
进度条
<progress backgroundColor="red" percent="80" active="true"></progress>
wx:if=""控制标签是否存在 true存在 false不存在
<button wx:if="{{1==n}}">按钮1</button>
hidden控制标签显示隐藏 true隐藏 false显示 效率高
<button hidden="{{1==n}}">按钮2</button>