免费试用

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

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开发微信小程序时容易遇到的坑点,希望对大家有所帮助。


相关知识:
百度智能小程序开发平台上线
百度智能小程序开发平台是百度推出的一项开发平台,旨在帮助开发者快速、高效地构建和发布小程序。小程序是一种轻量级应用,通过手机等设备的操作系统平台直接运行,无需下载和安装,用户可以在不离开当前应用的情况下使用各种功能。百度智能小程序开发平台提供了丰富的开发工
2023-08-23
百度小程序开发运营服务
百度小程序是一种基于百度生态系统的轻量级应用,可以在百度APP内部或者手机桌面上运行,为用户提供了便捷的服务。百度小程序开发运营服务则是百度提供的一套开发工具和服务,帮助开发者快速搭建和运营小程序,实现业务的快速发展。百度小程序开发运营服务的原理可以简单概
2023-08-23
百度小程序开发运营公司
百度小程序是基于百度生态系统的一种应用形式,提供了一种轻量级、快速上线、易于传播的开发模式。百度小程序可以在百度搜索、百度App、百度智能音箱等平台上进行访问和使用,为用户提供更��便捷的服务。百度小程序的开发使用了类似于微信小程序的组件化开发方式,通过使
2023-08-23
安阳开发小程序费用多少
小程序是一种轻量级的应用程序,可以在微信等应用内直接运行,提供了便捷性和易用性,已经成为了企业推广的新宠。近年来,小程序的市场需求不断增长,很多企业也都开始关注这一领域。那么,安阳开发小程序费用多少呢?接下来,就让我们来探讨一下。一、安阳开发小程序费用有哪
2023-08-09
安徽餐饮小程序定制开发费用标准
随着移动互联网的发展,小程序已经逐渐成为一个新兴的移动应用程序形式。对于餐饮行业来说,小程序也成为了一个非常有吸引力的选择,其可以降低开发和维护成本,同时也能够提供更好的用户体验。安徽餐饮小程序的定制开发费用标准主要受到如下因素的影响:1.小程序的功能和需
2023-08-09
安徽k歌小程序开发多少钱
K歌小程序是一款集唱歌、录音、发布等功能于一身的应用程序。在K歌小程序中,用户可以选择自己喜欢的歌曲进行演唱,并可以录制自己的声音,再上传到平台上与其他人分享。近年来,随着移动互联网普及程度的不断提升,K歌小程序也越来越受欢迎。那么,安徽K歌小程序开发需要
2023-08-09
thinkphp小程序开发教程外包
ThinkPHP是一个开源的PHP应用程序框架,它以MVC模式设计,具有代码简洁,易于维护,扩展性强等特点。在移动互联网时代,小程序已经成为了一个非常流行的平台,因为其体积小、速度快、功能丰富等特点,已经成为了不少创业者和开发者的首选工具。在这篇文章中,我
2023-08-09
qq电商小程序开发
QQ电商小程序是一种基于QQ平台的电商购物小程序。它是在微信小程序的基础上进行了改进和优化,并结合了QQ社交功能,供用户在线购物。本文将介绍QQ电商小程序的开发原理以及详细的介绍。一、QQ电商小程序开发原理QQ电商小程序的开发原理是基于QQ Android
2023-08-09
buy拼团小程序商城开发
拼团小程序商城是一种新型的电商模式,它既满足了消费者对于实惠的需求,又促进了商品的销售量。现在,越来越多的企业开始把目光瞄准拼团小程序商城这一块市场,并大力发展,想要开发成功一个拼团小程序商城就需要掌握其原理和技巧。一、原理介绍拼团小程序商城是基于微信公众
2023-08-09
app开发微信小程序开发公司
移动端的普及使得APP应用得到了前所未有的发展,而微信小程序的出现更是让APP市场的竞争更加紧密。为了跟上时代的潮流,越来越多公司开始进入APP开发和微信小程序开发领域,成为了现在热门的职业方向之一。本文将介绍APP开发和微信小程序开发的原理和流程。 一、
2023-08-09
小程序开发工具找不到
小程序开发工具是用于开发和调试小程序的工具。它提供了一系列功能,如代码编辑、调试、预览和上传等,使开发者可以快速、高效地开发小程序。不过有时候用户在使用小程序开发工具时会遇到找不到开发工具的情况,下面我们将详细介绍这种情况的原因和解决方法。原因:1. 操作
2023-05-26
小程序开发工具上线
小程序开发工具是一款开发小程序的桌面应用程序,可以帮助开发者快速创建、开发和调试微信小程序。本文将介绍小程序开发工具的基本原理以及使用方法。一、小程序开发工具的原理小程序开发工具是基于微信小程序开发文档中提供的开发接口和调试工具开发的一款桌面应用程序。它与
2023-05-26