特别注意:

  ※:在components下的组件,图片路径用 /static/img/back.png  这样的根路径形式,不要用../static  或者 ../../static 的形式,不然很坑,有些平台不报错也不显示,有些找不到路径。

tips:防止弹窗遮罩时页面可滚动,在弹窗的外层view标签加上 @touchmove.stop.prevent=""

 

1、关于自定义导航栏中的刘海屏适配问题:

官方提供了一个CSS变量可以直接引用:

var(--status-bar-height)

该变量自动匹配设备平台状态栏高度

此变量可以用calc() 加上其他单位数值来使用

具体参数和说明:官方使用自定义导航栏注意事项

2、swiper中高度无法自适应时,采用动态获取节点赋值给外层swiper组件

uni.createSelectorQuery()后加.in(this)可以防止app端出错
<swiper :indicator-dots="true" :style="{height:listHeight+'px'}" :autoplay="false" :interval="3000" :duration="1000"></swiper>
  var _self;
export default {
data() {
return {
listHeight:215
}
},
onLoad() {
_self=this;
_self.getEleHeight('.swiper-item');
},
onShow() { },
methods: {
getEleHeight(list){
let info = uni.createSelectorQuery().in(_self).select(list);
     info.boundingClientRect(function(data) { //data - 各种参数
      if(data != null){
_self.listHeight = data.height;
}else{
setTimeout(function(){
_self.getEleHeight('.swiper-item');
},300)
}
   }).exec()
} }
}

3、横向scroll-view随子元素宽度自适应

关键在于给scroll-view的直接下一层view设置如下css:

  width:auto;

  display: inline-block;

  white-space: nowrap;

                <scroll-view scroll-x="true" class="scroll_box">
<view class="list">
<view class="item" v-for="(item,index) of 4" :key="index"> </view>
</view>
</scroll-view>
.scroll_box{
width: 100%;
height: auto;
} .list{
width: auto;
height: 100upx;
display: inline-block;
white-space: nowrap;
} .item{
width:320upx;
display: inline-block;
height: 100%;
}

4、uniapp配置原生导航栏的字体图标

例如配置阿里巴巴字体图标库里的图标:选择要用的图标加入购物车,然后点购物车中的下载代码,得到其中的iconfont.css和iconfont.ttf,拷贝到项目使用即可。

代码如下:text属性的值就是iconfont.css里面对应图标的content值(需‘/u’开头),对应官方文档:https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons

"app-plus":{
"titleNView":{
"buttons":[
{
"text": "\ue67e ",
"fontSrc": "/static/iconfont/iconfont.ttf",
"fontSize": "22px",
"width":"auto"
}
]
}
}

5、关于tabbar的一些情况

建议使用配置的tabbar,自定义的view没有缓存机制。

原生tabbar其实很多功能,参考读完以下知识点能实现大部分需求:

tabbar文档API方法:https://uniapp.dcloud.io/api/ui/tabbar

tabbar官网详解:https://uniapp.dcloud.io/collocation/pages?id=tabbar

6、保存图片到本地

真机亲测至少安卓有用,更多请查看:uni图片保存本地(app和微信小程序端)

                uni.showModal({
title: '提示',
content: '确定保存到相册吗',
success: function (res) {
if (res.confirm) { uni.downloadFile({
url: _self.ewmImg,//图片地址
success: (res) =>{
if (res.statusCode === 200){
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: "保存成功",
icon: "none"
});
},
fail: function() {
uni.showToast({
title: "保存失败",
icon: "none"
});
}
});
}
}
}) } else if (res.cancel) { }
}
});

7、app端动态修改原生导航栏信息

        // #ifdef APP-PLUS
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
var tn = currentWebview.getStyle().titleNView;
tn.buttons[0].text = "自定义 ";
tn.buttons[0].color ="#333333";
currentWebview.setStyle({
titleNView: tn
});
// #endif

8、官方富文本编辑器editor(目前除了视频音频等未实现大部分常用功能都得到了支持)

组件链接:https://uniapp.dcloud.io/component/editor

API链接:https://uniapp.dcloud.io/api/media/editor-context

注意事项:

保存富文本的html内容时,如果图片进行了手动伸缩大小,建议对标签内的图片width属性处理成百分比,默认是具体像素值,无法兼容不同屏幕宽度。

解析富文本内容可以用v-html 或者 rich-text 属性,个人推荐v-html,之前测试时rich-text不能解析带下划线的文字,也可以去插件市场找好的插件解析。

