最近使用nvue开发手机app，踩了不少坑，虽然大部分都勉强解决了，办法十分邪道，也仍有部分问题无解，特此整理公布，以赠后来者。

打包相关

1.关于midbutton高度对齐的问题。

答： 因原生平台差异，对图片型的midbutton设置高度，在安卓和苹果端可能产生无法垂直对齐的问题，又因为pages.json并未提供条件编译功能，建议手动校准修改两端高度，分别打包安卓和苹果端。

有解的问题

1.关于nvue的v-show能力。

答： 因 nvue 渲染层采用 weex，底层对元素的渲染机制，容易造成切换元素时的抖动现象。插件市场有相关 weex-v-show 插件，或者使用动态设置宽度和 opacity 达到类似效果。

2.关于input组件动态设置placeholder样式。

答： input组件可通过设置placeholder-style和placeholder-class属性设置placeholder的样式，但仅初次设置有效，无法动态改变，weex文档里提供了placeholder-color属性，可以通过css动态设置，改变placeholder的颜色；但是nvue编译器会对此属性抛出警告，在意者可通过写成行内样式进行规避。

3.关于overflow属性切换。

答： 因安卓端只支持overflow:hidden，此属性几乎无用，但weex文档里提到过只有同时满足以下四个条件，父view才会裁剪子view：
1.父view是 div, a, cell, refresh 或 loading
2.系统版本是 Android 4.3 或更高。
3.系统版本不是 Andorid 7.0。
4.父 view 没有 background-image 属性或系统版本是 Android 5.0 或更高。
这也意味着，似乎可以通过打破上述的任一条件限制，以此间接实现overflow:visible的效果？此想法仅笔者猜测，暂未实践。

4.关于subNvue的相关问题。

答： 可参考此回答，https://ask.dcloud.net.cn/article/41670?notification_id-1540939__item_id-65695。

5.关于swipera-action组件。

答： uni-ui提供的swipera-action在app端表现不佳，经常有异常抖动的问题，笔者在实践中采用了fui-swipe-action，当clickClose属性设置为false时，体验良好，基本满足需求。如果clickClose设置为true，也会出现和uni-ui类似的问题，猜测系bindingX的编写问题。

6.关于swiper组件。

答： 因底层限制，且nvue几乎不再维护，swiper相关的问题几乎无解，如设置动画时长或关闭动画等，笔者只能提出两种未经实践的想法，第一种是修改uniapp源码，手动添加weex的forbid-slide-animation属性；第二种即通过bindingX，自己实现一个swiper组件。

7.关于同行text设置不同样式的问题。

答： 因nvue不支持text嵌套，且仅有text组件能设置文字样式，此问题几乎无解，如果你没有文字换行的需求，可通过拆分文本，塞入不同的text并设置不同的样式；如果你需要换行，笔者的实践办法是更换为rich-text组件，数组型的nodes属性可以完美解决此类问题，虽然编写元素数组比较麻烦，但好在有效。

8.关于list和waterfall的长列表问题。

答： 正常使用几乎不存在性能问题，唯一的优化方向，可能就是当cell包含图片时，考虑优化图片大小减少内存消耗，另外cell组件的delete-animation="default"和insert-animation="default"需要明写，否则不会有默认的动画效果。

关于长列表内部的refresh和loading组件，refresh组件可以正常使用，几乎不存在兼容性问题，但loading组件需要分情况处理：

1. 对于ios端，当列表元素长度大于1屏时，可以正常使用loading组件，当列表元素不足1屏时，会出现loading组件停留在列表顶部的Bug，建议在此种情况下，使用列表内置的header组件模拟loading（注意把header组件放置在列表底部），达到类似效果，当元素超过1屏后，再切换。
2. 对于安卓端普通长列表，可以正常使用loading组件。
3. 对于安卓端嵌套长列表，loading组件无法正常渲染，此种情况同样建议采用header组件模拟loading（注意把header组件放置在列表底部），基本可以达到比较良好的效果。

另外注意，无论是refresh还是Loading，其内置的loading-indicator组件都不建议使用，因其动画效果几乎不存在，考虑使用第三方图标替代。

9.底部输入区和键盘弹出的无缝动画协调问题。

答： 大部分App都会有留言或评论功能，往往需要从底部弹出自定义的留言区域，然而手机软键盘也会同时弹出，如何协同两者弹出时的动画效果，也需要分情况考虑，经观察，大部分app在ios端往往可以做到比较完美的效果，即软键盘从底部弹出时，留言区会顺势被顶起，整个过程流畅且无缝，观感十分好；而安卓端则没那么完美，软键盘和留言区的弹出动画往往是分先后完成的。

