微信小程序開發(fā)教程

F.1ES61996年11月，JavaScript的創(chuàng)造者——Netscape公司決定將JavaScript提交給國際標準化組織ECMA，希望這種語言能夠成為國際標準。1997年，ECMA發(fā)布了262號標準文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語言的標準，并將這種語言稱為ECMAScript1.0。F.1.1let和const命令【演練】熟悉let和const命令的使用如圖所示，在控制臺上輸入如下命令，觀察結果。注意：圖中“>”后為輸入測試的代碼，多行代碼之間換行時可按“Shift+Enter”組合鍵，“<”后為代碼運行結果。F.1.1let和const命令for循環(huán)很合適使用let命令，因為通常循環(huán)的變量只在循環(huán)體內部使用，在外部是不需要的。如圖所示，在控制臺上輸入如下命令，觀察結果。F.1.1let和const命令const命令用于聲明一個只讀的常量。一旦聲明，常量的值就不能改變。如圖所示，在控制臺上輸入如下命令，觀察結果。F.1.2解構賦值【演練】熟悉解構賦值在瀏覽器中啟用開發(fā)者工具。熟悉解構賦值。如圖所示，在控制臺上輸入如下命令，觀察結果。微生物在食品工業(yè)中的應用（2）生理生化特點化能異養(yǎng)型，對營養(yǎng)要求嚴格，生長繁殖需要多種氨基酸、維生素等。根據對碳水化合物的發(fā)酵類型，可將乳桿菌屬分為三個類群，即第一類是同型發(fā)酵群：發(fā)酵葡萄糖產生85%以上的乳酸，不能發(fā)酵戊糖和葡萄糖酸鹽；第二類是兼異性發(fā)酵群：即能發(fā)酵葡萄糖產生85%以上的乳酸，也以發(fā)酵某些戊糖和葡萄糖酸鹽；第三類是異型發(fā)酵群：發(fā)酵葡萄糖產生等量物質的乳酸、乙酸、乙醇及CO2。微生物在食品工業(yè)中的應用5.1.2.1微生物與發(fā)酵乳制品中風味物質的形成（1）乳糖的乳酸發(fā)酵這是所有發(fā)酵乳制品所共有的最為重要的乳糖代謝方式。由乳酸菌產生的乳酸是乳制品中最基本的風味化合物。一般乳液中含4.7%～4.9%的乳糖，它是乳液中微生物生長的主要能源和碳源。因此，。那些具有乳糖酶的乳鏈球菌、嗜熱鏈球菌和乳桿菌等才能在乳液中正常生長，并在與其他菌的竟爭生長中成為優(yōu)勢菌群。微生物在食品工業(yè)中的應用（2）檸檬酸轉變?yōu)殡p乙酰乳脂明串珠菌、乳鏈球菌丁二酮亞種等將發(fā)酵牛乳中產生的另一種代謝物質檸檬酸轉變?yōu)殡p乙酰，它是乳制品中極其重要的風味物質，它使發(fā)酵乳制品具有奶油特征，還有一種類似堅果仁的香味和風味。但乳脂明串球菌在牛乳中生長很慢，利用乳糖產酸的的能力弱，因而在生產上常加葡萄糖和酵母膏的辦法促進其生長，這樣只有當乳液中有足夠的酸時，乳脂明串珠菌才能發(fā)酵牛乳中的檸檬酸生成雙乙酰。研究還表明，風味細菌的檸檬酸酶只有在pH低于6.0以下時才有活性，而牛乳的pH一般為6.6～6.7，這就要求它與乳酸菌共同生長。微生物在食品工業(yè)中的應用（3）乙醛的產生嗜熱鏈球菌和保加利亞乳桿菌在乳酸的代謝過程中，產生的乙醛也是一種重要的風味物質，以增進酸牛乳的美味。但發(fā)酵酸性奶油時，乙醛的存在會有害，會帶來一種不良的風味，故酸性奶油的生產中禁用這些菌株。而乙醇脫氫酶活性較強的乳脂明串珠菌則能將乙醛轉變?yōu)橐掖?。微生物在食品工業(yè)中的應用（4）乙醇的產生乳脂明串珠菌在異型乳酸發(fā)酵中可形成少量的乙醇，它也是發(fā)酵乳制品中重要的風味物質之一，而乳脂明串珠菌有較強的乙醇脫氫酶活性，能將乙醛轉變?yōu)橐掖?。故也稱風味菌、香氣菌或產香菌。在酸奶酒中的乙醇則是由酵母菌產生的，不同乳制成的酸奶酒由不同的酵母菌產生乙醇。如牛奶酒由克菲爾酵母和克菲爾圓酵母產生，而馬奶酒則是由乳酸酵母產生的。微生物在食品工業(yè)中的應用（5）甲酸、乙酸和丙酸的產生鏈球菌丁二酮亞種，利用酪蛋白水解物形成的揮發(fā)性脂肪酸中的甲酸、乙酸和丙酸也是構成發(fā)酵乳制品風味物質的重要化合物。揮發(fā)性脂肪酸對成熟干酪的口味形成是有益的。（6）二氧化碳的產生異型乳酸菌、酵母菌發(fā)酵乳糖及乳脂明串珠菌發(fā)酵檸檬酸在乳液中產生的二氧化碳使酸乳酪和酸奶酒產品膨脹或起泡。微生物在食品工業(yè)中的應用5.1.2.1酸乳酸乳是新鮮牛乳經過乳酸菌發(fā)酵后制成的發(fā)酵乳飲料。根據其發(fā)酵方式可分為凝固型、攪拌型和飲料型三種。（1）乳酸菌種選擇及生產工藝菌種的選擇對發(fā)酵劑的質量起著重要的作用，應根據不同的生產目的選擇適當的菌種，要以產品的主要技術特性，如產香、產酸、產生黏性物質及蛋白水解能力等作為發(fā)酵劑菌種的選擇依據。通常使用兩種或兩種以上菌種的混合使用，相互產生共生作用。大量的研究證明，混合使用的效果比單一使用的效果好。微生物在食品工業(yè)中的應用①共同發(fā)酵法生產工藝共同發(fā)酵法雙歧桿菌酸奶的生產工藝流程如下：

