微信小程序開發流程

初始化

前置條件
- 服務端完成相應的接口開發
- 申請小程序個人帳號
- PostMan 和 API
安裝微信開者工具
- 插件模式
- 快速啟動模板模式
- 空項目初始化
  - 自動生成 project.config.json

小程序基礎環境

初始化WePY
- 原生格局
  - 配置 json
  - 模板 wxml
  - 樣式 wxss
  - 交互邏輯 js

安裝WePY

// 全局安裝或更新WePY命令行工具
npm install wepy-cli -g
// 查看項目模板
wepy list
// 初始化項目(默認模板開啟了promise,async,function等)
wepy init standard miapp
// 進入項目目錄，安裝依賴
npm install
// 開啟實時編譯
wepy build --watch 
					
						
						
							1
						

						
							2
						

						
							3
						

						
							4
						

						
							5
						

						
							6
						

						
							7
						

						
							8
						

						
							9
						

						
							10

配置文件
- 項目配置
  project.config.json內含程序入口
  - "miniprogramRoot": "./dist"
- wepy編譯配置
  - wepy.config.js
- 開發工具勾選不驗證ssL之類

wepy目錄結構
- src 代碼編寫目錄
- src/app.wpy 框架項目的入口文件
- src/pages 小程序頁面
- dist 小程序運行代碼目錄（該目錄由WePY的build指令自動編譯生成)
小程序開發流程
- wepy框架在編輯器內編碼
- 開發工具負責調試

預備知識

語法提案流程
- Stage 0 - Strawman 展示階段
- Stage 1 - Proposal（征求意見階段）
- Stage 2 - Draft（草案階段）
- Stage 3 - Candidate（候選人階段）
- Stage 4 - Finished（定案階段）
轉碼器
- babel 將ES6轉碼為ES5
- .babelrc
  設置轉碼規則和插件
- babel-register 模塊
  改寫require命令，為它加上一個鉤子，對require命令加載的文件實時轉碼
- babel-core 模塊
  使用Babel 的 API 進行轉碼
- babel-polyfill
  轉換新的 JavaScript 句法（syntax），而不轉換新的 API
- Traceur 轉碼器
let 與 const
- let變量
  - 只在let命令所在的代碼塊（{}）內有效。
  - for循環
    - 設置循環變量的那部分是一個父作用域
    - 循環體內部是一個單獨的子作用域
  - 不存在變量提升
  - 暫時性死區（temporal dead zone，簡稱 TDZ）
    - let 變量凡在聲明之前使用會報錯
  - 同一塊域內，不允許重復聲明
- 塊級作用域存在的意義
  - 防止內層變量可能會覆蓋外層變量
  - 避免用來計數的循環變量泄露為全局變量
  - 塊級作用域的出現，使立即執行函數表達式（IIFE）不再必要
```
 // IIFE 寫法
    (function () {
    var tmp = ...; ... }());

    // 塊級作用域寫法
    {
    let tmp = ...; ... }
							
								
								
									1
								

								
									2
								

								
									3
								

								
									4
								

								
									5
								

								
									6
								

								
									7
								

								
									8
								

								
									9
								

								
									10
								

								
									11
								

							
```
- const 常量
  - 聲明一個只讀的常量
  - 只在聲明所在的塊級作用域內有效
  - 只能在聲明的位置后面使用
  - 不可重復聲明
- const 常量本質
  - 該變量指向的那個內存地址所保存的數據不得改動
    - 數值、字符串、布爾值簡單數據，等同于常量
    - 復合類型的數據對象和數組，const只能保證這個指針是指向另一個固定的地址

解構賦值

數組

模式匹配
let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4]
嵌套賦值

數據結構具有 Iterator 接口

 function* fibs() { let a = 0; let b = 1; while (true) { yield a;
            [a, b] = [b, a + b];
        }
    } let [first, second, third, fourth, fifth, sixth] = fibs();
    sixth // 5 
							
								
								
									1
								

								
									2
								

								
									3
								

								
									4
								

								
									5
								

								
									6
								

								
									7
								

								
									8
								

								
									9
								

								
									10
								

								
									11
								

								
									12

