小程序坑（微信小程序30个坑）

今天给各位分享小程序坑的知识，其中也会对微信小程序30个坑进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、关于小程序的坑之Taro框架
• 2、小程序之坑01——按钮覆盖在Input框上的问题
• 3、微信小程序开发中遇到的坑及解决办法
• 4、记录一下支付宝小程序的坑
• 5、微信小程序开发-服务端session值取不到；小程序res.header['Set-Cookie']隐藏的坑
• 6、小程序坑位是什么意思

关于小程序的坑之Taro框架

公司产品试水小程序，做了几个独立功能模块的demo试下可行性，主要是这个框架和react语法基本相同，避免大家学习成本过高，以下记录几个容易粗心的点和坑，maybe很弱智。

由于日常用的axios请求参数的头是headers，复制粘贴大法引发了一个弱智bug，该bug会引发 content-type 设置失效，变成默认的 application/json 。

微信模板语言中，监听自定义组件事件的方法与监听基础组件事件的方法完全一致：

因此Taro中监听自定义组件事件的方法要写成

渲染成微信小程序模板语言时变成

以自定义导航为例：（）

使用方法：

例：res.model在iPhone X模拟器输出"iPhone X"，在真机输出 "iPhone X (GSM+CDMA)iPhone10,3" ，所以此处用indexOf而不能用 "==="

Taro.request()支持get和post请求，通过异步的方式进行回调。主要有3个回调方法

所以，对statusCode !== 200 的情况，都应在success回调方法中处理，可以写个拦截器，在微信原生方法wx.request()中存在相同情况。

npm提示某某包undefined，一个一个重新安超浪费时间，目前我的解决办法是退出编译后删掉渲染成微信小程序模板语言的dist文件夹和node_modules文件夹，然后重新运行 npm i 和 npm run dev:weapp

还遇到挺多问题。。想不起来了。。待更新吧。。。

下水了，后续问题记录口以看这里

小程序之坑01——按钮覆盖在Input框上的问题

先上一张图

如图1-1所示，想做一个上面图片上的搜索框，很容易想到上面搜索框的布局方式就是，input框占满整个行间，然后清空按钮通过absolute定位到input框上面，然而这样的布局方式在小程序真机测试中是有问题的，问题描述如下：

问题所在： 当input框处于聚焦状态时，及键盘属于拉起状态。点击清空按钮是无法清空input框里的数据的，简单的说就是此时加在清空按钮上的点击，触摸等事件并不会触发。只有当input框失去焦点时及键盘属于隐藏状态时，清空按钮上的事件才能被触发。

原因所在：小程序中当input框属于聚焦状态时，会有个层级的提升，它的层级是最高的，会比覆盖在他上面的标签层级高，因此此时点击清空按钮时实际上点击的还是input框。只有当input框失去焦点时才会恢复到正常的层级，此时上面的覆盖标签会比input框层级高

当初以为是组件问题，结果采用小程序上的 cover-image ， cover-image 组件也无法解决问题。

解决办法：

因此我们得使用图1-2的布局方式，采用正常的左右布局的方式。input框和按钮各占整行的一部分，然后通过css去使input框看上去是占用一整行，清空按钮覆盖在上面，对于前端人员来说还是很好写的哈。

微信小程序开发中遇到的坑及解决办法

taro单独为某个项目切换taro版本环境

单独为某一个项目升级#这样做的好处是全局的 Taro 版本还是 1.x 的，多个项目间的依赖不冲突，其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI，你需要先装一个：

# 如果你使用 NPM

$ npm install --save-dev @tarojs/cli@2.x

# 如果你使用 Yarn

$ yarn add -D @tarojs/cli@2.x

echarts在小程序中滑动卡顿

由于微信小程序中，echarts的层级最高，无论设置多大层级也无法遮住echarts。而且小程序中好像只能用echarts吧。所以为了解决这个bug，我只能委屈求全了。打开ec-canvas.wxml文件，将touchStart、touchMove和touchEnd去掉了，直接删除就好啦。这三个事件应该是做缩放的吧，我们也没有这个缩放的需求。所以就去掉了。虽然暂时满足的需求，还是没有真正的解决问题。

原：

bindinit="init"

bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}"

bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}"

bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"

现：

bindinit="init"

echarts在小程序中无法跟随页面滑动

在卡顿问题中能与echarts交互少的，可以直接使用图片代替cannvas，即在echarts渲染完毕后将它替换为一张图片。

如果我更新了数据，那么就重新放出echarts，等它渲染完毕后，再次替换为一张图片。

