微信小程序开发教程

F.1ES61996年11月，JavaScript的创造者——Netscape公司决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。1997年，ECMA发布了262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript1.0。F.1.1let和const命令【演练】熟悉let和const命令的使用如图所示，在控制台上输入如下命令，观察结果。注意：图中“>”后为输入测试的代码，多行代码之间换行时可按“Shift+Enter”组合键，“<”后为代码运行结果。F.1.1let和const命令for循环很合适使用let命令，因为通常循环的变量只在循环体内部使用，在外部是不需要的。如图所示，在控制台上输入如下命令，观察结果。F.1.1let和const命令const命令用于声明一个只读的常量。一旦声明，常量的值就不能改变。如图所示，在控制台上输入如下命令，观察结果。F.1.2解构赋值【演练】熟悉解构赋值在浏览器中启用开发者工具。熟悉解构赋值。如图所示，在控制台上输入如下命令，观察结果。微生物在食品工业中的应用（2）生理生化特点化能异养型，对营养要求严格，生长繁殖需要多种氨基酸、维生素等。根据对碳水化合物的发酵类型，可将乳杆菌属分为三个类群，即第一类是同型发酵群：发酵葡萄糖产生85%以上的乳酸，不能发酵戊糖和葡萄糖酸盐；第二类是兼异性发酵群：即能发酵葡萄糖产生85%以上的乳酸，也以发酵某些戊糖和葡萄糖酸盐；第三类是异型发酵群：发酵葡萄糖产生等量物质的乳酸、乙酸、乙醇及CO2。微生物在食品工业中的应用5.1.2.1微生物与发酵乳制品中风味物质的形成（1）乳糖的乳酸发酵这是所有发酵乳制品所共有的最为重要的乳糖代谢方式。由乳酸菌产生的乳酸是乳制品中最基本的风味化合物。一般乳液中含4.7%～4.9%的乳糖，它是乳液中微生物生长的主要能源和碳源。因此，。那些具有乳糖酶的乳链球菌、嗜热链球菌和乳杆菌等才能在乳液中正常生长，并在与其他菌的竟争生长中成为优势菌群。微生物在食品工业中的应用（2）柠檬酸转变为双乙酰乳脂明串珠菌、乳链球菌丁二酮亚种等将发酵牛乳中产生的另一种代谢物质柠檬酸转变为双乙酰，它是乳制品中极其重要的风味物质，它使发酵乳制品具有奶油特征，还有一种类似坚果仁的香味和风味。但乳脂明串球菌在牛乳中生长很慢，利用乳糖产酸的的能力弱，因而在生产上常加葡萄糖和酵母膏的办法促进其生长，这样只有当乳液中有足够的酸时，乳脂明串珠菌才能发酵牛乳中的柠檬酸生成双乙酰。研究还表明，风味细菌的柠檬酸酶只有在pH低于6.0以下时才有活性，而牛乳的pH一般为6.6～6.7，这就要求它与乳酸菌共同生长。微生物在食品工业中的应用（3）乙醛的产生嗜热链球菌和保加利亚乳杆菌在乳酸的代谢过程中，产生的乙醛也是一种重要的风味物质，以增进酸牛乳的美味。但发酵酸性奶油时，乙醛的存在会有害，会带来一种不良的风味，故酸性奶油的生产中禁用这些菌株。而乙醇脱氢酶活性较强的乳脂明串珠菌则能将乙醛转变为乙醇。微生物在食品工业中的应用（4）乙醇的产生乳脂明串珠菌在异型乳酸发酵中可形成少量的乙醇，它也是发酵乳制品中重要的风味物质之一，而乳脂明串珠菌有较强的乙醇脱氢酶活性，能将乙醛转变为乙醇。故也称风味菌、香气菌或产香菌。在酸奶酒中的乙醇则是由酵母菌产生的，不同乳制成的酸奶酒由不同的酵母菌产生乙醇。如牛奶酒由克菲尔酵母和克菲尔圆酵母产生，而马奶酒则是由乳酸酵母产生的。微生物在食品工业中的应用（5）甲酸、乙酸和丙酸的产生链球菌丁二酮亚种，利用酪蛋白水解物形成的挥发性脂肪酸中的甲酸、乙酸和丙酸也是构成发酵乳制品风味物质的重要化合物。挥发性脂肪酸对成熟干酪的口味形成是有益的。（6）二氧化碳的产生异型乳酸菌、酵母菌发酵乳糖及乳脂明串珠菌发酵柠檬酸在乳液中产生的二氧化碳使酸乳酪和酸奶酒产品膨胀或起泡。微生物在食品工业中的应用5.1.2.1酸乳酸乳是新鲜牛乳经过乳酸菌发酵后制成的发酵乳饮料。根据其发酵方式可分为凝固型、搅拌型和饮料型三种。（1）乳酸菌种选择及生产工艺菌种的选择对发酵剂的质量起着重要的作用，应根据不同的生产目的选择适当的菌种，要以产品的主要技术特性，如产香、产酸、产生黏性物质及蛋白水解能力等作为发酵剂菌种的选择依据。通常使用两种或两种以上菌种的混合使用，相互产生共生作用。大量的研究证明，混合使用的效果比单一使用的效果好。微生物在食品工业中的应用①共同发酵法生产工艺共同发酵法双歧杆菌酸奶的生产工艺流程如下：