原料乳

↓標準化↓

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

均質(15～20MPa)↓

殺菌(115℃，8min)

↓

冷卻(38～40℃)

↓

適量維生素C→接種←(雙歧桿菌6%、嗜熱鏈球菌（保加利亞乳桿菌）3%)

↓灌裝←消毒瓶

↓

發(fā)酵(38～39℃，6h)

↓

冷卻(10℃左右)

↓

冷藏(1～5℃)

↓

成品微生物在食品工業(yè)中的應用雙岐桿菌酸奶的工藝要求：雙歧桿菌產酸能力低，凝乳時間長，最終產品的口味和風味欠佳，因而，生產上常選擇一些對雙歧桿菌生長無太大影響，但產酸快的乳酸菌，如嗜熱鏈球菌、保加利亞乳桿菌、嗜酸乳桿菌、乳脂明串珠菌等與雙歧桿菌共同發(fā)酵。這樣既可以使制品中含有足夠量的雙歧桿菌，又可以提高產酸能力，大大縮短凝乳時間，縮短生長周期，并改善制品的口感和風味。微生物在食品工業(yè)中的應用②

共生發(fā)酵法生產工藝雙歧桿菌、酵母共生發(fā)酵乳的生產工藝流程如下：

原料乳

↓

標準化≥9.5%↓蔗糖10%＋葡萄糖2%→調配↓

均質(15～20MPa)

↓

殺菌(115℃，8min)↓

冷卻(26～28℃)↓

兩歧雙歧桿菌6%→接種←乳酸酵母3%

↓

發(fā)酵(26～28℃，2h)

↓

升溫(37℃)

↓

發(fā)酵(37℃，5h)

↓

冷卻(10℃左右)

↓

罐裝

↓

冷藏(l～5℃)

↓