关于实际编码中如何解决这个问题，如果是原生编码，可以通过获取软键盘的属性来解决，uniapp做不到这点，只能曲线救国：

1. 在ios端，考虑以subNvue来渲染弹出层，手动focus弹出层中的输入组件，并将adjust-position设置为true，弹出的键盘会把整个subNvue弹起，整个过程流畅无缝，效果很好，类似的办法也可以考虑使用透明的新页面，不过如何控制路由和如何隐藏都是个问题，subNvue会简单许多，另外第一次弹出的时候会稍有卡顿，这一点在其余app上也经常出现， 属于正常现象，后续的弹出就很正常了。
2. 在安卓端，如上面所说的，暂时没有无缝弹出的办法，只能通过dom控制动画去尽量贴合键盘的弹起速度，关于这点不必花大力气去模拟贴合，毕竟做不到完美，能用即可。

10.关于安卓机进入新页面，image组件会出现闪白问题。

答： 因weex底层渲染机制，此问题无法直接解决，哪怕更换成Img组件一样会有此问题，只能通过两种方式缓解：

1. 添加骨架图，等图片触发load事件后再显示。
2. 在能计算出图片出现的位置和大小的情况下，可以考虑使用plus.nativeObj.view预先渲染图片，经笔者测试，此方式不会有延迟和闪白问题，结合startAnimation方法，几乎可以做到和页面进入动画无缝贴合，等到页面完全进入后，再关闭view即可。

11.关于如何在nvue绘制三角形元素。

答： 传统web绘制三角形的办法基于border做文章，但nvue支持的css属性有限，无法直接解决，笔者的办法是渲染两个元素，将底层元素旋转，用上层元素遮盖底层元素，以此来达到模拟三角形的效果。

暂时无解的问题

1.image 组件 mode 设置为 aspectFit 的时候，如果给 Image 加上 border-radius，安卓端图片显示会出现异常拉伸，此问题系框架底层bug，目前无解决办法。

2.原生配置的tabbar，点击切换tabbar后如何触发动画特效问题，笔者有两者思路，一种是全局只有一个页面，即单页面富应用，nvue自行渲染底部tabbar，不过这种方案应该只适用小型项目；另一种则是结合gif图片，笔者看到网络上有提到，gif可设置只循环一次，具体效果暂未实践，留待后续验证。

背景：nvue 页面，设置 input 的 placeholder-style 属性不生效。

字体大小 使用 px（像素）

APP 端，属性使用小驼峰命名法:

<input placeholder="请输入" placeholder-style="fontSize: 12px; lineHeight: 12px; color: #666;" />

微信小程序端，属性保持原有写法：

<input placeholder="请输入" placeholder-style="font-size: 12px; line-height: 12px; color: #666;" />

临时解决方案：

<uni-popup type="center">    
  <view class='wrapper'>    
    【这里放弹窗内容】    
  </view>    
</uni-popup>

.wrapper {    
  position: fixed;    
  top: 0;    
  right: 0;    
  bottom: 0;    
  left: 0;    
  z-index: 999999999;    

  justify-content: center;    
  align-items: center;    
}

给父元素添加 justify-content: flex-start; 或者 align-items: flex-start;就可以了, 如何还是不行可以是用下面的方法

使用rich-text来解决, text标签是可以换行的, 但是没有办法撑开高度

// 数组

let arr = [

{

label: "账单编号",

value: [

{

name: "div",

attrs: {

style: "fontSize: 16px;color: #333333;line-height: 26px;",

},

text: _this.payInfo.checkInId,

},

],

},

]

// html

<view

class="similar-info-item"

v-for="(item, index) in _this.baseInfo"

key="index" >
<text class="label">{{ item.label }}：</text>
<view class="con">
<rich-text :nodes="item.value"></rich-text>
</view>
</view>
// css
.similar-info-item {
min-height: 26rpx;
display: flex;
flex-direction: row;
padding-left: 12px;
margin-bottom: 4px;
.label {
width: 90px;
font-size: 16px;
color: #333333;
line-height: 26px;
}
.con {
flex: 1;
line-height: 26rpx;
display: flex;
justify-content: center;
}
}

nvue 中 uni-list 的loadmore不执行。
研究了 一天，发现龟儿 ，
1、
uni-list 的组件中，有写事件代码，但是没有绑定到 list组件中
loadMore(e) {
this.$emit('scrolltolower');
},
既然这样，我就给他帮上。我就复制了 loadMore 粘贴到 组件上，于是
<list :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop"
loadmoreoffset="15" @loadMore="loadMore" >
坑来了，这样加上还是没有。

2、一遍一遍又看 了文档，开始觉得这球玩意是不是真的不支持。也许是因为这样，所以才没有添加的，但是list得文档说是支持的。
于是，一个字一个字看文档。最后发现 loadmore的这个m是小写的，于是就成功过了。真tm坑了我一天时间。

