uniapp直播项目学习笔记1

1.当开发中有vue和nvue页面时，编译过程中nvue不支持的CSS该如何进行引入？

  在引入时，进行一个ifndef判断，如果时nvue文件则不进行编译此css。

  /* 如果是nvue文件，因为不支持此CSS,故不进行编译 */
  /* #ifndef APP-PLUS-NVUE */
  @import url("common/icon.css")
  /* #endif */

2.阿里图标不支持解决方法

在小程序生命周期函数中进行定义

ttf文件可以使用本地引入或者在阿里图标库中找到外链

在使用时只支持unicode的方式

  onLaunch: function() {
      console.log('App Launch')
      const domModule = weex.requireModule('dom')
      domModule.addRule('fontFace', {
        'fontFamily': "iconfont",
        'src': "url('http://at.alicdn.com/t/font_1859985_7mxozsfdivb.ttf')"
      });
    },



//unicode


3.midbutton配置

  "midButton":{
      "iconPath":"./static/tabbar/min.png",
      "iconWidth":"60px", 
    //中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果
      "height":"65px"
    },

// 监听中间键点击事件
uni.onTabBarMidButtonTap()

设置后发现小程序无法显示，查文档发现目前仅app及h5支持。

midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap（callback），建议放在onlunch中进行监听。

4.app-plus进行H5配置

  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
       "app-plus": {
  // 设置标题菜单及按钮样式
         "titleNView":{
           "titleText":"直播",
           "titleAlign":"left",
           "titleColor":"#FFFFFF",
           "buttons":[{
             "type":"menu"
           }]
         }
       }
      }
    }