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
        })
      },

总结

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

相关文章
|
26天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
30天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0
|
1月前
|
iOS开发 开发者
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
143 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
|
1月前
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
177 18
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
2月前
|
前端开发 数据库 UED
uniapp开发,前后端分离的陪玩系统优势,陪玩app功能特点,线上聊天线下陪玩,只要4800
前后端分离的陪玩系统将前端(用户界面)和后端(服务器逻辑)分开开发,前者负责页面渲染与用户交互,后者处理数据并提供接口。该架构提高开发效率、优化用户体验、增强可扩展性和稳定性,降低维护成本,提升安全性。玩家可发布陪玩需求,陪玩人员发布服务信息,支持在线聊天、预约及线下陪玩功能,满足多样化需求。[演示链接](https://www.51duoke.cn/games/?id=7)
|
2月前
|
开发框架 前端开发 JavaScript
uniapp开发鸿蒙,是前端新出路吗?
相信不少前端从业者一听uniapp支持开发鸿蒙Next后非常振奋。猫林老师作为7年前端er也是非常激动,第一时间体验了下。在这里也给大家分享一下我的看法
94 17
|
3月前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
3月前
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
105 0
|
4月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
177 1
uniapp一个人开发APP关键步骤和考虑因素

热门文章

最新文章