uni-app开发中的各种问题处理的更多相关文章

  1. app开发中如何利用sessionId来实现服务端与客户端保持回话

    app开发中如何利用sessionId来实现服务端与客户端保持回话 这个问题太过于常见,也过于简单,以至于大部分开发者根本没有关注过这个问题,我根据和我沟通的开发者中,总结出来常用的方法有以下几种: ...

  2. hybrid app开发中:苹果移动设备实用Meta标签

    hybrid app开发中:苹果移动设备实用Meta标签 “apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式 具体效果如下: status-bar- ...

  3. APP开发中,如何从UI设计上提升APP用户体验

    设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...

  4. IOS APP开发中View的几种实现方式

    xib文件有以下几个重要的属性: xib文件名 File’s Owner xib文件中的视图的Class xib文件中的视图的Outlet指向 File’s Owner 可以关联到某类,然后通过IBO ...

  5. 混合式APP开发中中间件方案Rexsee

    发现Rexsee时,他已经一年多没有更新过了,最后版本是2012年的. 他的实现思路是通过Android自带的Java - Javascript 桥机制,在WebView中的JavaScript同Ja ...

  6. Android app开发中用户协议(使用条款)文字自己主动换行

    用户协议(使用条款)文字自己主动换行处理 转载请注明出处:http://blog.csdn.net/u012301841/article/details/46648821 我们在开发app的时候.常常 ...

  7. APP开发中的弹窗体系,UI设计师不能忽视的地方

    1. 弹窗的定义 弹窗分为模态弹窗和非模态弹窗两种. 弹窗分类 模态弹窗:很容易打断用户的操作行为,用户必须回应,否则不能进行其他操作. 非模态弹窗:不会影响用户的操作,用户可以不对其进行回应,非模态 ...

  8. 在APP开发中,如何优雅的设计APP页面

    1.明确页面设计在整个产品设计中的位置 互联网产品设计的流程大致是:产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档.可以看到页面设计是处于整个流程的后期, ...

  9. ios app 开发中ipa重新签名步骤介绍-备

    作为一个app应用程序开发者,在app应用程序在苹果商店上架前总需要将安装包安装到ios机器上进行测试,这个时候我们就需要打包in house版本的ipa了,打包in house实际上是一个将ipa应 ...

  10. app开发中,前后端使用AES进行数据加密传输

    问题:当数据调用没有使用https加密时,app被抓包,接口暴露,此时可能导致被刷等安全问题 解决:1. 使用https传输 2. 在进行数据传输时进行手动加密(app端和后端定义统一的加密方式),这 ...

随机推荐

  1. pytorch框架对RTX 2080Ti RTX 3090的支持与性能测试

    时间点:202011-18 一.背景 2020年9月nvidia发布了30系列的显卡.比起20系列网上的评价是:性能翻倍,价格减半. 最近正好本人手上有RTX 2080Ti 和 RTX 3090,所以 ...

  2. stm32串口的配置方案

    最近老板要我去做控制方面的内容,所以买了一块正点原子的开发板,现在是研究了一下usart.c,函数的代码如下: void USART1_IRQHandler(void) { u8 Res; #ifde ...

  3. 关于点击弹框外部区域弹框关闭的交互处理(前端JS)

    常见需求场景 前端在处理交互的时候,经常遇到这样的场景,点击一个按钮,出现一个弹框,点击外部区域,弹框关闭. 解决方法 思路说明: 1.给弹框的div父级都加个类名,如: 2.在document绑定一 ...

  4. Linux 入侵痕迹清理技巧

    清除history历史命令记录 vim ~/.bash_history //编辑history记录文件,删除部分不想被保存的历史命令 history -c //清除当前用户的history命令记录 H ...

  5. FL studio系列教程(八):如何打开和新建FL Studio的文件

    FL Studio编曲软件中制作和编辑的音乐将存储在FL Studio的项目文件中.我们随时都可以打开这些对项目文件进行二次编辑和修改等等.操作的方法同很多软件都相同,但也有其独特的地方.下面就跟小编 ...

  6. 【模版】【P3806】点分治

    (7.17)早就想学点分治了--今天状态不太在线,眯一会写篇笔记来理理思路. ------------------------------------------------------------- ...

  7. mfc 双缓存

    CRect rect; //获取显示区域大小(该值为据对坐标,使用时需转换) GetWindowRect(rect); rect.SetRect(0, 0, rect.Width(), rect.He ...

  8. 初探Lerna

    1.简介 首先是关于Monorepo(一篇不错的介绍Monorepo的文章),它是管理项目代码的一种方式,主要手段是通过在一个项目仓库中管理多个模块/仓库包.而Multirepo是传统的仓库管理方法, ...

  9. Guava中EventBus分析

    EventBus 1. 什么是EventBus 总线(Bus)一般指计算机各种功能部件之间传送信息的公共通信干线,而EventBus则是事件源(publisher)向订阅方(subscriber)发送 ...

  10. 一条 sql 的执行过程详解

    写操作执行过程 如果这条sql是写操作(insert.update.delete),那么大致的过程如下,其中引擎层是属于 InnoDB 存储引擎的,因为InnoDB 是默认的存储引擎,也是主流的,所以 ...