微信小程序开发笔记⑥——rich-text（富文本框）组件、progress（进度条）组件和video（视频）组件

rich-text

富文本框，可以直接写html，并且会进行解释

官方描述
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

主要通过nodes属性传进去我们需要写的东西，一般可以直接传递一串html文本，如下

<rich-text nodes="{{html}}"></rich-text>

data: {
  html:"<h1>标签</h1>",
}

在这里插入图片描述
还可以传递json格式的数据，通过规定的语法输出我们需要的html文本，具体格式可以参考手册，示例如下

<rich-text nodes="{{nodes}}"></rich-text>

data: {
  html:"<h1>标签</h1>",
  nodes:[{
    name:"h4",
    attrs:{
      style:"color:red;"
    },
    children:[
      {
        type:"text",
        text:"节点列表"
      }
    ]
  }]
},

在这里插入图片描述

progress

进度条组件

官方描述
https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

下面是一个简单的进度条

<view>进度条</view>
<view>
  <progress percent="100" show-info stroke-width='12' active></progress>
</view>

在这里插入图片描述
下面是一个模拟下载进度条的示例

<view>下载进度</view>
<view>
  <progress percent="{{percent}}" show-info stroke-width='12' active></progress>
</view>
<button type="primary" size="mini" bindtap="download">开始下载</button>

data: {
  percent:0
},

download:function(){
  this.setData({
    percent:100
  })
},

在这里插入图片描述

视频组件

video标签可以实现简单的视频呈现

官方描述
https://developers.weixin.qq.com/miniprogram/dev/component/video.html

下面是一个简单的自带弹幕的视频

<video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
class="videoCls" controls loop danmu-btn danmu-list="{{danmuArray}}" enable-danmu>
</video>

data: {
  danmuArray:[
    {
      text:"测试弹幕1",
      color:'#f00',
      time:1 
    },
    {
      text:"测试弹幕2",
      color:'green',
      time:3
    }
  ]
},

在这里插入图片描述
下面实现了发送弹幕的模拟示例

<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
class="videoCls" controls loop danmu-btn danmu-list="{{danmuArray}}" enable-danmu>
</video>

<view>弹幕内容:</view>
<input placeholder="弹幕内容" bindinput="inputVal"></input>
<button size="mini" bindtap="sendDanmu">发布弹幕</button>

同样还是需要获得我们的video对象，方法和音频对象类似
在这里插入图片描述
对于input文本内容的获取还需要借助bindinput事件，最后通过video对象的sendDanmu方法发送弹幕

/**
 * input输入框获取值
 */
inputVal:function(event){
  inputVla = event.detail.value;
},

sendDanmu:function(){
  this.myVideo.sendDanmu({
    text:inputVla,
    color:"red"
  })
},

在这里插入图片描述
效果如下

来源：CSDN

作者：ww0peo

链接：https://blog.csdn.net/qq_35262405/article/details/104026113

标签

微信开发