免费试用

跨平台小程序在线开发工具,用做网页的技术做小程序,兼容微信、支付宝、抖音、快手、百度等主流小程序平台!

uniapp开发的微信小程序坑

Uniapp是目前比较流行的一种跨平台开发框架,它可以使用一套代码基于Vue框架开发出同时支持多个平台的应用程序,包括H5、微信小程序、支付宝小程序、APP等。尽管Uniapp有很多优点,但是在开发微信小程序时也存在一些坑点,下面是对其中几个坑点的原理分析以及详细介绍。

一、rpx与px单位的转换

微信小程序使用的单位为rpx,但是在Uniapp中使用的是px单位,这就需要将px转换为rpx单位。Uniapp提供了一个名为“flexible”的插件,它会自动计算出当前设备的rpx单位的换算比例。需要在入口组件中引入该插件并且配置设计稿尺寸,如下:

```javascript

import '@/common/js/flexible.js';

// 设计稿尺寸

uni.setMatchedLayoutSize({

width: 750,

height: 1334

});

```

在App.vue中设置基准字体大小为50px,其实际代码如下:

```css

html {

font-size: calc(100vw / 3.75);

font-family: PingFang-SC-Regular, sans-serif;

}

```

具体实现原理是通过JS动态计算出当前设备的dpr(设备像素比)和设备宽度,然后将页面的font-size设置为width/dpr/10,进而实现了px到rpx的转换。

二、页面跳转传参

在微信小程序中,可以通过wx.navigateTo()实现页面跳转并传递参数。但是在Uniapp中,需要使用uni.navigateTo()跳转页面,但是该方法并没有原生的options属性用于传递参数。如何实现页面跳转并传递参数呢?具体有以下几种方法:

1、通过URL传参,比如在跳转页面时将参数拼接到URL上,如页面跳转到detail页面并传递id为1的参数:

```javascript

uni.navigateTo({

url: '/pages/detail/detail?id=1'

})

```

在detail页面中,可以通过以下代码获取该参数:

```javascript

this.$route.params.id // 输出1

```

2、通过uni.navigateBack()返回时传递参数,需要在前一页面中设置onUnload方法,在离开页面时保存要传递的参数,并在返回时通过uni.navigateBack()方法的参数传递回去。

具体实现可以参考以下代码:

```javascript

// 前一页页面中

onUnload: function() {

if (this.isChanged) {

uni.setStorageSync('isChanged', true);

}

}

// 本页中,返回上一页时触发

uni.navigateBack({delta : 1, params: {isChanged: uni.getStorageSync('isChanged')}});

```

在上一页中,可以通过以下代码获取该参数:

```javascript

onShow: function() {

var pages = getCurrentPages();

var prevPage = pages[pages.length - 2];

if (prevPage){

if (prevPage.$route.params.isChanged) {

// do something

}

}

}

```

三、微信小程序Swiper组件的高度问题

微信小程序的Swiper组件可以自适应容器高度,但是在转化为Uniapp开发时,容器高度就变成了0。这是因为在微信小程序中,Swiper组件的高度是在wx.createSelectorQuery()中计算的,而在Uniapp中wx.createSelectorQuery()则被替换为uni.createSelectorQuery(),导致了高度计算不正确,解决方法有以下两种:

1、使用uni.createIntersectionObserver()监听Swiper组件上下滚动,获取到Swiper的实时高度:

首先需要在Swiper组件外面嵌套一个view,同时将view的height设置为100%。然后通过uni.createIntersectionObserver()监听view的位置变化,获取到当前view的高度,即Swiper组件的高度,进而解决问题。

2、在swiper组件中加入样式white-space: normal,如:

```css

.swiper-slide {

white-space: normal;

}

```

通过这个方法,swiper组件高度也会自适应父容器。

四、onShareAppMessage无法在组件中直接使用

在微信小程序中,在组件中使用onShareAppMessage可以实现转发功能,而在Uniapp中无法在组件中直接使用该方法,需要通过`this.$parent.onShareAppMessage()`调用父页面的onShareAppMessage方法。

五、微信小程序navigator跳转新建页面在Uniapp中无法打开

在微信小程序中,在navigator组件中添加属性target="_blank"可以打开一个新页面,但是在Uniapp中,添加该属性后页面依然是在同一个页面中打开的。解决方法也很简单,只需要在navigator组件上包裹一个view标签即可,如:

```html

跳转新页面

```

以上就是Uniapp开发微信小程序时容易遇到的坑点,希望对大家有所帮助。


