bilibili小程序项目总结

1.关于mock的使用

第一步：先到Mock官网（http://mockjs.com/）上面熟悉一下基本用法

第一步：具体使用实例：

• 下载wxMock.js和mock.js文件 下载地址：https://github.com/webx32/WxMock
• 参考git上的使用方法，使用的时候值得注意的点：需要在使用模拟接口的js文件中用require引入对应的接口：

如：接口文件：home.js

/**视频详情获取接口 */
var Mock=require('./WxMock.js')
var Random = Mock.Random;
var videoDetail = Mock.mock('https://tangxinyu.com/videoDetail',{
  "codeText": "请求成功",
  "code": 200,
  "data": {
    videoInfo: {
      author:"阿兰若",
      commentcount:12435,
      date:"2019-11-07",
      id:233,
      playCount:"24.7万",
      videoSrc:Random.image('200X150',Random.color(),"视频详情"),
      videoTitle:"世界上最美的童话镇，你要去看吗？请带我……"
    }
  }
})
export default {
  navList,
  swiperList,
  videoList,
  videoDetail
}

　　使用接口文件：index.js

var videoDetail=require('../../utils/home.js')
  getCurentVideo(){
    var that=this;
    wx.request({
      url: 'https://tangxinyu.com/videoDetail',
      success(res){
        if(res.code==200){
          that.setData({
            videoInfo: res.data.videoInfo
          })
        }
        console.log("res",res)
      }
    })
  },

2.关于页面跳转

<navigator url="../detail/detail?id={{index}}" class="video_item" wx:for="{{videoLists}}" wx:key="{{index}}">

此处需要注意的是 url属性中的传参方式：url="../detail/detail?id={{index}}"

其他使用可参考官网：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

3.关于css使用总结：

• 导航栏：对于块级元素想要使其显示成一行最简单可以使用：display:inline-block,不用使用display:flex。如：

  <style>
        .item{
            display: inline-block;
            padding: 0 20px;
        }
    </style>
    <div>
       <div class="item">条目1</div>
       <div class="item">条目2</div>
       <div class="item">条目3</div>
       <div class="item">条目4</div>
    </div>

不加样式效果图：

加样式后效果图：

 

其他：white-space: nowrap; 不因空格换行

• 视频列表：弹性布局列表使用

.video_wrap{ 
  display: flex; /**1.设置弹性盒子*/
  /* 换行 */
  flex-wrap: wrap;/**2.超出行宽自动换行*/
  padding: 10rpx;
  /* 空隙显示在中间 */
  justify-content: space-between;/**3.空隙中间显示*/
}
.video_item{
  width: 48%;/**可通过调整子元素宽度占比来控制一行显示几个子元素*/
  margin-top: 20rpx
}

示例：

    <style>
        .wrap{
         display: flex;
         width: 400px;
         justify-content: space-between;
         flex-wrap: wrap;
         border: 1px solid rgb(51, 142, 247)
         /* overflow: hidden */
        }
        .item{
            background-color: #4c4c;
            border:1px solid #4c4c4c;
            height: 100px;
            width: 40%;
            margin-top: 20px
        }
    </style>
    
        <div class="wrap">
       <div class="item">item1</div>
       <div class="item">item2</div>
       <div class="item">item3</div>
       <div class="item">item4</div>
    </div>

未添加123点样式图：

 

效果图：

 

• relative+absolute定位的使用：使父元素具有盒子特性，盒子内部样式不受外部影响

示例代码：

        .wrap {
            display: flex;
            width: 400px;
            justify-content: space-between;
            flex-wrap: wrap;
            border: 1px solid rgb(51, 142, 247)
        }

        .item {
            background-color: #4c4c;
            border: 1px solid #4c4c4c;
            height: 100px;
            width: 40%;
            margin-top: 20px;
            position: relative
        }

        .item_head {
            position: absolute;
            top: 0;
            text-align: center;
            width: 100%
        }

        .item_foot {
            position: absolute;
            bottom: 0;
            text-align: center;
            width: 100%
        }
        
    <div class="wrap">
        <div class="item">
            <div class="item_head">盒子头部文字</div>
            <div class="item_foot">盒子底部文字</div>
        </div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
    </div>