原料乳

↓标准化↓

调配←(蔗糖10%+葡萄糖2%)↓

均质(15～20MPa)↓

杀菌(115℃，8min)

↓

冷却(38～40℃)

↓

适量维生素C→接种←(双歧杆菌6%、嗜热链球菌（保加利亚乳杆菌）3%)

↓灌装←消毒瓶

↓

发酵(38～39℃，6h)

↓

冷却(10℃左右)

↓

冷藏(1～5℃)

↓

成品微生物在食品工业中的应用双岐杆菌酸奶的工艺要求：双歧杆菌产酸能力低，凝乳时间长，最终产品的口味和风味欠佳，因而，生产上常选择一些对双歧杆菌生长无太大影响，但产酸快的乳酸菌，如嗜热链球菌、保加利亚乳杆菌、嗜酸乳杆菌、乳脂明串珠菌等与双歧杆菌共同发酵。这样既可以使制品中含有足够量的双歧杆菌，又可以提高产酸能力，大大缩短凝乳时间，缩短生长周期，并改善制品的口感和风味。微生物在食品工业中的应用②

共生发酵法生产工艺双歧杆菌、酵母共生发酵乳的生产工艺流程如下：

原料乳

↓

标准化≥9.5%↓蔗糖10%＋葡萄糖2%→调配↓

均质(15～20MPa)

↓

杀菌(115℃，8min)↓

冷却(26～28℃)↓

两歧双歧杆菌6%→接种←乳酸酵母3%

↓

发酵(26～28℃，2h)

↓

升温(37℃)

↓

发酵(37℃，5h)

↓

冷却(10℃左右)

↓

罐装

↓

冷藏(l～5℃)

↓

