免费试用

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

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


相关知识:
安徽自助洗车小程序开发方案设计
安徽自助洗车小程序的开发方案需要涉及到前端、后端、数据库及其它相关技术,下面将分别进行详细介绍。一、前端自助洗车小程序的前端主要为用户提供操作界面和交互体验。开发自助洗车小程序前端需要掌握以下技术:1.小程序框架:安徽自助洗车小程序采用微信小程序框架进行开
2023-08-09
安徽微信小程序开发平台电话号码
安徽微信小程序开发平台电话号码是指安徽地区的微信小程序开发平台机构提供给用户的联系电话号码。微信小程序是一种新型的互联网应用形态,可与微信公众号结合使用,具有线上支付、社交分享等功能,使得用户可以直接在微信中使用小程序,而不需要下载和安装,极大地提高了用户
2023-08-09
安卓系统的小程序开发
安卓系统的小程序是一种基于WebView技术实现的轻量级应用程序,它能够在安卓系统上运行,并对用户提供一些基本的功能。小程序与传统安卓应用不同的是,它没有独立的应用图标,而是通过特定的入口来访问。本文将详细介绍安卓系统的小程序开发原理。一、小程序开发工具安
2023-08-09
vue开发小程序复选框
Vue.js是一种流行的JavaScript框架,它可以用于构建现代、交互式的Web界面。小程序是一种专门为移动端开发的应用程序,它非常适合移动用户。在这篇文章中,我们将介绍如何使用Vue.js构建一个复选框,以及如何在小程序中使用它。首先,让我们看一下V
2023-08-09
swift开发微信小程序
微信小程序是微信推出的一种轻量级应用,可以在不安装应用的情况下直接使用。Swift语言是苹果公司开发的一种新型编程语言,在移动应用开发领域广受欢迎。本文将介绍如何使用Swift开发微信小程序,并探讨其原理。一、开发环境准备开发微信小程序需要以下工具:1.
2023-08-09
springboot能开发微信小程序吗
SpringBoot是一种非常流行的Java全栈开发框架,它可以快速搭建Web应用程序。微信小程序是一种类似于iOS或Android应用程序的移动应用程序。因为它是基于Web技术构建的,所以我们可以使用SpringBoot来开发微信小程序。微信小程序入门在
2023-08-09
app开发 微信小程序开发
APP 开发和微信小程序开发是当前互联网行业非常火热的两种开发方式。APP(Application)是一种移动应用程序,可以在各种操作系统上运行,比如 IOS、Android 等;微信小程序则是一种新兴的前端开发方式,是基于微信平台的一种轻量级应用程序,可
2023-08-09
idl生成exe
IDL(Interactive Data Language)是一种高级的数据分析和可视化编程环境。IDL被广泛应用于科学、工程、地球科学等领域的数据处理。在多数情况下,IDL的开发者们运行他们的程序在IDL环境中。然而,有时候将一个IDL程序封装成单独的可
2023-05-26
搜索小程序二次开发工具下载
搜索小程序二次开发工具是一种非常重要的工具,它能够帮助开发者快速地定位小程序的问题,解决小程序的难题,以及对小程序进行二次开发。接下来,本文将详细介绍搜索小程序二次开发工具的原理和下载方法。搜索小程序二次开发工具的原理搜索小程序二次开发工具的原理就是抓包。
2023-05-26
江苏知识付费类小程序开发工具下载
随着现代人们对于知识的需求不断提高,知识付费成为了一种越来越受欢迎的方式。江苏知识付费类小程序开发工具便应运而生。本文将为您介绍江苏知识付费类小程序开发工具的原理以及详细介绍。一、江苏知识付费类小程序开发工具的原理江苏知识付费类小程序开发工具的原理是基于微
2023-05-26
海南智能硬件类小程序开发工具招聘信息
随着互联网技术的不断发展,智能硬件日益普及,海南地区也不例外。为满足市场需求,一些企业开始研发智能硬件类小程序,并寻求招聘相关开发人员。下面将介绍海南智能硬件类小程序开发工具。一、概述目前,智能硬件的市场份额越来越大。为了满足市场需求和提高用户体验,智能硬
2023-05-22
wechat小程序开发工具
WeChat小程序作为一种新型的开放式应用,已经引起了广泛的关注。与传统的APP相比,WeChat小程序无需下载安装,即可在微信中使用,使得用户能够更加轻松便捷地体验应用程序。相比于APP,WeChat小程序展现出更快的反应速度、更低的使用门槛以及更为便利
2023-05-22