日期:2023-04-04~2026-04-04
城市:中国
地址:我来教教你微信小程序坑(2023已更新/今日/知乎)
展馆:我来教教你微信小程序坑(2023已更新/今日/知乎)
主办:我来教教你微信小程序坑(2023已更新/今日/知乎)

6分钟前

本篇文章给大家谈谈微信小程序坑，以及微信小程序坑爹烧脑游戏第45对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信小程序/微信公众号中文乱码的坑

微信小程序可以通过webview嵌入H5页面可以说是给开发者很大的福音，手头的项目中有几个页面是使用H5开发的嵌入到了webview中，在小程序开发者工具的模拟器中测试完全没问题，放到Android真机上测也没问题，但是在iOS上打开后中文显示全部乱码，无论是在小程序还是直接通过微信点开链接都是乱码。但是奇怪的是在iOS的Safari浏览器中却是正常。

经过再三确定过文件编码就是UTF8没错。而且在html的head中也加入了 meta charset="utf-8" 。最后无奈一点一点对比之前的项目的区别，发现之前的项目中的meta是通过http-equiv设置的浏览器编码。

设置后发现显示正常，看来微信-iOS版本中的浏览器内核不是最新的，存在兼容问题，遇到坑的朋友们要注意了。

kie']隐藏的坑'>微信小程序开发-服务端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的方法

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

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

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

微信小程序遇坑——多次点击页面重复加载及数据重复提交

目前总结解决方法：同时需要设置模块的函数，函数都可放置在util.js中去。

首先：

一、在util.js中放入如下两组函数

1. 设置点击后多久不能再次操作该

function throttle(fn, gapTime) {

  if (gapTime == null || gapTime == undefined) {

    gapTime = 1500

  }

  let _lastTime = null

  // 返回新的函数

  return function () {

    let _nowTime = + new Date()

    if (_nowTime - _lastTime gapTime || !_lastTime) {

      fn.apply(this, arguments)  //将this和参数传给原函数

      _lastTime = _nowTime

    }

  }

}

2. 设置加载动画

function showLoading(message) {

  if (wx.showLoading) {    // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理

    wx.showLoading({

      title: message, mask: true

    });

  } else {    // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失

    wx.showToast({

      title: message, icon: 'loading', mask: true, duration: 20000

    });

  }

}

function hideLoading() {

  if (wx.hideLoading) {    // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理

    wx.hideLoading();

  } else {

    wx.hideToast();

  }

}

并且将其导出作为页面使用：

module.exports = {

  throttle: throttle,

  showLoading: showLoading,

  hideLoading: hideLoading,

}

二、将函数引入页面使用

const util = require('../../utils/util.js');

即可。

微信小程序退不了款真坑

微信小程序退不了款解决方法1.询问相关客服。

2、上报给相关部门等。根据相关公开信息可以得知微信小程序没有第三方平台，投诉渠道很少。

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