免费试用

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

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


相关知识:
鞍山百度小程序开发报价
鞍山百度小程序是一种基于微信、支付宝等平台的小程序,可以在手机上的应用中直接使用,无需下载。它具有快速、轻便、开发成本低等特点,成为了移动互联网开发的热门趋势。百度小程序开发需要有一定的编程基础和技术储备。开发者需要熟练运用前端开发框架,例如Vue.js、
2023-08-09
wechat 小程序开发
微信小程序是微信推出的一种新型应用形态,是一种不需要下载安装即可使用的轻应用。相较于传统应用程序,微信小程序具有开发周期更短、体积更小、使用更方便、功能更专注的特点,受到了越来越多的开发者和用户的欢迎。本文将为大家介绍微信小程序的基本原理和详细开发流程。一
2023-08-09
vant可以用于小程序开发吗
Vant是一个基于Vue.js的移动端UI组件库,封装了丰富的基础组件和业务组件,方便开发者快速构建移动端应用。它主要针对H5和微信小程序两个方向进行开发和维护。本文将从小程序的角度介绍Vant在小程序中的使用方式。Vant在小程序中的本质微信小程序不支持
2023-08-09
ubuntu微信小程序开发
微信小程序是微信公众平台推出的一种新型应用程序形态,它能够在微信客户端内部环境中,使用HTML5等前端技术进行开发,并通过微信的JS-SDK和API提供服务能力。因其轻便、快速、便捷等特性被广泛应用于各个领域,也吸引了很多开发者的关注。本文主要介绍在Ubu
2023-08-09
saas 模板开发小程序
在互联网产品开发中,SaaS(软件即服务)模式的应用非常普遍。SaaS模式中,用户无需购买软件的许可证,只需要在云端使用服务,即可轻松获取软件的功能。而小程序,作为一种轻量级的应用程序,也逐渐受到了越来越多开发者和用户的关注。那么,如何将SaaS模板与小程
2023-08-09
react框架开发微信小程序
React是一个非常流行的JavaScript库,用于构建各种应用程序。随着微信小程序越来越流行,很多人也开始尝试在React中开发微信小程序。本文将对React框架开发微信小程序进行详细介绍和原理解析。一、微信小程序介绍微信小程序是一种应用程序,类似于手
2023-08-09
pro小程序开发
随着智能手机的普及,移动应用的开发也日趋火热。而小程序作为一种新兴的应用形态,有着轻量、快速、安全等特性,被越来越多的企业和个人所青睐。今天,我们来详细介绍一下pro小程序开发的原理。pro小程序开发的基础我们知道,小程序最大的特点就是免去了用户下载、安装
2023-08-09
ktv可以开发微信小程序吗
随着移动互联网和智能设备的普及,微信小程序已经成为了很多企业营销的一种重要方式。对于ktv来说,开发微信小程序也是一种非常有效的方式来获得更多的流量和客户。那么,ktv可以开发微信小程序吗?本文将从原理和具体步骤两个方面来进行详细介绍。一、原理1. 微信小
2023-08-09
小程序开发工具品质保障
小程序开发工具是一个辅助程序开发的工具,它提供了丰富的功能和工具,可以帮助开发者加速小程序的开发流程。在选择小程序开发工具时,品质是非常重要的。本文将介绍小程序开发工具的品质和保障。一、小程序开发工具品质保障的重要性在现代社会,随着手机使用量的增加,小程序
2023-05-26
微信小程序开发工具怎么运行
微信小程序是微信官方推出的一种轻量级应用,可以通过微信客户端进行展示和访问。开发小程序需要使用微信小程序开发工具,而下面将介绍微信小程序开发工具的运行原理和详细介绍。一、微信小程序开发工具独立于浏览器与传统网页开发需要通过浏览器进行调试不同,微信小程序开发
2023-05-26
退出小程序开发工具在哪里
小程序开发工具是一款方便开发者进行小程序开发的工具,然而,当我们在开发小程序的时候,如果一直处于开发工具界面,可能会显得有些疲倦。我们可能需要退出小程序开发工具,来放松一下自己,或者进行其他工作。那么在哪里能够退出小程序开发工具呢?下面我对此进行详细介绍。
2023-05-26
东莞商城微信小程序开发工具
微信小程序是一种基于微信开发者工具开发的应用程序,它具有无需下载、快速使用、跨平台等优势。而商城小程序则是一种基于微信小程序开发的专门用于商家在线销售的应用程序。在东莞,商城微信小程序已经成为了商家接单、交易、支付、查询、客服等过程中的重要工具。本文将介绍
2023-05-22