免费试用

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

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-09
安徽小程序游戏开发
小程序游戏是一种基于微信小程序平台开发的游戏应用,其应用范围非常广泛,可以运用在商业、教育、娱乐等领域中。小程序游戏通常采用HTML5语言和CSS3技术编写,同时支持多个平台,如微信、QQ等。下面我将为大家介绍一下安徽小程序游戏开发的原理及详细过程。1.开
2023-08-09
安宁哪有开发小程序的公司
安宁市是位于云南省中部的一个县级市,它是一个风景优美、交通便利、资源丰富的城市。如今,小程序已经成为十分火爆的一个领域,许多企业和个人都在抓住这个机会,在小程序领域探索着更广阔的商业机会。那么,在安宁市,有哪些开发小程序的公司呢?下面我将为大家介绍一下。1
2023-08-09
winform 微信小程序开发
Winform 是一种应用程序开发框架,可以为 Windows 应用程序提供开发工具和技术支持。微信小程序是一种由微信推出的轻量级应用,支持多种开发语言,包含微信的所有功能,可以在不离开微信的情况下使用。Winform 微信小程序开发将 Winform 和
2023-08-09
taro开发小程序新增页面
Taro 是一个基于 React 的开发框架,它可以同时开发多端应用程序,包括小程序、H5、RN 等等。Taro 的官方文档中提供了如何使用 Taro 开发小程序的详细指南,本文将针对 Taro 如何新增页面进行介绍。在 Taro 中新增页面非常简单,只需
2023-08-09
intellij打包exe
在这个教程中,我将向您介绍如何使用IntelliJ IDEA和Launch4j将Java项目打包成一个Windows可执行文件(.exe)。IntelliJ IDEA是一个流行的Java集成开发环境(IDE),而Launch4j是一个开源工具,用于将Jav
2023-05-26
微信附近小程序开发工具
微信附近的小程序是一种非常流行的轻应用程序,它是在微信生态系统中开发并运行的基于JavaScript、HTML和CSS技术的应用程序。这些应用程序类似于原生应用程序,但没有下载和安装的过程,用户可以直接通过微信扫描二维码或搜索小程序名称来访问。小程序通过微
2023-05-26
微信开发工具小程序中的超链接
在微信开发工具中,小程序的超链接一般都是通过``标签来实现的,我们可以通过在页面中添加``标签,并设置`url`属性来实现页面跳转的效果,类似于网页中的``标签。``标签可以被用于在小程序中实现类似于网页中的超链接的效果。``标签会在小程序中生成一个类似于
2023-05-26
微信小程序开发工具配置账号
微信小程序是一款快速开发的应用程序,可以运行在微信客户端内部,通过这个平台,用户可以快速构建简单的小程序应用并发布到微信上不同的用户。微信小程序开发有一些必须的初始化操作,其中一项就是配置账号。微信小程序开发工具是一个非常有用的工具,它可以帮助开发者快速创
2023-05-26
微信小程序开发工具注册不了账号
微信小程序是一种新型的应用程序,它具有快速、方便和便于推广等优点。开发小程序需要使用微信小程序开发工具,但是有时候会遇到注册不了账号的情况。这个问题可能出现在以下几个方面。1. 网络问题注册微信小程序开发者账号需要连接互联网,如果网络不稳定或者连接速度慢,
2023-05-26
良心推荐这款小程序开发工具
小程序开发是近年来非常火爆的技术领域之一,而小程序开发工具则成为了小程序开发过程中非常重要的一部分。今天我要向大家介绍一款非常不错的小程序开发工具——微信开发者工具。微信开发者工具是一款专门为微信小程序开发者打造的开发工具,可以在电脑上进行小程序开发,不仅
2023-05-26
吉林小程序开发工具有哪些品牌
吉林小程序开发工具品牌有很多,但目前比较知名的有阿里云小程序开发平台和微信小程序开发工具。阿里云小程序开发平台主要提供了一站式的小程序开发服务,在这里开发者可以进行小程序的全部开发流程,包括小程序的创建、维护、发布、统计、推广等。该平台提供的开发者工具可以
2023-05-22