默認值
解構賦值允許指定默認值
let [foo = true] = []; foo // true
對象
- 對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值
  let { bar, foo } = { foo: "aaa", bar: "bbb" } foo // "aaa" bar // "bbb"
- 對象解構賦值模式VS變量區分

數組的擴展

擴展運算符…
將一個數組轉為用逗號分隔的參數序列

 console.log(...[1, 2, 3])
    // 1 2 3 [...'hello']
    // [ "h", "e", "l", "l", "o" ]
					
						
						
							1
						

						
							2
						

						
							3
						

						
							4
						

						
							5

ES6 其它
- Proxy 修改某些操作的默認行為
- Reflect 拿到語言內部的方法
- Promise pending fulfilled rejected
- Map和Set數據
  - Map 普通對象的鍵只能是字符串，但map可以是值：值形式
  - Set 不允許重復項，支持集合運算（類似redis）
- Generator函數返回一個遍歷器對象

ES6類的私有性

私有方法(ES6不提供，通過變通方法模擬實現)
利用symbol值的唯一性

 const bar = Symbol('bar'); const snaf = Symbol('snaf');

    export default class myClass{ // 公有方法 foo(baz) { this[bar](baz);
    } // 私有方法 [bar](baz) { return this[snaf] = baz;
    } // ... };
					
						
						
							1
						

						
							2
						

						
							3
						

						
							4
						

						
							5
						

						
							6
						

						
							7
						

						
							8
						

						
							9
						

						
							10
						

						
							11
						

						
							12
						

						
							13
						

						
							14
						

						
							15
						

						
							16
						

						
							17

實現私有方法的三種思路
- 在命名上加以區別
- 索性將私有方法移出模塊，模塊內部的所有方法都是對外可見
- 利用Symbol值的唯一性，將私有方法的名字命名為一個Symbol值
私有屬性提案
- 在屬性名之前加#, @已經被留給了 Decorator
箭頭函數中的this會與定義域的父級綁定

Symbol

表示獨一無二的值，是值而非對象，不能添加屬性。

作為屬性名的Symbol

防止某一鍵不小心被改寫或覆蓋

Symbol 值作為對象屬性名時，不能用點運算符

 let mySymbol = Symbol(); // 第一種寫法 let a = {};
    a[mySymbol] = 'Hello!'; // 第二種寫法 let a = {
        [mySymbol]: 'Hello!' }; // 第三種寫法 let a = {};
    Object.defineProperty(a, mySymbol, { value: 'Hello!' }); // 以上寫法都得到同樣結果 a[mySymbol] // "Hello!" const mySymbol = Symbol(); const a = {};

    a.mySymbol = 'Hello!';
    a[mySymbol] // undefined a['mySymbol'] //  "Hello!"
							
								
								
									1
								

								
									2
								

								
									3
								

								
									4
								

								
									5
								

								
									6
								

								
									7
								

								
									8
								

								
									9
								

								
									10
								

								
									11
								

								
									12
								

								
									13
								

								
									14
								

								
									15
								

								
									16
								

								
									17
								

								
									18
								

								
									19
								

								
									20
								

								
									21
								

								
									22
								

								
									23

在對象的內部，使用 Symbol 值定義屬性時，Symbol 值必須放在方括號之中
- 如若不在方括號中，屬性的鍵名就是字符串，而非代表的symbol值
  // ES6 增強對象寫法 let obj = { [s](arg) { ... } };
Symbol 作為屬性名，以 Symbol 值作為名稱的屬性，不會被常規方法遍歷得到
- Object.getOwnPropertySymbols方法才可以，本質上來講也不是私有屬性，只是看起來像（鴨子模型，看起來像鴨子它就是鴨子）

小結

js中有許多似是而非的東西，明明嚴格意義上來講，沒這玩意兒。但為了裝，他總是模仿，讓不知底細的你信以為真，用的時候報錯，還莫名奇妙。

本站文章版權歸原作者及原出處所有。內容為作者個人觀點，并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。

上一篇：選定子網掩碼能創建多少個子網
下一篇：小程序中公告消息左右滾動跑馬燈效果

小程序開發之wepy中的ES6知識

微信小程序開發流程

初始化

預備知識

小結

沙克云

定制

關于