开发uniapp nvue+小程序，我踩过的坑

最近接了个项目，采用uniapp的nvue开发安卓和ios端+小程序端，第一次开发nvue，对于css布局这块，还是踩了很多坑。以及一些uniapp的Api在nvue中也无法使用。文章中也收录了一些我在项目中使用的一些方法，比如富文本解析、App绑定微信等，大家可以参考下。

1、注意事项

1. nvue仅支持flex布局

// 默认布局为
display: flex;
flex-direction: column;

// 横向局部改为
flex-direction: row;
复制代码

2. class 进行绑定时只支持数组语法。

<template>
  // 支持的数组写法
  <text :class="[isError ? 'isError' : 'isRight']"></text>

  // 不支持对象写法
  <text :class="{isError}"></text>
</template>
复制代码

3. 只有标签可以设置字体大小，字体颜色

<template>
  // 可以修改字体大小和颜色
  <text class='text'>文本内容</text>

  // 不可以修改字体大小和颜色
  <view class='text'>文本内容</view>
</template>

<style>
.text {
  color: red;
  font-size: 28rpx;
}
</style>
复制代码

盒模型

• nvue盒模型的 box-sizing 默认为 border-box；
• 在 Android 平台，overflow只支持 hidden；
• 在 ios 上，overflow支持 hidden 和 visible，默认是 visible。

2、对CSS的限制

// 不支持的CSS
margin: auto;
display: ...;
content: ...;
animation: ...;
width: vw、%;
height: vh、%;
background-image: ...;

// 不支持的CSS属性
border-radius: 百分比无效;
复制代码

3、多端单行/多行文本溢出

// 文本溢出
@mixin line($lineNum, $width: 100%) {
  /* 一行时 */
  @if $lineNum == 1 {
    // App端
    /* #ifdef APP-PLUS */
    lines: 1; // 1或n
    text-overflow: ellipsis;
    /* #endif */

    // 其他端
    /* #ifndef APP-PLUS */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width: $width;
    /* #endif */
  } @else {
    /* 多行时 */
    
    // App端
    /* #ifdef APP-PLUS */
    lines: $lineNum; // 1或n
    text-overflow: ellipsis;
    /* #endif */

    // 其他端
    /* #ifndef APP-PLUS */
    overflow: hidden;
    -webkit-line-clamp: $lineNum;
    display: -webkit-box;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    /* #endif */
  }
}
复制代码

// 使用
@include line(1, 400rpx); // 单行
@include line(2); // 多行
复制代码

4、获取导航栏高度

// App导航栏高度
uni.getSystemInfoSync().safeArea.top + 'px'

// 小程序导航栏高度
uni.getMenuButtonBoundingClientRect().top + 10 + 'px'
复制代码

5、底部安全区域

const safeArea = uni.getSystemInfoSync().safeArea
const paddingBottom = safeArea.bottom - safeArea.height + 'rpx'
复制代码

6、修改导航栏电池、时间颜色

//只支持dark和light
// #ifdef APP-PLUS
plus.navigator.setStatusBarStyle('dark')
// #endif
复制代码

7、过渡动画

// 使用动画的CSS属性、动画时间、动画过渡效果、动画延迟时间
transition-property: transform;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay:0.1s;
复制代码

8、边框样式

border-top: 1px;
border-style: solid;
border-top-color: #eee;

// HBuilderX 3.1.0+ 开始支持简写样式
border-top: 1px solid #eee;
复制代码

9、nvue中不支持的uni-app API

// 1、动画
uni.createAnimation()

// 2、页面滚动
uni.pageScrollTo()

// 3、节点布局交互（交叉观察器）
uni.createIntersectionObserver()
复制代码

10、微信端底部安全区域

/* #ifndef APP-PLUS */
padding-bottom: calc(env(safe-area-inset-bottom));
/* #endif */
复制代码

11、nvue解析富文本(支持小程序)

App-nvue 和支付宝小程序不支持 HTML String 方式，仅支持直接使用节点列表即 Array 类型，需将 HTML String 转化为 nodes 数组，可使用 html-parser 转换。

<template>
  <rich-text :nodes='htmlNodes'/>  
</template>

<script>
  // nvue仅支持node节点渲染，所以要将HTML转换成node节点
  import parseHtml from './html-parse.js'
  export default {
    data () {
      return {
        htmlStr: `
          <h1>我的日记</h1>
          <p>今天天气真好</p>
          <p>适合出去玩</p>
        `,
        htmlNodes: []
      }
    },
    onLoad () {
      this.getContent()
    },
    methods: {
      getContent () {
        // 将HTML文本转换成node节点
        this.htmlNodes = parseHtml(this.htmlStr)
      }
    }
  }
