微信小程序之小技能篇(一)

1，三目运算改变class值：

<view class="{{flag ? 'change' : 'change_after'}}">改变字体颜色</view>  //flage为true／false时，选择class名

应用场景：需要动态改变元素样式。比如：点击某按钮，改变字体颜色。

2，利用缓存实现：点击按钮，数字减一

//XML页面：
<text style='font-size:26rpx; color:#ff0000'>{{counts}}</text>

//JS页面：
 onLoad: function (options) {
    var counts = wx.getStorageSync('key')  //获取缓存值
    this.data.currentcounts = counts  //***把counts赋值给data的属性currentcounts
    if (counts) { //判断是否存在缓存值
      this.setData({  //存在的话，将值绑定到counts
        counts: counts
      })
    } else {
      wx.setStorageSync('key', 9)  //不存在的话，设置缓存值。（为方便测试，这里设置为9）
    }
    // console.log(counts);
  },

  self_redution: function (event) {  //自定义方法
    var a = wx.getStorageSync('key')  //取得缓存值
    if (a > 0) { 
      var b = a - 1  //大于0，那么自身值减一
    } else {
      var b = this.data.currentcounts //***否则，缓存值为上面设置的值
    }
    console.log(b);
    a = wx.setStorageSync('key', b)
    this.setData({
      counts: b,  //将缓存值绑定到counts
    })


   formSubmit: function (event) {

      this.self_redution() //调用上面自定义方法

   },

 

应用场景：报名时，每次表单提交成功时，剩余可报名人数减掉一人。

上面有一个知识点：如何将onload中获取的值传递到点击事件中？这里采取一个通过data：{}中转的办法：把counts赋值给data的属性currentcounts

this.data.currentcounts = counts  //首先先在onload中：将counts赋值给data的属性currentcounts

var b = this.data.currentcounts  //然后在表单的提交函数中： this.data.currentcounts就是我们上面的counts值

 

3，定义一个方法，如何在点击事件中调用

//某个js文件下

  self_redution:function(event){    //定义方法
    console.log("我来自自定义方法：自减");
  },


  formSubmit: function (event) {

    this.self_redution()  //调用方法(别忘记加this)

  },

 

------------------------

问题：

今早过来接着优化表单提交【就是每次提交之后，将写入缓存的数值减一】，调试的时候频繁测试代码是否能成功执行，所以会有好多次的表单提交。试着试着，突然浏览器报错,同时也收不到邮件....  然后我点预览在手机上看效果，结果也报错...   

微信小程序预览报错：

Error: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:64412

浏览器报错：

appservice:1014 POST https://xxxx/sendEmail.php net::ERR_PROXY_CONNECTION_FAILED 

处理：在网上搜到的应该是代理设置上的问题 ，关闭代理。

 工具栏 -“设置”-“代理设置”，选择“不使用任何代理，勾选后直连网络”。

取消代理后，不再报错回复正常。很奇怪，之前还一直好好的，就算是默认代理也没有问题，最有可能就是我频繁提交表单了....

 

catchtouchmove='true'  处理遮罩底层div滚动问题

 

ES6箭头函数用法：

let goodsList = [
  { actEndTime: '2018-09-01 10:00:43' },
  { actEndTime: '2018-08-01 11:00:00' },
  { actEndTime: '2018-10-01 12:45:56' },
  { actEndTime: '2018-07-01 15:00:23' },
  { actEndTime: '2018-09-23 17:00:22' },
  { actEndTime: '2018-09-14 19:00:44' },
  { actEndTime: '2018-09-21 21:00:34' },
  { actEndTime: '2018-10-17 09:00:37' },
  { actEndTime: '2018-03-21 05:00:59' },
  { actEndTime: '2018-08-19 07:00:48' },
  { actEndTime: '2018-08-03 10:00:11' }
]

//普通写法
var end = [];
goodsList.forEach(function(curr){
    console.log(curr.actEndTime);
    end.push(curr.actEndTime);
})
 console.log(end);

//ES6写法：

　　var end = [];

　　goodsList.forEach(curr=>{
　　　　end.push(curr.actEndTime)
　　})
　　console.log(end);