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>

樣式未添加效果圖：

 

樣式添加效果圖：

 

本次學習總結完畢，不足之處請指正