uniapp直播项目学习笔记1

uni-app中CSS适配与图标处理及配置技巧

最新推荐文章于 2025-07-28 18:12:27 发布

原创最新推荐文章于 2025-07-28 18:12:27 发布 · 371 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

直播类uniapp学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在uni-app开发中遇到的CSS适配问题，特别是当遇到nvue页面不支持某些CSS时，通过ifdef条件编译进行规避。同时，针对阿里图标在小程序中的使用，提供了引入ttf文件并使用unicode的方法。此外，讲解了midButton的配置及其在小程序中的限制，以及app-plus的H5配置方法，包括titleNView和menu按钮的设置。

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
&#xe620;

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"
           }]
         }
       }
      }
    }