成品微生物在食品工业中的应用双歧杆菌、酵母共生发酵乳的生产工艺要求：共生发酵法常用的菌种搭配为双歧杆菌和用于马奶酒制造的乳酸酵母，接种量分别为6%和3%。在调配发酵培养用原料乳时，用适量脱脂乳粉加入到新鲜脱脂乳中，以强化乳中固形物含量(固形物大于等于9.5%)，并加入10%蔗糖和2%的葡萄糖，接种时还可加入适量维生素C，以利于双歧杆菌生长。酵母菌的最适生长温度为26～28℃。为了有利于酵母先发酵，为双歧杆菌生长营造一个适宜的厌氧环境，因而接种后，首先在温度26～28℃下培养，以促进酵母的大量繁殖和基质乳中氧的消耗，然后将温度提高到30℃左右，以促进双歧杆菌的生长。微生物在食品工业中的应用由于采用了共生混合的发酵方式，双歧杆菌生长迟缓的状况大为改观，总体产酸能力提高，加快了凝乳速度，所得产品酸甜适中，富有纯正的乳酸口味和淡淡的酵母香气。此工艺生产的酸奶最好在生产7d内销售出去，而且在生产与销售之间必须形成冷冻链，因为即使在5～10℃以下，存放7d后，双歧杆菌活菌的死亡率高达96%，20℃下存放7d后，死亡率达99%以上。微生物在食品工业中的应用5.1.2.3干酪干酪的主要成分是蛋白质和脂肪。它是一种营养丰富、风味独特、较易消化的食品。干酪是在乳中（也可用脱脂或稀奶油）加入适量的乳酸菌发酵剂和凝乳酶，使蛋白质（主要是酪蛋白）凝固后，排除乳清，将凝块压成块状而制成的产品。制成后未经发酵的产品称新鲜干酪，经长时间发酵而成熟而制成的产品称为成熟干酪，这两种干酪称为天然干酪。微生物在食品工业中的应用干酪是一大类发酵乳制品，占世界发酵食品产量的1/4，是目前消费量仅次于酒类的一种发酵产品。目前世界干酪中，用牛乳生产的约占94%，羊奶及马奶等制品约占6%左右。根据干酪的质地特性和成熟的基本方式，可将干酪分为硬干酪、半硬干酪、和软干酪三类。它们可用细菌或霉菌成熟，或不经成熟。F.1.2解构赋值熟悉解构赋值模式匹配。如图所示，在控制台上输入如下命令，观察结果。F.1.2解构赋值熟悉对象解构赋值。如图所示，在控制台上输入如下命令，观察结果。F.1.2解构赋值熟悉字符串解构赋值。如图所示，在控制台上输入如下命令，观察结果。F.1.2解构赋值熟悉类似数组的解构赋值。如图所示，在控制台上输入如下命令，观察结果。F.1.2解构赋值解构从函数返回的多个值。函数只能返回一个值，如果要返回多个值，则可以将它们放在数组或对象中返回，有了解构赋值，取出这些值会更方便。如图所示，在控制台上输入如下命令，观察结果。F.1.2解构赋值解构从函数返回的对象。如图所示，在控制台上输入如下命令，观察结果。F.1.2解构赋值解构JSON数据。如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展【演练】熟悉数组扩展在浏览器中启用开发者工具。Array.from方法的使用。如图所示，在控制台上输入如下命令，观察结果。Array.from方法用于将类似数组的对象（Array-LikeObject）和可遍历（Iterable）的对象（包括ES6新增的数据结构Set及Map）转换为真正的数组。F.1.3数组扩展find方法的使用。如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展findIndex方法的使用。如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展keys方法的使用。如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展values方法的使用。如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展entries方法的使用。如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展map方法的使用。如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展reduce方法的使用。如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展filter过滤器的使用。如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展forEach循环的使用。如图所示，在控制台上输入如下命令，观察结果。F.1.3数组扩展every方法的使用。如图所示，在控制台上输入如下命令，观察结果。F.1.4对象扩展运算符在浏览器中启用开发者工具。如图所示，在控制台上输入如下命令，观察结果。【演练】熟悉对象扩展运算符（...）的使用F.1.4对象扩展运算符这里给出一个错误示例，如图所示，在控制台上输入如下命令，观察结果。F.1.5定义和使用类【演练】定义和使用类在浏览器中启用开发者工具。在控制台上输入如下命令，观察结果。//定义类classBar{doStuff(){console.log('123');}}//使用的时候，直接对类使用new命令varb=newBar();b.doStuff()F.2BootstrapBootstrap是全球最受欢迎的前端组件库之一，用于开发响应式布局、移动设备优先的Web项目。F.2.1Bootstrap简介Bootstrap是一套用于HTML、CSS和JavaScript开发的开源工具集。利用Bootstrap提供的Sass变量和大量Mixin、响应式栅格系统、可扩展的预制组件、基于jQuery的强大的插件系统，能够快速开发出原型或者构建整个项目。下面以Bootstrap4为例进行讲解，预计Bootstrap5中将删除jQuery依赖项，移除jQuery依赖之后，开发团队将使用原生的纯JavaScript来代替jQuery。F.2.2Bootstrap项目演练下面将创建一个基于Bootstrap响应式布局的前端项目，PC端和移动端能够自适应显示。该项目包含以下4部分。页头：设计页头，包括网页标题和导航栏，导航栏中使用下拉插件，屏幕较宽时显示为菜单，屏幕较窄时显示为折叠导航栏。轮播图：实现轮播效果，且图片呈现由大到小的动画。网站介绍：采用栅格系统进行布局，以图片和标题的形式展示，当鼠标指针经过时图片放大。表单提交：利用弹性盒子实现表单左侧的文字介绍，使其相对于表单的高度垂直居中。F.2.2Bootstrap项目演练新建项目文件夹。在项目文件夹下粘贴资源文件夹“img”。在项目文件夹下新建“css”文件夹，在“css”文件夹下粘贴Bootstrap样式文件“bootstrap.min.css”。在项目文件夹下新建“js”文件夹，在“js”文件夹下粘贴Bootstrap需要用到的JS文件，Bootstrap是基于jQuery的，需复制的文件有jquery.min.js和bootstrap.min.js。在项目文件夹下新建index1.html文件。【演练】设计页头F.2.2Bootstrap项目演练在浏览器中查看index1.html，页头宽屏效果如图所示。F.2.2Bootstrap项目演练逐步缩小浏览器的宽度或者在浏览器中将设备设置为移动端模式，页头窄屏效果如图所示。F.2.2Bootstrap项目演练引入Bootstrap所需的CSS和JS文件，如图所示，注意图中阴影部分所示的代码。代码讲解F.2.2Bootstrap项目演练观察头部架构，如图所示，注意图中阴影部分所示的代码。从整体上可以看出头部占一行，该行左侧是Logo，右侧是一个响应式导航栏。F.2.2Bootstrap项目演练观察响应式导航栏结构，如图所示，注意图中阴影部分所示的代码。F.2.2Bootstrap项目演练导航栏中可以设置下拉菜单，如图所示，注意图中阴影部分所示的代码。F.2.2Bootstrap项目演练如图所示，注意图中阴影部分所示的代码，其中一个li又是一个下拉菜单。F.2.2Bootstrap项目演练为保留分步骤演练的操作过程，将“index1.html”另存为“index2.html”，其代码如图所示，修改和添加阴影部分所示的代码。【演练】设计轮播图F.2.2Bootstrap项目演练在CSS文件夹下新建style2.css文件，这里对样式部分不做详细介绍，该文件内容如下。.carousel-scale.carousel-itemimg{transform:scale(1.12);/*放大到原来的1.12倍*/}.carousel-scale.carousel-item.activeimg{animation:scaleUpDown1sforwardscubic-bezier(0.250,0.460,0.450,0.940);/*使动画保持最终状态*/}@keyframesscaleUpDown{from{transform:scale(1.12);}to{-webkit-transform:scale(1);transform:scale(1);}}F.2.2Bootstrap项目演练在浏览器中查看index2.html，其运行结果如图所示，注意观察图片轮播和每一幅图片的动画效果。F.2.2Bootstrap项目演练轮播图的相关代码如图所示，注意图中阴影部分所示的代码。F.2.2Bootstrap项目演练【演练】设计网站介绍将“index2.html”另存为“index3.html”。修改如下语句，引入样式“style3.css”。<linkrel="stylesheet"type="text/css"href="css/style3.css">5GF.2.2Bootstrap项目演练将“style2.css”另存为“style3.css”，追加如下代码。.list{margin-top:2rem;}.list.item{margin:20px10px;padding-bottom:20px;border:1pxsolid#ccc;border-radius:20px;/*设置边框圆角，四个角都是20px*/}F.2.2Bootstrap项目演练.list.item.thumb{overflow:hidden;margin-bottom:1rem;}.list.item