2018-01-23 开发微信小程序需要注意的事项、South Pacific、ES6小技巧、原生CSS:开关按钮、Linq语句

第一组:杨昊 开发微信小程序需要注意的事项

来自官方文档的提醒:

  1. 多数 API 的回调都是异步,你需要处理好代码逻辑的异步问题;

  2. 小程序中公共方法可以模块化:


  3. 需要进行数据绑定的字段都需要放在{{}}内,花括号和引号之间如果有空格,将最终被解析成为字符串;

  4. 小程序中有wxs脚本语言,类似于JavaScript,但是!它们是不一样的:
    a. wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
    b. wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
    c. wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
    d. wxs 函数不能作为组件的事件回调。
    e. 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

  5. 为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。


第二组:叶佳意 South Pacific

很惭愧哦,在家休息一周没有好好学习专业知识。但是看了一部很好看的纪录片——《BBC : South Pacific(南太平洋)》。第一吸引我的是这个片子的旁白!!本尼迪克特·康伯巴奇的伦敦腔简直迷人(#星星眼)。但是看着看着这个诱人的旁白就会被忽略了,你会沉迷于南太平洋令人咋舌的自然景象和人文景观:南太平洋是太平洋南部的海域,远离大陆的洋面上星罗棋布多达2万余个岛屿。这里也许是地球上最偏僻的地方,海洋的隔绝造就了地球上所特有的生态景象。从撕扯掉椰子的大蟹,到把猎物钉在匕首般爪子上食肉毛虫的自然生态;从高高的木制脚手架上纵身鱼跃来庆祝部落每年的收获,到土著部落将年轻的战士变成鳄鱼人的成人仪式;从海底火山爆发,到虎鲨远行数百里去享用刚会飞翔的信天翁幼雏的盛宴。这都是终身难得一见的宏伟景象。还有会飞的企鹅哦~Who says penguins can't fly?


第三组:黄华英 ES6小技巧

Hack #1 交换元素

利用数组解构来实现值的互换

let a = 'world', b = 'hello'
[a, b] = [b, a]
console.log(a) // -> hello
console.log(b) // -> world
Hack #2 调试

我们经常使用console.log()来进行调试,试试console.table()也无妨。

const a = 5, b = 6, c = 7
console.log({ a, b, c });
console.table({a, b, c, m: {name: 'xixi', age: 27}});
Hack #3 单条语句

ES6时代,操作数组的语句将会更加的紧凑

// 寻找数组中的最大值
const max = (arr) => Math.max(...arr);
max([123, 321, 32]) // outputs: 321
// 计算数组的总和
const sum = (arr) => arr.reduce((a, b) => (a + b), 0)
sum([1, 2, 3, 4]) // output: 10
Hack #4 数组拼接

展开运算符可以取代concat的地位了

const one = ['a', 'b', 'c']
const two = ['d', 'e', 'f']
const three = ['g', 'h', 'i']
const result = [...one, ...two, ...three]
Hack #5 制作副本

我们可以很容易的实现数组和对象的浅拷贝
const obj = { ...oldObj }
const arr = [ ...oldArr ]

Hack #6 命名参数

解构使得函数声明和函数的调用更加可读

// 我们尝尝使用的写法
const getStuffNotBad = (id, force, verbose) => {
 ...do stuff
}
// 当我们调用函数时, 明天再看,尼玛 150是啥,true是啥
getStuffNotBad(150, true, true)

// 看完本文你啥都可以忘记, 希望够记住下面的就可以了
const getStuffAwesome = ({id, name, force, verbose}) => {
 ...do stuff
}
// 完美
getStuffAwesome({ id: 150, force: true, verbose: true })
Hack #7 Async/Await结合数组解构

结合Promise.all和解构和await会使代码变得更加的简洁

const [user, account] = await Promise.all([
fetch('/user'),
fetch('/account')
])

第四组:王芳 原生CSS:开关按钮

最终效果:

源代码:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .switchInput {
            display: none;
        }
        .switchlabel {
            position: relative;
            width: 2.8em;
            height: 1.2em;
            display: inline-block;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: #ccc 0px 0px 0px 1px;
            overflow: hidden;
        }
        .switchlabel:before {
            content: '';
            position: absolute;
            left: 0;
            z-index: 20;
            width: 1.2em;
            height: 1.2em;
            display: inline-block;
            border-radius: 20px;
            background-color: #bdbdbd;
            transition: all 0.5s;
        }
        .switchInput:checked + label.switchlabel:before {
            left: 1.6em;
            background-color: #70b9f7;
        }
        .switchInput:checked + label.switchlabel{
            background-color: #fff;            
            box-shadow: #70b9f7 0px 0px 0px 1px;
        }
    </style>
</head>
<body>                   
    <input class="vtcalignMiddle switchInput" id="switch" type="checkbox" checked/>
    <label class="vtcalignMiddle switchlabel marginBottom0" for="switch" data-on="info" data-off="success"></label> 
</body>
</html>

Ps:此类用CSS原生代码改变input默认样式的例子还有之前的checkbox和radio


第五组:王颢 Linq语句

这是一个最简单的dlinq查询语句,查询得到联系人的名字。在这里,我需要提醒下大家的是,像这个语句只是个声明,dlinq并没有真正把数据取出来,只有当你需要该数据的时候,它才会帮你去取,这就是延迟加载(deferred loading)。如果,你想在声明的时候就希望dlinq帮你取到数据,你可以使用ToList() 或ToArray()方法。如上例。



dlinq返回的结果集是对象的集合,不是数据的。

在dlinq执行的时候,它会先将上面的标准查询转换成dlinq的API(也有人叫级连方法),比如,下面语句


就会先被转化成 var q = db.Customers.Where(c=>c.City== "London").Select(c=>c); 也就是说,这两个语句是等价的。而后,dlinq会解析影射文件,根据dlinq的query语句,自动产生sql语句,并把sql送到sql server服务器,根据返回的数据集,创建相应的对象。在这里,你可能会对c=>c感到非常陌生。这是Lambda表达式(expression),你可以理解c为结果集里的任一对象,这对象的类型是和你结果集里元素类型是一致的 。


上面的语句与
var q = db.Customers.Select(c=>new {c,ContactName,c.Phone});是等价的。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,776评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,527评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,361评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,430评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,511评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,544评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,561评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,315评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,763评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,911评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,554评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2 352

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,145评论 0 13
  • TITLE: 编程语言乱炖 码农最大的烦恼——编程语言太多。不是我不学习,这世界变化快! 有时候还是蛮怀念十几、二...
    码园老农阅读 5,310评论 2 35
  • 甲三 如何讲闻二种殊胜相应正法 乙二 讲说轨理 丙一 思维说法所有胜利不为名闻利养而为众说法是无染法施,有二...
    caia阅读 1,190评论 0 2