未添加样式效果图：

 

添加样式后效果图：

 

此项目中使用场景：在广告图片上显示一些短的信息详情

 

• 文字显示省略隐藏问题

.video_title{
  font-size: 30rpx;
  display: -webkit-box;
  white-space: normal;
  /* 超出显示…… */
  text-overflow: ellipsis;
  word-wrap: break-word;
  /* 为了实现文字超出设置行显示……该效果，它需要组合其他外来的WebKit属性。常见结合属性：
   display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
   -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
   text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。 */
   /* 不兼容IE和firefox */
  /* 限制文本显示行数 */
  -webkit-line-clamp: 2;
  /*垂直排列子元素 兼容safari\opera\chrome */
  -webkit-box-orient: vertical;
  /* 兼容firefox */
  -moz-box-orient: vertical;
}

演示示例：

           .item1 {
            width: 300px;
            display: -webkit-box;
            border: 1px solid #3f3f;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal;
            /*垂直排列子元素 兼容safari\opera\chrome */
            -webkit-box-orient: vertical;
            /* 兼容firefox */
            -moz-box-orient: vertical;
            /* 超出部分隐藏 */
            overflow: hidden
        }

        .item2 {
            width: 300px;
            /* 兼容firefox */
            display:-moz-box;
            display: -webkit-box;
            border: 1px solid #3f3f;
            margin-top: 10px;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal;
            /*垂直排列子元素 兼容safari\opera\chrome */
            -webkit-box-orient: vertical;
            /* 兼容firefox */
            -moz-box-orient: vertical;
            /* 超出部分隐藏 */
            overflow: hidden
        }
     <div class="item1">
        一行文本：长江、尼罗河、亚马孙河、多瑙河昼夜不息、奔腾向前，尽管会出现一些回头浪，尽管会遇到很多险滩暗礁，但大江大河奔腾向前的势头是谁也阻挡不了的。
    </div>
    <div class="item2">
        二行文本：长江、尼罗河、亚马孙河、多瑙河昼夜不息、奔腾向前，尽管会出现一些回头浪，尽管会遇到很多险滩暗礁 ，但大江大河奔腾向前的势头是谁也阻挡不了的。
    </div>

未加样式图：

 

加上样式图：

 

但是由于兼容性问题，不推荐使用该方法实现多行文字超出显示……问题

解决办法：

       div {
            position: relative;
            /* 可通过max-height和line-height控制显示行数 */
            line-height: 20px;
            max-height: 40px;
            /*注意： 超出一定要隐藏 */
            overflow: hidden;
        }

        div::after {
            content: "...";
            position: absolute;
            bottom: 0;
            right: 0;
            padding-left: 40px;
            /* 使用backgorund属性用渐变背景色遮盖行尾部分字体，用以...代替 */
            background: -webkit-linear-gradient(left, transparent, #fff 55%);
            background: -o-linear-gradient(right, transparent, #fff 55%);
            background: -moz-linear-gradient(right, transparent, #fff 55%);
            background: linear-gradient(to right, transparent, #fff 55%);
        }

linear-gradient的兼容性：

 

效果图：

• display:flex+flex:num的使用，使用场景：横排或竖排(用flex-direction调整)时使父元素中的子元素按比例平分父元素所占空间

示例代码：

      .wrap {
            width: 400px;
            border: 1px solid #4c4c4c;
            display: flex
        }
        .item1{
            background-color: #d3ec77;
            flex: 1
        }
        .item2{
            background-color: #dc83ee;
            flex: 3
        }
        .item3{
            background-color: #f3c853;
            flex: 4
        }
        
     <div class="wrap">
        <div class="item1">1份</div>
        <div class="item2">3份</div>
        <div class="item3">4份</div>
    </div>

样式未添加效果图：

 

样式添加效果图：

 

本次学习总结完毕，不足之处请指正