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.关于页面跳转

此处需要注意的是 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>

样式未添加效果图：

样式添加效果图：

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

巴特西

bilibili小程序项目总结

最新文章

热门文章