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

 
 

微信小程序之小技能篇(一)的更多相关文章

  1. 新人学习微信小程序开发之框架篇

    大家好我是智哥,一名专注于前端领域的一名码农. 咱们今天主要来说说微信小程序, 最近一段时间微信群里的小程序,小游戏各种分享是突然一下子就爆发了,现在来看小程序作为微信的重磅功能无疑又是下一个风口.咱 ...

  2. 微信小程序教程(第一篇)

    目录 第一篇小程序概述 第二篇如何注册接入小程序及搭建开发环境 第三篇小程序的架构及实现机制,信道服务及会话管理 第四篇小程序开发基本框架及其限制与优化 第五篇小程序开发项目实例,测试及发布 .... ...

  3. 使用wepy开发微信小程序商城第三篇:购物车(布局篇)

    使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始 ...

  4. 我的第一个上线小程序,案例实战篇二——LayaAir游戏开始界面开发

    不知不觉我的第一个小程序已经上线一周了,uv也稳定的上升着. 很多人说我的小程序没啥用,我默默一笑,心里说:“它一直敦促我学习,敦促我进步”.我的以一个小程序初衷是经验分享,目前先把经验分享到博客园, ...

  5. 微信小游戏 小程序与小游戏获取用户信息接口调整 wx.createUserInfoButton

    参考: 小程序•小故事(6)——微信登录能力优化 小程序•小故事(4)——获取用户信息 本篇主要是讲微信getUserInfo接口不再出现授权弹框 那么原来getUserInfo是怎么样?修改之后又是 ...

  6. 手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇)

    系列文章 手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇) 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇) 前言 好久不见,很久没更新博客了,前段时间 ...

  7. 微信小程序——智能小秘“遥知之”源码分享(语义理解基于olami)

    微信小程序智能生活小秘书开发详解 >>>>>>>>>>>>>>>>>>>>> ...

  8. 微信小程序+“芝麻小客服”可设自动关注公众号,助力运营闭环

    微信小程序全面上线已经接近1年的时间,从最初的"用完即走"理念到2017年总计更新开放60余次的功能创新,微信小程序不一定会爆发下一次的红利,但绝对是微信生态中重要的一环. 芝麻小 ...

  9. 玩玩小程序:使用 WebApi 交互打造原生的微信小程序 - 图灵小书架

    使用 WebApi 交互打造原生的微信小程序 - 图灵小书架 目录 介绍 源码地址 扫一扫体验 代码分析 其它相关信息(互联网搜集) 介绍 定时抓取图灵社区官网的首页.最热.推荐和最新等栏目的相关图书 ...

  10. [BUG]微信小程序生成小程序码"小程序页面路径不存在,请重新输入"

    描述 小程序页面线上能打开. 微信官方 获取小程序页面小程序码 页面 ,输入 小程序页面路径,提示 "小程序页面路径不存在,请重新输入". 使用微信复制小程序路径方法, 也是同样的 ...

随机推荐

  1. Eureka 源码分析

    启动server服务,或者发现服务都使用了@EnableDiscoveryClient注解和eureka.instance.client.service-url.defaultZone /** * A ...

  2. C++ 根据两点式方法求直线并求两条直线的交点

    Line.h #pragma once //Microsoft Visual Studio 2015 Enterprise //根据两点式方法求直线,并求两条直线的交点 #include"B ...

  3. centos 6.10 oracle 19c安装

    centos 7以下版本安装oracle 19c 问题较多,centos 以上版本没有任何问题.记录如下. hosts文件,否则图形界面无法启动 127.0.0.1 localhost localho ...

  4. Linux or Mac 重启网络

    Mac sudo ifconfig en0 down sudo ifconfig en0 up Linux /etc/init.d/networking restart

  5. Istio技术与实践6:Istio如何为服务提供安全防护能力

    凡是产生连接关系,就必定带来安全问题,人类社会如此,服务网格世界,亦是如此. 今天,我们就来谈谈Istio第二主打功能---保护服务. 那么,便引出3个问题: l  Istio凭什么保护服务? l  ...

  6. TCP--粘包拆包,netty的解决方式

    TCP基于链接的协议,并且保证有序性. 但是,每个包的长度,需要明确,否则会发生粘包现象. 以下示例为一个自定义协议的例子,其中包含了拆包的内容. 所有的类: 协议类: public class Pe ...

  7. Django model反向关联名称的方法(转)

    原文:https://www.jb51.net/article/152825.htm

  8. sqlserver 查看表死锁

    1.SELECT request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName FROM sys.dm_tr ...

  9. Dijkstra+Heap模板

    普通Dijkstra: void DijkstraPath(int v0,int vis[],int dist[],int path[]) { int onePath[maxn]; int d; in ...

  10. MySQL 查询优化 - 关联查询

    1. 关联查询执行流程 MySQL执行关联查询的策略很简单,他会从一个表中循环取出单条数据,然后用该条数据到下一个表中寻找匹配的行,然后回溯到上一个表,到所有的数据匹配完成为止.因此也被称为" ...