uni-app开发中的各种问题处理

特别注意：

　　※：在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开发中的各种问题处理

最新文章

热门文章