uniapp开发时可能会遇到的问题及解决方法,uniapp避坑指南!

简介: uniapp开发时可能会遇到的问题及解决方法,uniapp避坑指南!

一、uni-app小程序中xxx代码依赖分析忽略

新的任务发生了这个问题,一启动这个大红色看着十分碍眼,好在报错提示也给了解决办法,如下图所示

"ignoreDevUnusedFiles": false,
    "ignoreUploadUnusedFiles": false,

二、uni-app弹窗列表滚动, 弹框下面的内容也跟随滚动

弹窗组件代码,需要在最外层的view中加入 @touchmove.stop.prevent="moveHandle",就可以解决这个问题了

三、uni-app小程序正常自定义组件不生效

这是一个离奇的问题,正常自定义组件在页面引入,注册,使用,但是编译后居然没有显示出来而且也没有报其他的错误,这到底是为什么呢, 我也不知道…… 这个hbuilder 肯定不能逮着我一个人坑对不对,查了下,别人也遇到了这个问题,

总结下来有以下大致两种解决方法

1.每次引用新建组件,把编译器关闭后再重启

2.新建组件后,再新建一个页面,重新编译(亲测有效),新建的组件就生效了,就是那么离奇

如果有更好的方法,欢迎提出,再不想用上方这两个蠢蠢的办法了

四、uni-app  popup 弹出层底部空隙问题

如图所示,我遇到的问题是底部弹出层有一个间隙的问题,我看了下应该是样式问题, 是它自带了一个padding-bottom,于是我看了源码,这个问题就解决了

解决方法:

首先找到Popup的源码

因为设置的是底部弹出层,就着重看关于底部弹出的样式

五、 uni-app小程序自定义导航栏后iOS页面可上下滑动问题解决方案

提起这个我就想,真好啊,又是一个长知识的机会!!!(内心真实想法—把用apple的人的都抓起来) ,在安卓就好好的,偏偏它就会出问题,请看以下问题:

问题描述:

在开发小程序的过程中,自定义了导航栏,但是发现在ios中页面整体可上下移动,造成体验极差。

解决方案:

“disableScroll”:true,//ios禁止页面整体上下滑动

 
 {
    "path": "home/index",
    "style": {
     "navigationStyle": "custom",//关闭原生导航栏
     "disableScroll":true,//ios禁止页面整体上下滑动
   }
 },

问题描述:

如下图所示:在安卓真机和开发着工具中都是正常,但是到了大苹果(我不用大苹果我还不知道它还能左滑滑右滑滑~~~)

这是一个样式问题,所以我们看下原本的页面样式代码;

解决方案:

当时我不知道这个问题是怎么回事,后来请教了同事后仔细想想其实这个问题也很好解决,

起初设置的宽度是100%,但是下方又设置了padding内边距, 而盒子宽度默认的计算方式是content-box,下图有详细解释

所以在对应的html页面结构中的父元素中,给它的样式加上这样一句,就可以解决了

六、uni-app中的分享二维码以及保存到相册

这个应该不算是一个难点,这是因为我之前没有做过,觉得很新鲜,所以分享在这里,要实现的功能呢长这个样子,以弹窗的形式出现用户可以选择转发给好友或者是保存相册后从相册转发

1.页面结构,因为是弹窗的形式所以选用了uni-popup

<uni-popup ref="popup" animation mask-background-color="rgba(0,0,0,0.2)" @change="popChange">
      <view class="popup-container">
        <view class="inner">
          <view class="item" @click="sharePictrue">
            <text class="iconfont icon-fenxiangxiaochengxu" style="margin-right: 40rpx;"></text>
            <text class="text btn">转发给好友</text>
            <!-- <button size="mini" id="sharePictrue" style="border:none;" plain open-type="share" class="text btn">转发给好友</button> -->
            <text class="iconfont icon-xiangyou1" style="float:right"></text>
          </view>
          <view class="underline"></view>
          <view class="item" @click="saveToAlbum">
            <text class="iconfont icon-xiangcexuanze" style="margin-right: 40rpx;"></text>
            <text class="text">保存相册</text>
            <!-- <text class="iconfont icon-xiangyou1" style="float:right"></text> -->
          </view>
          <view class="underline"></view>
          <view class="cancel" @click="close">取消</view>
        </view>
      </view>
    </uni-popup>

