微信小程序项目笔录

本文记录下小程序里遇到的易错点和小技巧

（1）VS Code编写多个递增标签做下填充，做布局时使用

view{$}*60

　　

 

（2）scroll-view纵向滚动+Less语法计算calc

1、Less语法使用calc时注意加空格，不然无效... ...
2、注意：Less里使用calc注意前面用~前缀
3、scroll-view纵向滚动必须设置height高度，不然无法实现滚动

　　

　　此时小程序的scroll-view便设置了height高度，可以实现纵向滚动（有纵向滚动条）

　　

　　如果calc没有添加空格，则该语法无效，无法设置scroll-view高度，也就无法实现纵向滚动，如下所示

　　

　　此时会出现整个页面滚动的情况

　　

 

 

（3）封装request调用

　　1、封装并导出

　　

　　2、导入并传参

　　

　　调用时有两种格式Promise或者async/await格式

　　

 

 

（4）样式代码初始化+定义+使用主题颜色--themeColor

　　

　　

 

 

（5）wxss使用currentColor变量

　　

　　详见CSS currentColor 变量的使用 .

　　

（6）添加自定义编译模式

　　注意启动参数：即为该页面接收到的参数

　　

 

 

（7）查看页面接受的参数

　　除了使用代码在onLoad生命周期钩子获取查看外，也可以从模拟器下方查看页面的（路径、参数、场景值... ...）

 　　

 

（8）小程序实现单行多行省略号

　　

 

（9）微信小程序 wx.showToast()

　　

var pageObject = {
  onLoad: function () {
    wx.showToast({
      title: '成功',  //标题
      icon: 'loading',  //图标，支持"success"、"loading"
      image: '../image/img.png',  //自定义图标的本地路径，image 的优先级高于 icon
      duration: 2000000, //提示的延迟时间，单位毫秒，默认：1500
      mask: false,  //是否显示透明蒙层，防止触摸穿透，默认：false
      success: function () { }, //接口调用成功的回调函数
      fail: function () { },  //接口调用失败的回调函数
      complete: function () { } //接口调用结束的回调函数
    })
  }
}
 
Page(pageObject)

 

（10）图片拉伸问题

　　官方文档中 mode="widthFix"   宽度不变，高度自动变化，保持原图宽高比不变，即设置图片宽度而高度自适应。

　　但是在实际开发中发现图片在初始加载时瞬间竖向拉伸变形闪烁然后恢复正常宽高，也许是高度没设置的原因。

　　所以把图片设置  

height: auto

　　即可解决问题

 

（11）图片flex布局

　　需求实现两个元素水平垂直居中

　　

　　标签结构

　　

　　最简单方法：改变交叉轴方向即可

　　

 

 

（12）小程序checkbox样式修改

 

/*checkbox 整体大小  */
checkbox {
  width: 240rpx;
  height: 90rpx;
}
/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
  width: 50rpx;
  height: 50rpx;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #FF525C;
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

 

 

（13）every方法注意事项

如果购物车为空，遍历空数组every返回也是空，所以需要处理（如果数组为空，则直接返回false）

　　首先分析如下

　　

　　1、设置全选按钮初始状态

　　　　

　　2、遍历存储里所有商品状态值，进行判断

　　　　

　　3、赋值给全选按钮

　　　　

　　　　效果如下

　　　　

　　　　但是有一点还需要注意，如果购物车为空，遍历空数组every返回也是空，所以需要处理（如果数组为空，则直接返回false）

　　　　

 

 

 

 

 

 

 

.