微信小程序踩坑之购物车

这些坑是在做购物车时的碰到的

1.push事件无效

Array.push();这个很平常的语句是无效的；用如下代码：

 var len = this.data.cartList.length;
    var arr = this.data.cartList;
    arr[len] = 'LILY';
    this.setData({
      cartList: arr
    })

2.带参函数

直接带参是不行的

   +

报错addcart方法undefined，用以下方法

 
     +

注意：wx:key="XXX"，XXX应该为改组数据的唯一标识，通常用其id表示
警告addcart方法不存在，正确的传参方式：

 +

接收：

 addcart: function (event){
    var item = event.currentTarget.dataset.variable;//获取到啦
  }

3.页面的生命周期

onLoad
onShow
onReady
只执行一次，
onHide：页面不可见时触发，在使用wx.navigateTo切换到其他页面、底部tab切换时触发

4.微信小程序filter过滤器

新建filter.wxs文件（不是wxss文件）

//这个方法用来计算购物车总计，val是购物车数组
var totalFn = function(val) {
  var total = 0;
  val.map(function(v,k){
    console.log(v);
    total += v.price
  });
  return parseFloat(total).toFixed(2);
}
module.exports = {
  totalFn: totalFn
};

注意:wxs 获取当前日期不可以使用 new Date()，而需要使用 getDate() 代替。
如果return的是一个对象的话，可以{{filter.totalFn(XXX).属性}}表示也是可以的
因为有多个地儿用到改过滤器，所以写成公共文件，我写到了utils文件中
在wxml文件中用：

 {{filter.totalFn(cartList)}}

src中写filter.wxs的路径，module中写模块名，比如叫filter，就可以引用filter.totalFn(XXX)啦

5.本地缓存

 wx.setStorageSync('cartList', this.data.cartList);//写
 wx.getStorageSync('cartList');//读

还有wx.getStorage方法，相比而言上述更好用，同步接口立即返回值。
每个小程序的缓存空间上限为10MB。

6.弹出框

提示框

  wx.showToast({
                  title: '成功',
                    icon: 'success',
                    duration: 2000//2秒后关闭
                  })；

自定义图标的话用image属性，不想要图标的话 icon: 'none'表示
确定框：

 wx.showModal({
              title: '提示',
              content: '确定删除该商品吗？',
              success(res) {
                if (res.confirm) {
                  console.log('用户点击确定')；
                } else if (res.cancel) {
                  console.log('用户点击取消')
                }
              }
            });

确定框是异步操作

7.计时器

写一个全局变量在data里面：

data: {
    timer:null
  }

计时器方法：

 this.data.timer = setInterval(function(){
      console.log('todo');
    },1000);

页面返回时关闭：

 onUnload: function () {
    clearInterval(this.data.timer);
  }

当然也可以写一个关闭计时器的方法，随时调用也可以

8.text组件

这个组件呢，display是类似inlineblock的，不占整行。但是设置宽高无效。
它的作用是：长按选中

9.返回页面

从a-b-c页面再返回

wx.navigateBack({
      delta: 1,//c-b
    });

wx.navigateBack({
      delta: 2,//c-a
    })

嗯这种隔着页面的跳转很棒棒，比mui体验好太多，惊喜╰(°▽°)╯

10.加icon图标

从“阿里巴巴”失量库中找，下载到本地，解压后有个iconfont.ttf文件，但是这个文件还不能直接用
微信小程序可以识别base64位的图片
打开https://transfonter.org/

image.png

按照1，2，3步骤走，转换好之后

image.png

下载下来，解压后有个文件stylesheet.css,但是还是不能用哦，要改一下，保存为stylesheet.wxss

image.png

然后我们要把iconfont.css文件全都放到app.wxss中（如果你想全局引用的话），局部引用的话可以局部写。那么stylesheet.wxss文件其实相当于代替了iconfont.ttf，iconfont.woff，iconfont.woff2，iconfont.eot等文件因为这些微信小程序不识别，它识别base64格式的图片，我们将这些图转换为base64存放到stylesheet.wxss中，引用的时候依然需要一些代码指向，这些代码就在iconfont.css文件中。

image.png

/**app.wxss**/
@import 'lib/stylesheet.wxss';
/**app.wxss**/
/* icon */
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-kehu:before {
  content: "\e69c";
}

引用：

11.“以下文件没有被打包上传”问题：

image.png

网上有人说可以将工具重启以下然后再上传，但是我这么做了没效果。想了下原因有可能是：
你的文件不符合微信小程序的文件格式
“
xxx.html
xxx.css
”
这是我的两个无法打包上传的文件，最后删了就不报错了