相关知识:
百度小程序开发用什么软件
百度小程序是一种可以在百度App中运行的轻量级应用程序,它结合了Web应用和原生应用的优点,提供了丰富的功能和用户体验。如果你想要开发百度小程序,你需要使用百度小程序开发工具,它是一个专门为百度小程序开发者设计的集成开发环境(IDE)。百度小程序开发工具是
2023-08-23
阿里巴巴怎么成为小程序开发者呢
阿里巴巴可以成为小程序开发者的方法有两种,第一种是通过支付宝小程序开发平台,第二种是通过阿里云小程序开发平台,以下是详细介绍:1. 支付宝小程序开发平台支付宝小程序是基于支付宝开放平台的一种应用形态,用户可在支付宝内直接使用小程序,无需下载安装。成为支付宝
2023-08-09
安卓小程序开发平台
随着移动互联网的发展,移动端的需求也在逐渐增加。为了满足用户的需求,开发者们不断推出新的应用程序,例如微信小程序、支付宝小程序等。那么,什么是安卓小程序开发平台呢?它有哪些原理和特点呢?本文将从这些方面对安卓小程序开发平台进行介绍。安卓小程序开发平台是一种
2023-08-09
vb开发小程序之外置程序打开
外置程序打开是指在使用VB开发小程序时,利用系统自带的运行外置程序的功能,将外置程序与小程序进行关联。这种方法可以使得我们在开发小程序时,更加便捷地调用外置程序提供的功能,达到更好的辅助效果。 实现方式如下:1. 创建一个VB项目。2. 在VB的tool
2023-08-09
uniapp开发微信小程序有什么缺点
uniapp是一种跨平台的开发框架,可以实现一套代码同时运行在多个平台上,其中包括iOS、Android、H5以及微信小程序等。uniapp开发微信小程序具有诸多优点,如方便快捷、跨平台等等。然而,uniapp开发微信小程序的同时,也存在着一些缺点和不足。
2023-08-09
opencart微信小程序开发
OpenCart是一种开源的电子商务平台,它提供了一个用于在线购物的完整解决方案。随着移动互联网的普及,微信小程序逐渐成为商家们布置电子商务项目的一种重要途径。OpenCart微信小程序开发通过使用现有的OpenCart代码库来构建微信小程序,消除了从头开
2023-08-09
go开发小程序sdk
Go语言(又称 Golang)是Google设计开发的一种开源编程语言,简洁、高效、并行和安全。在近些年来,随着国内外程序员对Go语言的接受度不断提高,越来越多互联网公司和项目团队开始采用Go语言进行开发。同时,小程序在移动开发中的重要性也逐渐被人们认识到
2023-08-09
jar打包exe异常
在Java开发中,通常需要将项目打包成JAR (Java ARchive) 文件,以便于分发和运行。JAR 文件是一种ZIP格式的压缩文件,内部包含了相关的类文件和资源文件。然而,有时我们也希望建立一个单独的可执行文件(如 EXE 文件),便于在没有安装J
2023-05-26
insetup生成exe
Inno Setup是一款非常流行的免费、开源的Windows程序安装程序制作软件。它的主要特点是简单易用,功能强大,支持多语言等。Inno Setup可以将你的程序文件、数据文件、配置文件、注册表设置等打包为一个可执行程序(.exe),方便用户进行一键安
2023-05-26
微信小程序开发工具运行项目有哪些
微信小程序开发工具是一款集成了代码编辑、调试、预览和上传等功能的开发工具,极大地提高了小程序开发的效率和速度。在运行小程序项目时,微信小程序开发工具会涉及到以下几个步骤:1. 编写代码并保存在微信小程序开发工具中,我们可以使用类似于网页开发的技术来编写小程
2023-05-26
微信小程序开发工具视频教程
微信小程序是一种轻量级的应用程序,用户可以在微信内部直接使用,无需下载安装。由于其轻巧、快速、便捷的特点,它受到越来越多开发者的关注和喜爱。那么,如何进行微信小程序开发呢?本篇文章将介绍微信小程序开发工具视频教程。首先,我们需要下载微信开发者工具。此工具是
2023-05-26
腾讯视频小程序开发工具使用
腾讯视频小程序开发工具是一款专门为开发腾讯视频小程序而设计的开发工具。该工具可以为开发者提供完善的开发环境,并整合了一系列开发必备的功能,包括代码编辑器、调试器、组件列表、API文档等等。开发者可以通过该工具快速地开发自己的小程序,开发效率非常高。腾讯视频
2023-05-26