2018-01-23 开发微信小程序需要注意的事项、South
第一组：杨昊 开发微信小程序需要注意的事项
来自官方文档的提醒：
-
多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题；
-
小程序中公共方法可以模块化：
-
需要进行数据绑定的字段都需要放在{{}}内，花括号和引号之间如果有空格，将最终被解析成为字符串；
-
小程序中有wxs脚本语言，类似于JavaScript，但是！它们是不一样的：
a. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
b. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
c. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
d. wxs 函数不能作为组件的事件回调。
e. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。 -
为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
第二组：叶佳意 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});是等价的。