</script>
复制代码

12、App端计算缓存和清理缓存

cacheSetting.js

// 计算缓存
export const computedCache = () => {
  return new Promise(resolve => {
    plus.cache.calculate((size) => {
      let cachSize = ''
      size = parseInt(size)
      if (size === 0) {
        cachSize = ''
      } else if (size < 1024) {
        cachSize = size + 'B'
      } else if (size < 1048576) {
        cachSize = (size / 1024).toFixed(2) + 'KB'
      } else if (size < 1073741824) {
        cachSize = (size / 1048576).toFixed(2) + 'MB'
      } else {
        cachSize = (size / 1073741824).toFixed(2) + 'GB'
      }
      resolve(cachSize)
    })
  })
}

// 清除缓存
export const clearCache = (cb) => {
  uni.showLoading({
    title: '清理中…'
  })
  const os = plus.os.name
  if (os === 'Android') {
    const main = plus.android.runtimeMainActivity()
    const sdRoot = main.getCacheDir()
    const files = plus.android.invoke(sdRoot, 'listFiles')
    const len = files.length
    for (let i = 0; i < len; i++) {
      const filePath = '' + files[i] // 没有找到合适的方法获取路径，这样写可以转成文件路径
      plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
        if (entry.isDirectory) {
          entry.removeRecursively(() => { // 递归删除其下的所有文件及子目录
            uni.showToast({
              title: '缓存清理完成',
              duration: 2000
            })
            cb()
          }, (e) => {
            console.log(e.message)
          })
        } else {
          entry.remove()
        }
      }, () => {
        console.log('文件路径读取失败')
      })
    }
  } else { // ios
    plus.cache.clear(() => {
      uni.showToast({
        title: '缓存清理完成',
        duration: 2000
      })
      cb()
    })
  }
}
复制代码

13、多端1px边框

1. 新建border.scss

// 默认边框色
$border: #e4e7ed;

// nvue端
/*
此处加上!important并是因为目前*.nvue页面编译到H5时，
App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效，
所以为了多端兼容，必须要加上!important
App端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现
*/
/* #ifdef APP-NVUE */
.border {
  border-width: 0.5px!important;
  border-color: $border!important; 
  border-style: solid;
}
.border-t {
  border-top-width: 0.5px!important; 
  border-color: $border!important; 
  border-top-style: solid;
}
.border-l {
  border-left-width: 0.5px!important; 
  border-color: $border!important; 
  border-left-style: solid;
}
.border-r {
  border-right-width: 0.5px!important; 
  border-color: $border!important; 
  border-right-style: solid;
}
.border-b {
  border-bottom-width: 0.5px!important; 
  border-color: $border!important; 
  border-bottom-style: solid;
}
.border-tb {
  border-top-width: 0.5px!important; 
  border-bottom-width: 0.5px!important; 
  border-color: $border!important; 
  border-top-style: solid;
  border-bottom-style: solid;
}
/* #endif */


// 非nvue端
/* #ifndef APP-NVUE */
.border,
.border-b,
.border-l,
.border-r,
.border-t,
.border-tb {
  position: relative;
}
.border-b:after,
.border-l:after,
.border-r:after,
.border-tb:after,
.border-t:after,
.border:after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5, 0.5);
  border: 0 solid $border;
  z-index: 1;
}
.border-t:after {
  border-top-width: 1px;
}
.border-l:after {
  border-left-width: 1px;
}
.border-r:after {
  border-right-width: 1px;
}
.border-b:after {
  border-bottom-width: 1px;
}
.border-tb:after {
  border-width: 1px 0;
}
.border:after {
  border-width: 1px;
}
/* #endif */
复制代码

2. uni.scss引入

@import './assets/style/border.scss';
复制代码

3. 组件内使用

// 1.作为类名使用
<template>
  <view class='border-tb'></view>
</template>
复制代码

// 2.作为选择器继承
<template>
  <view class='cell'></view>
</template>

<style lang='scss' scoped>
  .cell {
    @extend .border-tb;
  }
</style>
复制代码

14、App用户绑定微信/App微信登录

1. manifest.json配置

2. 代码

appBindWx () {
  const that = this
  uni.getProvider({
    service: 'oauth',
    success: (res) => {
      //支持微信、qq和微博等
      if (~res.provider.indexOf('weixin')) {
        uni.login({
          provider: 'weixin',
          success: ({authResult}) => {
            // 微信返回的数据见下方图片
            // 请求接口完成绑定
          },
          fail: (res) => {
            console.log('App微信获取用户信息失败', res)
          }
        })
      }
    }
  })
}
复制代码

3. 微信返回的数据