北京华网天下

uni-app 小程序开发踩坑问题及技巧汇总

2024-06-22

来源：网络整理

写在开头：开发中遇到问题，先看相关文档，微信兼容就看微信文档，支付宝也一样，90%的问题都已经写在文档里了，只是你没注意到而已。

本文档是关于我最近在开发uni-app小程序时遇到的一些问题，它并不是一个入门文档，而是一个指南。

开发技巧和陷阱，这里有一个持续更新的文档，方便以后遇到问题时参考。此外，很多基本的API或

问题我就不在这里贴了，直接看官方文档比看这些文档要简单直接多了，下面是链接：

如果文档有用的话，离开之前请点个赞吧~

默认环境是微信小程序，很多问题应该是通用的，支付宝和H5相关的问题会在文章最后单独列出。

持续更新中...

配合我的另一篇文档《#Vue基础知识速查手册》一起使用效果更佳~~

1. 什么是uni-app

uni-app 是一个使用 Vue.js（新）开发所有前端应用程序的框架。

优势：

还有其他类似的产品，但我认为Taro更好一些。

2、

只要组件安装在项目目录下，并且符合/组件名/组件名.vue 目录结构，就可以直接在页面中使用，无需引用，也无需注册。

文档：

益处：

3. 如何在uni-app中使用npm库

Vue-cli 项目

像平常一样使用它，并使用 es6 来引用它。npm i --> xxx from "xxxx"

项目

不能直接使用，需要npm i xxxx到某个文件夹然后拖到项目根目录下才可以通过或者es6在文件中引入

4. 缺陷文档和用户体验 (其他人的文档) 5. 生命周期：

应用程序生命周期

1.：uni-app初始化完成时触发（全局只触发一次）

2. ：uni-app启动时，或者从后台进入前台时 //监听用户进入小程序

3. :当uni-app由前台进入后台时 //监听用户离开小程序

4. ：uni-app报错时触发

5.：监控nvue页面发送的数据

组件生命周期

(监听页面加载) (监听页面显示) (监听页面初始渲染完成) (监听页面隐藏) :监听页面卸载:监听窗口大小变化:监听用户下拉动作，一般用于下拉刷新 6.跨组件通信方式

文档：

触发的事件都是App全局级别的，跨任何组件、页面、nvue、vue等使用时一定要及时销毁事件监听器，比如在页面中用uni.on注册监听器，在中用uni.of注册监听器，在页面中用uni.on注册监听器，在页面中用uni.off移除，或者对于一次性事件，直接使用uni.$once监听即可。 7.条件编译

文档：

/* 只在微信环境下执行 */ // #ifdef MP-WEIXIN uni.login({ xxxxx }); // #endif /* 除了微信其他环境下都执行 */ // #ifndef MP-WEIXIN uni.login({ xxxxx }); // #endif

床单：

值有效条件

3.2.0+ 详细信息（新）

APP-PLUS

应用程序

APP-PLUS-NVUE 或 APP-NVUE

应用程序

MP-

微信小程序

MP-

支付宝小程序

MP-

百度小程序

MP-

字节跳动小程序

MP-LARK

飞书小程序

QQ群

QQ小程序

MP-

快手小程序

陸陸

京东小程序

MP-360

微信小程序支付模块教程_uniapp 微信小程序支付_wx小程序支付

360小程序

议员

微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序

快应用通用（含联盟、华为）

快应用联盟

快捷应用华为

8. 全局变量和函数

1.在app.vue文件中配置

用于组件

const app = getApp(); const gbobalData = app.gbobalData //...

2.main.js文件，全局挂载变量或函数（与vue配置全局函数方法相同）

喜欢：

import Vue from 'vue'; import cloneDeep form '@/public/utils/lodash/cloneDeep.js'; Vue.prototype.$clone = cloneDeep;

9. 分包

由于小程序有大小和资源加载限制，各小程序平台都提供了分包的方式来优化小程序的下载和启动速度。

演示

"pages":[], // 分包配置 "subPackages": [ { "root": "pages_tickets", "pages": [ { "path": "subpage1/index", "style": { "navigationBarTitleText": "哈哈哈哈哈哈", "enablePullDownRefresh": false, } }, { "path": "subpage2/index", "style": { "navigationBarTitleText": "嘻嘻嘻嘻嘻", "enablePullDownRefresh": false, } }, ] } ]

10. uni- 滚动穿透 || 小程序任意弹窗滚动穿透解决方案

核心原理就是弹窗出现，将最外层页面的高度设置为可见窗口高度，如果超出高度，则隐藏弹窗，恢复高度。

最外层父组件设置属性

、弹出窗口显示，该属性设置为，弹出窗口显示，该属性设置为，表示当前整个屏幕大小数据新属性，控件样式

class = "page" :style ="{ overflow: showPopup ? 'hidden' : 'visible', height: showPopup ? '100vh' : auto }" > 这是最外层父级组件

流行音乐

11. -view 不会触发@和@

-视图容器必须具有一定的大小（百分比方法也会失败），否则@和@事件将不会被触发。

解决方案：

computed: { scrollH: function () { let sys = uni.getSystemInfoSync(); let winWidth = sys.windowWidth; let winrate = 750 / winWidth; let winHeight = parseInt(sys.windowHeight * winrate); return winHeight; } },

12. 复印功能

copyBtn() { uni.setClipboardData({ data: this.copyContent, success: function (res) { uni.getClipboardData({ success: function (res) { wx.showToast({ title: '已复制到剪贴板', }); }, }); }, }); },