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