css

1.position: absolute;

图片定位做背景 android手机用top : -32rpx 负值不生效

ios可以

2.关于自定义navbar 背景设置透明问题

样式添加 background-color="transparent" :fixed="true"

内容体用position: absolute; 不能用fixed 会造成navbar 被遮盖

iconfont使用规则

iconfont中要下载.ttf格式的包
如果需要把包引入项目必须进行base64转换否则无法引入
使用网络地址

配置

app中定义css

@font-face { font-family: 'iconfont'; src: url('at.alicdn.com/t/font_8658…') format('truetype'); }

nvue页面

var domModule = weex.requireModule('dom'); domModule.addRule('fontFace', { 'fontFamily': "fontFamilyName", 'src': "url('https://...')" })

建议定义方法适合全局调用

图标使用

在页面中如下

<text class="new-icon bottom-course-icon-right"></text>

使用网络地址方式建议每次修改后新的包使用新的包名这样可以替换缓存在app中的包

目前存在未解决问题

使用网络地址无法封装成组件调用,因为图标参数必须以上方式展示,如果用动态传参会转换成字符串格式则无法正常渲染

首次app进入需要下载网络包,会造成图标无法正常展示

官方文章 : uniapp.dcloud.io/frame?id=%e…

同层级使用定位

z-index无效果

需要把根据遮罩的层级排序

Js语法问题

在onunload中无法调用uni的api操作例如:存储本地缓存等

nvue页面开发

1.list列表的滚动使用

在nvue中用做列表滚动性能优于sroll-view
list中的子原生必须是cell,
如果需要使用循环数据必须在cell上做循环,而不是在一个cell中包裹view循环,

因为如果只有要一个cell 的话会造成滚动条错误渲染且会造成list无法监听滚动到底部等函数

list必须设置高度

在dug模式下发现所有的nvue页面默认最外层有一个sroll-view包裹,

在官方的文档中有提及当sroll-view 内调用list 时必须有一个高度否则会无法正常滚动

总结几种在nvue页面中能定义高度的方法

1.定位方法

适用全屏的list

position: absolute; left: 0; right: 0; top: 0;

2.flex弹性布局

适用格局相对简单的页面

flex:1

3.使用uni.getSystemInfo获取屏幕高度计数

适用页面层级比较复杂

uni.getSystemInfo({ success: res => { this.statusBarHeight = res.statusBarHeight;//状态栏 this.phoneHeight = res.windowHeight; //可用高度 } });

注意:

nvue 中不支持%和vh写法

uni中封装的loadMore 和内置的配合list使用可用实现下拉列表,上拉刷新等交互

官方文章：uniapp.dcloud.io/component/l…

首页数据获取问题

为了更好的渲染首页，nvue首页初始化情况下无法获取app内的数据。如果在之后需要获取app数据需要如下调用

const app = getApp({ allowDefault: true });

各个机型兼容问题

1.在适配iphonex机型,使用如下样式

padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);

测试中发现1+手机也存在相同安全区域的问题,且上面样式不生效 ;

全局操作

强制刷新页面

let pages = getCurrentPages(); 
    var page = pages[pages.length - 1];
    var currentWebview = page.$getAppWebview(); //获取当前webview页面的函数 
    if (page == undefined || page == null) return;
    currentWebview.reload();

tip：强制刷新页面时会先触发该页面的onunload（）周期

若有函数在此运行要设置判断

app端闪退问题汇总

1.页面业务繁琐竟然采用隐藏方式少使用v-if

原因:

v-if会造成页面重新渲染,消耗手机内存,造成部分性能较差的手机内存溢出导致闪退

解决办法:

tip:在nvue中display无效所以无法使用,

1.可以设置height :0 的形式来隐藏当前需要展示的内容

注意:在ios 及android系统中存在渲染差异

当吧height设置成0 时android 能正常隐藏

ios内部组件会溢出展示所以最好是需要配合overflow:hidden一起使用可能存在组件中

版本热更新规则

当前版本无添加新的文件
当前版本基座即hbuider版本相同
配置中应用版本号要+1

uni开发app--催吐师成长经验

css

配置