成品微生物在食品工業(yè)中的應用雙歧桿菌、酵母共生發(fā)酵乳的生產工藝要求：共生發(fā)酵法常用的菌種搭配為雙歧桿菌和用于馬奶酒制造的乳酸酵母，接種量分別為6%和3%。在調配發(fā)酵培養(yǎng)用原料乳時，用適量脫脂乳粉加入到新鮮脫脂乳中，以強化乳中固形物含量(固形物大于等于9.5%)，并加入10%蔗糖和2%的葡萄糖，接種時還可加入適量維生素C，以利于雙歧桿菌生長。酵母菌的最適生長溫度為26～28℃。為了有利于酵母先發(fā)酵，為雙歧桿菌生長營造一個適宜的厭氧環(huán)境，因而接種后，首先在溫度26～28℃下培養(yǎng)，以促進酵母的大量繁殖和基質乳中氧的消耗，然后將溫度提高到30℃左右，以促進雙歧桿菌的生長。微生物在食品工業(yè)中的應用由于采用了共生混合的發(fā)酵方式，雙歧桿菌生長遲緩的狀況大為改觀，總體產酸能力提高，加快了凝乳速度，所得產品酸甜適中，富有純正的乳酸口味和淡淡的酵母香氣。此工藝生產的酸奶最好在生產7d內銷售出去，而且在生產與銷售之間必須形成冷凍鏈，因為即使在5～10℃以下，存放7d后，雙歧桿菌活菌的死亡率高達96%，20℃下存放7d后，死亡率達99%以上。微生物在食品工業(yè)中的應用5.1.2.3干酪干酪的主要成分是蛋白質和脂肪。它是一種營養(yǎng)豐富、風味獨特、較易消化的食品。干酪是在乳中（也可用脫脂或稀奶油）加入適量的乳酸菌發(fā)酵劑和凝乳酶，使蛋白質（主要是酪蛋白）凝固后，排除乳清，將凝塊壓成塊狀而制成的產品。制成后未經發(fā)酵的產品稱新鮮干酪，經長時間發(fā)酵而成熟而制成的產品稱為成熟干酪，這兩種干酪稱為天然干酪。微生物在食品工業(yè)中的應用干酪是一大類發(fā)酵乳制品，占世界發(fā)酵食品產量的1/4，是目前消費量僅次于酒類的一種發(fā)酵產品。目前世界干酪中，用牛乳生產的約占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數組擴展【演練】熟悉數組擴展在瀏覽器中啟用開發(fā)者工具。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循環(huán)的使用。如圖所示，在控制臺上輸入如下命令，觀察結果。F.1.3數組擴展every方法的使用。如圖所示，在控制臺上輸入如下命令，觀察結果。F.1.4對象擴展運算符在瀏覽器中啟用開發(fā)者工具。如圖所示，在控制臺上輸入如下命令，觀察結果?！狙菥殹渴煜ο髷U展運算符（...）的使用F.1.4對象擴展運算符這里給出一個錯誤示例，如圖所示，在控制臺上輸入如下命令，觀察結果。F.1.5定義和使用類【演練】定義和使用類在瀏覽器中啟用開發(fā)者工具。在控制臺上輸入如下命令，觀察結果。//定義類classBar{doStuff(){console.log('123');}}//使用的時候，直接對類使用new命令varb=newBar();b.doStuff()F.2BootstrapBootstrap是全球最受歡迎的前端組件庫之一，用于開發(fā)響應式布局、移動設備優(yōu)先的Web項目。F.2.1Bootstrap簡介Bootstrap是一套用于HTML、CSS和JavaScript開發(fā)的開源工具集。利用Bootstrap提供的Sass變量和大量Mixin、響應式柵格系統(tǒng)、可擴展的預制組件、基于jQuery的強大的插件系統(tǒng)，能夠快速開發(fā)出原型或者構建整個項目。下面以Bootstrap4為例進行講解，預計Bootstrap5中將刪除jQuery依賴項，移除jQuery依賴之后，開發(fā)團隊將使用原生的純JavaScript來代替jQuery。F.2.2Bootstrap項目演練下面將創(chuàng)建一個基于Bootstrap響應式布局的前端項目，PC端和移動端能夠自適應顯示。該項目包含以下4部分。頁頭：設計頁頭，包括網頁標題和導航欄，導航欄中使用下拉插件，屏幕較寬時顯示為菜單，屏幕較窄時顯示為折疊導航欄。輪播圖：實現輪播效果，且圖片呈現由大到小的動畫。網站介紹：采用柵格系統(tǒng)進行布局，以圖片和標題的形式展示，當鼠標指針經過時圖片放大。表單提交：利用彈性盒子實現表單左側的文字介紹，使其相對于表單的高度垂直居中。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”，其代碼如圖所示，修改和添加陰影部分所示的代碼?！狙菥殹吭O計輪播圖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);/*使動畫保持最終狀態(tài)*/}@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