this.livePusher.toggleTorch()

免费开发安卓 ios 原生插件，刚学完练练手，有需要的留言（太难的就算了）

总结就是：用到绘制海报类似的地方(drawImage)不要用nvue。

1. nvue 不支持普通的canvas api绘制。
2. 然后找到了gcanvas这个东西，在iOS上还行，可以用。
3. 然后到Android上一测，拉垮了。报错：exception function:gcanvas setBackGround for android view, exception:WX_REND大概原因就是gcanvas在安卓上绘制图像很容易各种问题，gcanvas是个第三方团队产品，uniapp官方在社区也曾说不推荐使用gcanvas。确实支持度不好。
4. 没办法，gcanvas不能用在安卓上，只能再看看其他办法。然后采用了nvue+webview的方案，nvue使用webview加载hybrid本地html，准备用web canvas来绘制，一通操作猛如虎，嗯，安卓上能正常了
5. 然后到iOS上一看，又拉跨了，canvas.toDataURL时报错了：the operation is insecure。翻译一下就是资源跨域问题。还奇怪呢，本地html引用的都是相对路径的本地资源，咋还会跨域，一通查一通找，发现了官方给出的解释：wkwebview环境本地资源也算跨域。好吧，没办法，那继续看看有没有办法解决吧。后面在社区里看了下发现有两种办法 1.plus.io 相关api读取为本地路径。2.本地资源转成base64。一通操作一通调试后没走通，大概原因就是1.nvue webview环境下，不能用plus api。2.本地资源转base64，大概方法也是走的原生xhr或者plus转换，但是原生xhr还有canvas.toDataURL在这种情况都是有跨域问题，plus同原因1一样，也没有支持。
6. 最后，不纠结了，掉头吧。然后页面转为vue文件渲染。然后就ok了。

nvue这个东西官方也不维护了，虽然确实性能比vue强，但真不适合用纯nvue来做项目，巨多坑。还是见仁见智吧，合适场景下vue+nvue结合使用。

nvue+vue画布绘制并导出图片的解决方案【插件】

// nvue 目前的国际化方案需要在每个页面单独引入uni-i18n，后续框架会抹平差异，抹平差异后和 vue 页面一样只需要在 main.js 中引入  
<script>  
  import {  
    initVueI18n  
  } from '@dcloudio/uni-i18n'  

  // const messages = {} 此处内容省略，和 vue 全局引入的写法一致  

  const { t } = initVueI18n(messages)  

  export default {  
    data() {  
      return {  
      }  
    }  
  }  
</script>  

这是官网推荐的方案,需要在每个nvue都有这段代码

今天发现我们其实可以在app.vue的onLaunch中把t挂载到uni下，类似 uni.$locale = t去挂载，然后在nvue页面内直接使用 uni.$locale('common.edit')

下面是app.vue的示例代码

<script>  
    import {  
        initVueI18n  
    } from '@dcloudio/uni-i18n';  
    import messages from '@/locale';  
    const {  
        t  
    } = initVueI18n(messages);  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
            uni.$locale = t  
            uni.$language = uni.getLocale()  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        },  
    }  
</script>  

<style lang="scss">  
</style>

要用的来复制粘贴吧！对于 luanqing-popup-dialog 这个 nvue 气泡菜单组件的修改

• 因为插件市场上太乱了，很多组件都存在问题，这次用了一个 luanqing-popup-dialog 组件也是不能直接使用的，所以进行了魔改，现在能够直接使用了，自己用太无聊了，暂时不想发什么插件市场了，直接复制粘贴出来给大家用吧，以后有空了我再发插件市场

无论是 vue还是nvue 可以直接使用，严格遵循了 nvue 的写法，nvue写法是完全可以向下vue兼容的，所以直接放心用吧

截图url：https://upload-images.jianshu.io/upload_images/10916716-c850836fdd143e5a.png

• 源码直接看附件吧，这里放在代码段里预览出来效果乱七八糟的

• 效果截图图片不知为啥uniapp文章里显示不出来，直接点击链接自己看吧

• popup-menu.vue

全局搜索??运算符，使用||替代??运算符，或更改为其他方式进行运算

之前以为在uniapp中使用滚动只能用scroll-view 后面发现nvue可以使用scroller组件来代替 scroll-view

具体参数uniapp官方 没用，得参考weex文档。

以下是使用代码

        <scroller class="scroll-view" scroll-direction="horizontal" :show-scrollbar="false">  
            <fui-data-tag :options="options" :radius="16" activeBgColor="#226ADC" border-color="#226ADC" active-color="#fff"></fui-data-tag>  
        </scroller>