微信小程序开发流程

初始化

1. 前置条件

   • 服务端完成相应的接口开发
   • 申请小程序个人帐号
   • PostMan 和 API

2. 安装微信开者工具

   • 插件模式
   • 快速启动模板模式
   • 空项目初始化 
     
     • 自动生成 project.config.json

3. 小程序基础环境

   • 初始化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之类

4. wepy目录结构

   • src 代码编写目录
   • src/app.wpy 框架项目的入口文件
   • src/pages 小程序页面
   • dist 小程序运行代码目录（该目录由WePY的build指令自动编译生成)

5. 小程序开发流程

   • wepy框架在编辑器内编码
   • 开发工具负责调试

预备知识

1. 语法提案流程

   • Stage 0 - Strawman 展示阶段
   • Stage 1 - Proposal（征求意见阶段）
   • Stage 2 - Draft（草案阶段）
   • Stage 3 - Candidate（候选人阶段）
   • Stage 4 - Finished（定案阶段）

2. 转码器

   • babel 将ES6转码为ES5
   • .babelrc 
     设置转码规则和插件
   • babel-register 模块 
     改写require命令，为它加上一个钩子，对require命令加载的文件实时转码
   • babel-core 模块 
     使用Babel 的 API 进行转码
   • babel-polyfill 
     转换新的 JavaScript 句法（syntax），而不转换新的 API
   • Traceur 转码器

3. 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只能保证这个指针是指向另一个固定的地址

4. 解构赋值

   • 数组

     • 模式匹配 
       
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变量区分

5. 数组的扩展

   • 扩展运算符… 
     将一个数组转为用逗号分隔的参数序列

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

6. ES6 其它

   • Proxy 修改某些操作的默认行为
   • Reflect 拿到语言内部的方法
   • Promise pending fulfilled rejected
   • Map和Set数据 
     
     • Map 普通对象的键只能是字符串，但map可以是值：值形式
     • Set 不允许重复项，支持集合运算（类似redis）
   • Generator函数返回一个遍历器对象

7. 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会与定义域的父级绑定

8. 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中有许多似是而非的东西，明明严格意义上来讲，没这玩意儿。但为了装，他总是模仿，让不知底细的你信以为真，用的时候报错，还莫名奇妙。