1.工程目录

2.详细代码

index.js

Page({ 

/** * 页面的初始数据 */
data: { 

//background:image的变量（设置图片的值）
background: 
['https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg','https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg','https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'],
//滑块视图容器的属性
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500,
items: [
{ 
value: 'USA', name: '美国'},
{ 
value: 'CHN', name: '中国', checked: 'true'},
{ 
value: 'BRA', name: '巴西'},
{ 
value: 'JPN', name: '日本'},
{ 
value: 'ENG', name: '英国'},
{ 
value: 'FRA', name: '法国'}
],
inputValue: '',
radioItems: [
{ 
name: 'USA', value: '美国'},
{ 
name: 'CHN', value: '中国', checked: 'true'}
],
},
checkboxChange(e) { 

console.log('checkbox发生change事件，携带value值为：', e.detail.value)
const items = this.data.items
const values = e.detail.value
for (let i = 0, lenI = items.length; i < lenI; ++i) { 

items[i].checked = false
for (let j = 0, lenJ = values.length; j < lenJ; ++j) { 

if (items[i].value === values[j]) { 

items[i].checked = true
break
}
}
}
this.setData({ 

items
})
},
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) { 

},
/** * 生命周期函数--监听页面初次渲染完成 */
onReady: function () { 

},
/** * 生命周期函数--监听页面显示 */
onShow: function () { 

},
/** * 生命周期函数--监听页面隐藏 */
onHide: function () { 

},
/** * 生命周期函数--监听页面卸载 */
onUnload: function () { 

},
/** * 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () { 

},
/** * 页面上拉触底事件的处理函数 */
onReachBottom: function () { 

},
/** * 用户点击右上角分享 */
onShareAppMessage: function () { 

},
bindKeyInput: function (e) { 

this.setData({ 

inputValue: e.detail.value
})
},
radioChange(e) { 

const checked = e.detail.value
const changed = { 
}
for (let i = 0; i < this.data.radioItems.length; i++) { 

if (checked.indexOf(this.data.radioItems[i].name) !== -1) { 

changed['radioItems[' + i + '].checked'] = true
} else { 

changed['radioItems[' + i + '].checked'] = false
}
}
this.setData(changed)
console.log(changed)
},
tapEvent() { 

console.log('按钮被点击')
},
submit:function(e){ 

console.log(e)
}
})

index.wxml

内容包括添加视频播放、轮转图片、多选框、单选框、实时获取输入值、按钮提交输入控件的数据

 
<!--index.wxml-->
<view class="container">
<view>
<text>hello world </text>
<checkbox-group bindchange="checkboxChange" >
<label  wx:for="{ 
{items}}" wx:key="{ 
{item.value}}">
<view >
<checkbox value="{ 
{item.value}}" checked="{ 
{item.checked}}"/>
</view>
<view>{ 
{ 
item.name}}</view>
</label>
</checkbox-group>
</view> 
<view class="item3" >
<form bindsubmit="submit">
<custom-comp>
<input name="name" placeholder="请输入名字"></input>
<switch name="student" />
</custom-comp>
<button form-type="submit" size="default" type="primary" >提交</button>
</form>
</view>
<view class="item">
<view>实时获取输入值：{ 
{ 
inputValue}}</view>
<input   maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
</view>
<view class="item1">
<text>radio-group</text>
<radio-group class="group" bindchange="radioChange">
<view class="label-2" wx:for="{ 
{radioItems}}">
<radio id="{ 
{item.name}}" value="{ 
{item.name}}" checked="{ 
{item.checked}}"></radio>
<label class="label-2-text" for="{ 
{item.name}}"><text>{ 
{ 
item.name}}</text></label>
</view>
</radio-group>
</view>
<view class="item2">
<text>swiper   image </text>
<swiper indicator-dots="{ 
{indicatorDots}}" sytle="width:300px"
autoplay="{ 
{autoplay}}" interval="{ 
{interval}}" duration="{ 
{duration}}">
<block wx:for="{ 
{background}}" wx:key="*this">
<swiper-item>
<image src="{ 
{item}}" class="slide-image" width="355" height="300"/>
</swiper-item>
</block>
</swiper>
</view>
<view class="item2">
<text>video </text>
<video 
id="myVideo" 
src="http://81.71.14.198/vx/testvx.mp4" 
binderror="videoErrorCallback" 
danmu-list="{ 
{danmuList}}" 
enable-danmu 
danmu-btn 
show-center-play-btn='{ 
{false}}' 
show-play-btn="{ 
{true}}" 
controls
picture-in-picture-mode="{ 
{['push', 'pop']}}"
bindenterpictureinpicture='bindVideoEnterPictureInPicture'
bindleavepictureinpicture='bindVideoLeavePictureInPicture'
></video>
</view>

index.wxss

/**index.wxss**/
.container{ 

height:100%;
width: 100%;
background-color:rgb(119, 151, 221);
display: flex;
flex-direction: row;
flex-wrap: wrap;/*换行*/
justify-content: space-between;
align-items: center;
}
.item{ 

width:100%;
height: 100rpx;
background-color: yellow;
border:1px solid#fff;
order: 3;
}
.item1{ 

width:100%;
height: 150rpx;
background-color: rgb(105, 185, 109);
border:1px solid#fff;
order: 3;
}
.item2{ 

height: 300px;
background-color: rgb(153, 172, 211);
border:1px solid#fff;
order: 3;
}
.item3{ 

background-color: rgb(241, 237, 241);
border:1px solid#fff;
order: 3;
}