这些坑是在做购物车时的碰到的
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/

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

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

再在app.wxss中引用
/**app.wxss**/
@import "lib/css/stylesheet.wxss";
11.“以下文件没有被打包上传”问题:

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