小程序踩坑总结

250 阅读2分钟

踩坑总结

Component -> observers

小程序向Component传wx:if='{{show}}'的值时,会重新初始化该Component中的props与data,导致observers不更新。

textarea使用auto-height, 初始高度不等

input组件placeholder字体颜色

<input type="text" placeholder="请输入" placeholder-class="placeholderStyle"></input>
.placeholderStyle{
  //样式
}

wx.navigateTo无法跳转到带tabbar的页面

wx.switchTab

tabbar在切换时页面数据无法刷新

使用onShow生命周期

如何去掉自定义button灰色的圆角边框

伪类:after

input textarea是APP的原生组件,z-index层级最高

使用 disabled 属性

一段文字如何换行


变为 \n

white-space: pre-wrap;

设置最外层标签的margin-bottom在IOS下不生效

用padding替代

小程序中canvas的图片不支持base64格式

暂存为本地路径

send_code(code) {
  /*code是指图片base64格式数据*/
  //声明文件系统
  const fs = wx.getFileSystemManager();
  //随机定义路径名称
  var times = new Date().getTime();
  var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
  //将base64图片写入
  fs.writeFile({
    filePath: codeimg,
    data: code.slice(22),
    encoding: 'base64',
    success: () => {
      //写入成功了的话,新的图片路径就能用了
      this.huizhi({},codeimg);
    }
  });
}

回到页面顶部

  • view
wx.pageScrollTo({
  scrollTop: 0
})
  • scroll-view
<scroll-view scroll-top='{{top}}'></scroll-view>

new Date跨平台兼容性问题

var d = new Date("2017-08-11 12:00:00".replace(/-/g, "/"));

wxs: 只替换第一个 '-':

var regexp = getRegExp('-', 'g');

date = date.replace(regexp, '/')

wx.getSystemInfoSync获取windowHeight不准确

onReady 中调用wx.getSystemInfo

swiper在iphone上面不显示图片

解决:给swiper和图片添加宽度

.container{
  width: 750rpx;
}
.container swiper{
  width: 100%;
}
.container swiper image{
  width: 100%;
}

华为手机 img

img mode 为 widthFix, 要设置宽度 100%;

app分享,地址query带有中文,要编码

  encodeURIComponent('帅哥')

onload 打开分享页面options可能无参数

获取 getCurrentPages()[0].options

const queryData = options ? options : getCurrentPages()[0].options;

options 参数为汉字

decodeURIComponent

flex-direction: column;的页面,ios下依然有弹性,效果不好

.json文件配置

"disableScroll": true,