微信小程序实战笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013338742/article/details/80007943

1，更改data里面的数据，不要使用赋值的方法：

this.X = data

应该使用setData， 例子如下：

this.setData({X: data})
//在setTimeout等函数时，需要使用bind（this）

2, 使用动画组件api时，记得在wxml上要进行动画的元素(如view)加上：

<view animation="{{animation}}" > </view>

js文件中，data加上animation:

data: {
    animation: {}
    }

3, 图片元素是 image， 不是img

4,es6在安卓的一些浏览器上可能会出现问题

5，隐藏/显示元素，可以通过控制class的方法：

class='{{flag ? "show": "hide" }} otherClass'
//flag为true时正常显示，false时隐藏

6，navigator：
open-type:
redirect是将网页整个重定向到新网页，如果父页面没有返回，那么新重定向的页面也没有返回；
如果直接src导航， 则可以返回原页面
7，如果想通过页面传参，可以在跳转链接里面加入参数：

<navigator  url="../product/detail?productId={{item.id}}" > ...

然后在跳转的页面通过onLoad方法来接收：

onLoad: function(options){
    let id = options.productId;
    }

8, 通过设置自定义的属性，来做一些判断：

//wxml
<block data-plus-sub="0" bindtap = "cal"> + </block>
<block data-plus-sub="1"  bindtap = "cal"> - </block>

//js

cal: function(e){
//获取data-plus-sub属性
    let data = e.target.dataset.plusSub;
}

9,解决this的问题：
采用箭头函数的方法，使this始终指向app实例（即在回调函数内也不会丢失this），
第一种老掉牙的方法：

//回调函数外部声明that，保存this
var that = this

第二种方法：

//使用bind(this)
setTimeout(function(){
}.bind(this),0);

第三种方法：

//使用es6的箭头函数
setTimeout(() => {

},0)