美文网首页
微信小程序踩坑之购物车

微信小程序踩坑之购物车

作者: 喵呜Yuri | 来源:发表于2019-01-18 16:34 被阅读107次

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

1.push事件无效

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

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

2.函数传参

 <view wx:for="{{goodsitem}}"  wx:key="{{item.id}}" class='shoplist-item'>
     <text class='cart' bindtap='addcart(item)' >+</text>
</view>

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

 <text class='cart' bindtap='addcart' data-variable="{{item}}">+</text>

接收:

 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
};

如果return的是一个对象的话,可以{{filter.totalFn(XXX).属性}}表示也是可以的
因为有多个地儿用到改过滤器,所以写成公共文件,我写到了utils文件中
在wxml文件中用:

<wxs src="../../utils/filter.wxs" module="filter"/>
 <text class='price'>{{filter.totalFn(cartList)}}</text>

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
再在app.wxss中引用
/**app.wxss**/
@import "lib/css/stylesheet.wxss";

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

image.png

网上有人说可以将工具重启以下然后再上传,但是我这么做了没效果。想了下原因有可能是:
你的文件不符合微信小程序的文件格式

xxx.html
xxx.css

这是我的两个无法打包上传的文件,最后删了就不报错了

相关文章

  • 【教程】微信小程序入门

    微信小程序入门基础知识 Moustache:我的微信小程序入门踩坑之旅 github精选:微信小程序入门简要教程 ...

  • 微信小程序踩坑之购物车

    这些坑是在做购物车时的碰到的 1.push事件无效 Array.push();这个很平常的语句是无效的;用如下代码...

  • 开发微信小程序分页功能的坑

    微信小程序开发分页的坑 微信小程序开发中list列表经常要进行分页处理,踩坑在所难免。 app.json wxml...

  • 小程序资源

    小程序webview踩坑小程序图片转二进制微信基础库对应关系

  • 列表渲染 wx:key 的作用、条件渲染 wx:if 与 hid

    这是微信小程序踩坑系列的第三篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的《微信小程序》专栏。 前言 开...

  • 微信小程序脚本语言 WXS 怎么用

    这是微信小程序踩坑系列的第二篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的《微信小程序》专栏。 前言 前...

  • 小程序相关实用文章

    1、微信小程序开发常见之坑2、微信小程序联盟-微信小程序开发社区-小程序3、怎么在弹窗中加入输入框4、微信小程序实...

  • 事件关键词 bind 和 catch 的区别、事件对象 targ

    这是微信小程序踩坑系列的第一篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的《微信小程序》专栏。 前言 开...

  • 微信小程序踩坑

    日常开发中遇到的一些坑,写的比较简略,有些bug可能微信后续的版本已经修复,会有过时的风险,仅供参考 不支持imp...

  • 微信小程序踩坑

    本次开发微信小程序第一个版本,遇到如下问题: 关于小程序里引入iconfont 原有H5项目中iconfont.c...

网友评论

      本文标题:微信小程序踩坑之购物车

      本文链接:https://www.haomeiwen.com/subject/dwmbdqtx.html