2023年夏季《移动软件开发》实验报告-实验三

2023年夏季《移动软件开发》实验报告

一、实验目标

两个实例：

1、仿微信“发现”页创建列表布局

2、仿微信“钱包”页创建九宫格布局

两个要点：

1、学习flex布局和 wx:for 属性创建列表布局

2、学习flex布局和 wx:for 属性创建九宫格布局

二、实验步骤

一、项目创建

二、页面配置

1、创建页面文件

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index,表示小程序运行的第一个页面；其他页面名称可以自定义。本项目只需要保留首页index即可。

具体操作如下：

(1)将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号。

(2)按快捷键Ctrl十S保存当前修改。

2、删除和修改文件

具体操作如下：

(1)删除utils文件夹及其内部所有内容。

(2)删除pages文件夹下的logs目录及其内部所有内容。

(3)删除index.wxml和index.wxss中的全部代码。

(4)删除index.js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数

(5)删除app.wxss中的全部代码。

(6)删除app.js中的全部代码，并且输入关键词app找到第一个选项按回车键让其自动补全函数

三、视图设计

1、导航栏设计

在app.json中自定义导航栏标题和背景，更改后的app.json文件代码及效果图如下：

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTitleText": "口述校史",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2、页面设计

页面上主要包含3个区域，具体内容解释如下：

区域1：视频播放器，用于播放指定的视频；

区域2：弹幕发送区域，包含弹幕输入框和发送按钮；

区域3：视频列表，垂直排列多个视频标题，点击不同的标题就播放对应的视频内容。

面板之间需要有一定的间隔距离，设计图如图所示。

其中，页面上包含3个区域，分别为：
1）区域1:视频播放器，用于播放指定的视频;
使用<video>组件来实现一个视频播放器
2）区域2:弹幕发送区域,包含文本输入框和发送按钮;
使用<view>组件实现一个单行区域,包括文本输入框和发送按钮
3）区域3:视频列表,垂直排列多个视频标题,点击不同的标题播放对应的视频内容；
使用<view>组件实现一个可扩展的多行区域,每行包含一个播放图标和一个视频标题文本。当前先设计第一行效果,后续使用wx:for属性循环添加全部内容
页面设计相关代码如下：

index.wxml页面代码：

<view class="container">
  <!--区域一：视频播放器-->
  <video id='myvideo' controls></video>

  <!--区域二：弹幕控制-->
  <view class='danmuArea'>
    <input type='text' placeholder='请输入弹幕内容'></input>
    <button>发送弹幕</button>
  </view>
  <!--区域三：视频列表-->
  <view class='videoList'>
    <view class='videoBar'>
      <image src='/images/icon.png'></image>
      <text>测试标题</text>
    </view>
  </view>
</view>

index.wxss页面代码：

video{
  width:100%;
}
 /*区域2:弹幕控制样式*/
 /* 2-1弹幕区域样式*/
.danmuArea{
  display: flex;
  flex-direction: row;
}
/*2-2文本输入框样式*/
input{
  border: 1rpx solid #987938;
  flex-grow:1;
  height:100rpx;
}
/* 2-3按钮样式 */
button{
  color:white;
  background-color: #f3a109;
}

/* 区域3：视频列表样式 */
/* 3-1视频列表区域样式 */
.videoList{
  width:100%;
  min-height:400rpx;
}

/* 3-2单行列表区样式 */
.videoBar{
  width:100%;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #987938;
  margin:10rpx;
}

/* 3-3播放图标样式 */
image{
  width:70rpx;
  height:70rpx;
  margin:20rpx;
}

/* 3-4文本标题样式 */
text{
  font-size:45rx;
  color:#987938;
  margin:20rpx;
  flex-grow: 1;
}

页面设计完成

四、逻辑实现

首先在区域3对<view class = 'videoBar'>组件添加wx : for属性,改写为循环展示列表，然后在区域3对<view class = 'videoBar '>组件添加data-url属性和 bindtap属性。其中 data-url 用于记录每行视频对应的播放地址, bindtap用于触发点击事件。最后在区域1对< video >组件添加enable-danmu 和 danmu-btn属性,用于允许发送弹幕和显示“发送弹幕”按钮，以及对颜色进行设置。
逻辑实现相关代码及效果图如下：

index.wxml代码修改如下：

<view class="container">
  <!--区域一：视频播放器-->
  <video id='myvideo' controls src='{{src}} enable-danmu danmu-btn'></video>

  <!--区域二：弹幕控制-->
  <view class='danmuArea'>
    <input type='text' placeholder='请输入弹幕内容' bindinput='getDanmu'></input>
    <button bindtap='sendDanmu'>发送弹幕</button>
  </view>
  <!--区域三：视频列表-->
  <view class='videoList'>
    <view class="videoBar"wx:for="{{List}}"wx:key="video{{index}}"data-url="{{item.videoUrl}}"bindtap="playVideo">
      <image src='/images/icon.png'></image>
      <text>{{item.title}}</text>
    </view>
  </view>
</view>

index.js代码修改如下：

function getRandomColor(){
  let rgb=[]
  for(let i=0;i<3;i++){
    let color=Math.floor(Math.random()*256).toString(16)
    color=color.length==1?'0'+color:color
    rgb.push(color)
  }
  return '#'+rgb.join('')
}
Page({


  /**
   * 页面的初始数据
   */
  data: {
    danmuTxt:'',
    danmuColor:'',
    List:[
      {
        id: '1001',
        title: '杨国宜先生口述校史实录',
        videoUrl: 'https://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
        },
        {
        id: '1002',
        title: '唐成伦先生口述校史实录',
        videoUrl: 'https://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
        },
        {
        id: '1003',
        title: '倪光明先生口述校史实录',
        videoUrl: 'https://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
        },
        {
        id: '1004',
        title: '吴仪兴先生口述校史实录',
        videoUrl: 'https://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
        },
    ]
    
  },
getDanmu:function(e){
  this.setData({
    danmuTxt:e.detail.value
  })
},
sendDanmu:function(e){
  let text=this.data.danmuTxt;
  this.videoCtx.sendDanmu({
    text:text,
    color:getRandomColor()

  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx=wx.createVideoContext('myvideo')

  },
playVideo:function(e){
  this.videoCtx.stop()
  this.setData({
    src:e.currentTarget.dataset.url
  })
  this.videoCtx.play()
},
})

实验完成

三、程序运行结果

最终可观看选择视频，也可以发送不同颜色的弹幕

四、问题总结与体会

本次实验跟着教程去做即可完成，难度不算很大，但在实验过程中需要注意一些细节，注意变量名的大小写等
在逻辑实现完成后，最开始的视频无法正常播放，经过检查后发现，wxml文件中区域一的设计video组件中没有写视频链接，导致视频无法正常播放，经修改后顺利完成实验