chart.on('finished', () = {

getCurrentInstance().page.selectComponent(id).canvasToTempFilePath({

success: res = {

console.log('res.tempFilePath====',res.tempFilePath)

this.setState({

echartImgSrc: res.tempFilePath

      })

},

    fail: res =console.log('转换图片失败', res)

});

})

render:

this.state.echartImgSrc =='' ?

  ref={this.refChart}

id={this.state.id}

canvas-id="mychart-area"

  force-use-old-canvas="true"

  ec={this.state.ec}

/

:

CoverImage src={this.state.echartImgSrc}/CoverImage

记录一下支付宝小程序的坑

我们项目中 由于有个页面链接，没有形成闭环。不能从小程序其他页面跳转过去，只能上线之后通过apli的规格跳过去（卡包中跳转）。

如果前面打开过小程序，触发了onlauch事件，从卡包跳转的时候，只是进入这个页面，不会触发onlaunch事件了。

（其实这个没问题）

主要是开发过程中，我们要去找个页面就 开始通过 扫码 打开。 扫描打开页面都会重启小程序，并打开扫描的页面，都会触发onlaunch事件。

我这里出现的原因是： onlauch事件我会异步获取 userId保存到本地。 在活动页面由于上一期的种种问题，需要onload清空本地数据。

如果打开小程序在 活动页，那么 先触发onlaunch事件，异步获取userId（还没拿到）， onload清空本地数据， 这个是拿到了userId. 保存到本地。一切正常。

扫描开发和测试都没发现问题。（扫描活动页，会重新启动小程序）

上线后发现，有保存过小程序的用户，或者直接搜索小程序，进入了首页，触发了onlaunch事件， 异步获取并保存了userId到本地。。。然后从卡包进入活动页，清空本地数据，，，此时之后的流程就有问题了。

解决的办法：

微信小程序开发-服务端session值取不到；小程序res.header['Set-Cookie']隐藏的坑

问题：本地服务器存取session没有问题。通过小程序，比如发验证码，服务器端将验证码存为session。校验验证码的时候重新取session,提示session值不存在。

根源：微信小程序不能保存Cookie，导致每次wx.request到服务端都会创建一个新的会话，从而当前会话不再是之前存验证码的那个会话，自然也就取不到session值了。

解决方法：（由于本人很懒，直接参考、引用大神的文章，文末有原文链接，原文板块比较好看一点。我这里重点在于记录微信小程序的另一个坑。）

普通的Web开发，都是把sessionid保存在cookie中传递的。

不管是java还是php，服务端的会在response的header中加上Set-Cookie

例如：

浏览器的请求也会在header中加上

例如：

通过这个sessionid就能使浏览器端和服务端保持会话，使浏览器端保持登录状态。但是，微信小程序不能保存Cookie，导致每次wx.request到服务端都会创建一个新的会话，小程序端就不能保持登录状态了。

一个比较简单的办法就是在小程序端把cookie保存到storage里，后续请求的时候再读storage，把cookie添加到请求头里，这样做的好处就是，服务端不用做任何改动

具体操作如下：

1.把服务端response的Set-Cookie中的值保存到Storage中

2.wx.request再从Storage中取出Cookie,封装到header中

我在这里还遇到了另外一个问题，当服务器响应多个Set-Cookie时，小程序通过wx.request 回调取res.header['Set-Cookie']所取到的Set-Cookie值是把它们用逗号拼接在一起，从而产生的错误的Cookie，这样请求后台的时候还是取不到相应的session。而真正需要的是用分号拼接多个Set-Cookie值。例如：

服务器响应：

小程序通过res.header['Set-Cookie']取到的Set-Cookie值却是：

而真正正确的值应该是smallapp与session_name之间用分号隔开而不是逗号：

但坑终究是坑，寄人篱下，有坑也只得我们自己填。

填坑方法：在步骤2中的if判断中，自己重新拆分Storage中取出的Cookie，整理成后端需要的规范的cookie。再赋值给header.Cookie。

这个问题暂时没找到其他解决方案，也请知道的朋友指点一下。

原文引用： 微信小程序开发-保存服务端sessionid的方法

链接：【点击了解更多加盟项目】

小程序坑位是什么意思

小程序坑位的意思就是：一个位置，比如在小程序中的一个广告坑位，就是一个广告的位置，小程序会给商家一个打广告的位置然后商家给予一定的费用。

小程序坑的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于微信小程序30个坑、小程序坑的信息别忘了在本站进行查找喔。