小程序的扩展能力的扩展组件tabs的使用

1.模仿逗拍小程序，想要实现的效果是：当点击导航栏的时候，切换界面，左右拖拽内容框的时候，切换界面并且导航栏跟着变化。

2.根据需求，考虑使用微信小程序开发文档扩展能力的扩展组件tabs，来实现该效果。
3.先要安装对应的依赖跟包

1. 进入到项目目录里，在命令行cmd中输入指令：npm init -y
2. 下载依赖，输入命令：npm i miniprogram-sm-crypto --production
   
   3.勾选使用npm模块
   4.在工具里点击构建npm
   5.在该项目下安装tabs,
   输入指令：npm i @miniprogram-component-plus/tabs --save
   安装完成，在工具里点击构建npm
   6.在需要使用tabs组件的.json文件中引入，
   
   如果出现，mp-tabs找不到该页面的话，可以把miniprogram_npm文件删除，重新在工具栏中构建npm
   7.将官方代码的tabs.wxml跟tabs.js复制到本地页面中，结果如下：（需要自己写样式）
   

8.github地址是https://github.com/twcmeizi/miniprogram.git
9.项目过程中，遇到的问题是：

• tabs组件里的swiper高度问题，swiper的默认高度是150px,如果需要将内容放到红线包围的区域，需要通过

 data: {
    windowHeight: ''
  },
  onLoad() {
    wx.getSystemInfo({
      success(res) {
        windowHeight = res.windowHeight
      }
    })
    this.setData({
      windowHeight
    })
  }
在miniprogram_npm/@miniprogram-component-plus/tabs/index里面，通过内联样式将style="height:{{windowHeight}}px;"，实现swiper的高度铺满界面。
  <swiper class="{{swiperClass}}"  current="{{activeTab}}" style="height:{{windowHeight}}px;"

• 内容已经铺满整个界面后，剩余内容不能实现滚动显示，这需要搭配scroll-view组件进行实现

参考链接

1.微信小程序没有找到可以构建的NPM包，请确认需要参与构建的npm在miniprogramroot目录
 解决链接：https://www.jianshu.com/p/fc650d925094

2.npm引入小程序官方WeUI组件库weui-miniprogram
解决链接:
https://blog.csdn.net/weixin_43922774/article/details/100535452

3.微信 scroll-view 里面的内容被遮挡的问题
https://www.cnblogs.com/lisiyang/p/10246405.html

4.微信小程序解决多个视频播放的问题https://blog.csdn.net/Zhooson/article/details/78412735

5.微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
https://blog.csdn.net/Miss_liangrm/article/details/103779498

6.微信小程序为video设置第一帧为缩略图
https://blog.csdn.net/zhoulib__/article/details/107176747

7.微信小程序中背景图片需要使用base64格式
在线转换base64 :http://tool.chinaz.com/tools/imgtobase/