2. js部分 ——保存相册

保存相册的前提是你有这个图片,(那之前肯定是要获取这个图片,例如通过调用接口获取图片)

uni.getFileSystemManager().writeFile   写文件

详解地址FileSystemManager.writeFile(Object object) | 微信开放文档

uni.saveImageToPhotosAlbum   保存图片到系统相册

3. 分享二维码

wx.showShareImageMenu()

sharePictrue() {
        wx.showShareImageMenu({
          path: '../../static/ph_fit_qrcode.png' ||
            this.qrsrc
        })
      },

总结

以上呢,就是我今天要分享的内容,希望可以帮助到屏幕前的你,喜欢还请 收藏+关注 哦~

相关文章
|
1月前
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
1月前
|
开发框架 监控 物联网
【Uniapp 专栏】探索 Uniapp 开发的更高级应用场景
【5月更文挑战第17天】Uniapp作为跨平台开发框架,在物联网、实时数据监控、企业级应用、地理定位和教育、电商领域展现出广泛应用潜力。通过蓝牙连接智能家居,实时展示数据变化,构建复杂业务流程,定位服务及互动学习平台,它提供了创新解决方案。随着技术发展,Uniapp将继续为开发者创造更多机遇和挑战,推动移动应用领域的前进。
【Uniapp 专栏】探索 Uniapp 开发的更高级应用场景
|
14天前
|
监控 数据管理 Java
智慧城管源码,基于微服务+java+springboot+vue+uniapp开发的城管综合执法系统源码
智慧城管执法系统利用微服务和Java技术提升城市管理水平,涵盖事件处理、投诉、处罚等功能,包含PC和APP源码。系统支持执法APP,便于领导随时随地审批,具备文书模板、地图定位、法规查询等功能。此外,执法办案系统通过监控视频分析事件,实现案件全程闭环管理,包括组织、案件、信用和执法队伍管理,以及法规库等基础支撑。系统旨在优化流程,提高数据管理和效率。
智慧城管源码,基于微服务+java+springboot+vue+uniapp开发的城管综合执法系统源码
|
16天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
32 8
|
1月前
|
缓存 数据处理 UED
【Uniapp 专栏】Uniapp 开发中的疑难问题解决与进阶策略
【5月更文挑战第17天】在 Uniapp 开发中,解决页面间数据传递、网络请求异常、屏幕适配及性能优化等问题至关重要。利用路由参数传递复杂数据,如`uni.navigateTo`和`JSON.stringify`;处理网络请求异常时,添加错误处理机制增强健壮性;使用响应式设计和缓存策略优化布局和性能。针对组件问题,需排查依赖和配置,而平台差异则需定制化处理。通过不断学习和实践,提升开发技能,确保项目成功实施。
【Uniapp 专栏】Uniapp 开发中的疑难问题解决与进阶策略
【Uniapp 专栏】迈向 Uniapp 开发高手之路的进阶技巧
【5月更文挑战第16天】掌握Uniapp进阶技巧,包括深入理解组件化开发,如创建可复用的按钮组件;运用Vuex进行状态管理,便于全局状态操作;善用Flex布局实现灵活页面设计;合理使用请求库并设置拦截器处理错误和优化请求;同时关注性能优化,提升开发效率和应用质量。
【Uniapp 专栏】迈向 Uniapp 开发高手之路的进阶技巧
|
1月前
|
Android开发 UED 开发者
【Uniapp 专栏】比较 Uniapp 与原生开发的差异与适用场景
【5月更文挑战第15天】UniApp与原生开发各有千秋。UniApp以高效跨平台著称,一套代码覆盖多平台,降低开发成本,适合快速开发简单应用。原生开发则提供优秀性能和用户体验,适合对性能要求高的复杂应用。两者在功能实现和维护上各有优势,开发者需根据项目需求权衡选择。随着技术进步,两者都在不断优化,为移动应用开发带来新机遇。
【Uniapp 专栏】比较 Uniapp 与原生开发的差异与适用场景
|
17天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
14 1
|
21天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的校园二手交易平台的设计与开发附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的校园二手交易平台的设计与开发附带文章和源代码设计说明文档ppt
40 2
|
22天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的文化遗产的保护与旅游开发的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的文化遗产的保护与旅游开发的详细设计和实现(源码+lw+部署文档+讲解等)