小程序学习之旅----基础内容组件icon 、text 、rich-text、progress

Page({
  data: {
    motto: 'Hello World',
    nodes: [{
      name: 'h2',
      attrs: {
        class: 'h2_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!111'
      }]
    }]

    ,
    article:'<h2>我是一个内容</h2> <div>我是一个<strong>div</strong><img src="http://image08.71.net/image08/27/95/11/20/3f8e890b-2243-4054-a433-21c9621b3cb8.jpg" /></div>'
  }
})

  <icon type="warn" size="80" color="red"/>

<view>

相当于div
</view>


<text>
相当于sapn标签
</text>


<view></view>


<text selectable="true">
  相当于sapn标签
</text>



<view></view>



<text decode='true'>
  相当于&nbsp;sapn标签
</text>


<view></view>



<text decode='true'>
  相当于&nbsp;&nbsp;&nbsp;sapn标签
</text>

<view></view>


<text decode='true' space='true'>
  相当于&nbsp;&nbsp;&nbsp;sapn标签
</text>


<view>建议使用全角空格 或者css实现空格</view>
<text>
  相当于 　　　　sapn标签
</text>





----------------------------------------



<view>rich-text:Array </view>


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



<view>rich-text:string </view>


<rich-text nodes="{{article}}" bindtap="tap"></rich-text>


<view>WxParser </view>

<view> </view>

<view> </view>





----------------------------------------

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />


<view> 111</view>

<view> 11</view>

#myVideo{
  width: 100%;
  
}
.controls{

  height: 80rpx;
  line-height: 80rpx;
  position: absolute;
  bottom: 0px;

  background: rgba(0, 0, 0, 1);

  width: 100%;

  color: #fff;

  text-align: center;

  display:flex;

}

.play,.pause,.time {
  flex: 1;
  height: 100%;
}
.time {
  text-align: center;
  background-color: rgba(0, 0, 0, .5);
  color: white;
  height: 80rpx;
  line-height: 80rpx;
}
.img {
  width: 24px;
  height: 24px;
  margin: 5px auto;
}