微信小程序开发流程
初始化
前置条件
- 服务端完成相应的接口开发
- 申请小程序个人帐号
- PostMan 和 API
安装微信开者工具
- 插件模式
- 快速启动模板模式
- 空项目初始化
- 自动生成 project.config.json
小程序基础环境
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 = ...; ... }
- const 常量
- 声明一个只读的常量
- 只在声明所在的块级作用域内有效
- 只能在声明的位置后面使用
- 不可重复声明
- const 常量本质
- 该变量指向的那个内存地址所保存的数据不得改动
- 数值、字符串、布尔值简单数据,等同于常量
- 复合类型的数据对象和数组,const只能保证这个指针是指向另一个固定的地址
- 该变量指向的那个内存地址所保存的数据不得改动
- let变量
解构赋值
数组
- 模式匹配
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
- 模式匹配
- 默认值
解构赋值允许指定默认值
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" ]
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; } // ... };
- 实现私有方法的三种思路
- 在命名上加以区别
- 索性将私有方法移出模块,模块内部的所有方法都是对外可见
- 利用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!"
- 在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中
- 如若不在方括号中,属性的键名就是字符串,而非代表的symbol值
// ES6 增强对象写法
let obj = {
[s](arg) { ... }
};
- 如若不在方括号中,属性的键名就是字符串,而非代表的symbol值
- Symbol 作为属性名,以 Symbol 值作为名称的属性,不会被常规方法遍历得到
- Object.getOwnPropertySymbols方法才可以,本质上来讲也不是私有属性,只是看起来像(鸭子模型,看起来像鸭子它就是鸭子)
小结
js中有许多似是而非的东西,明明严格意义上来讲,没这玩意儿。但为了装,他总是模仿,让不知底细的你信以为真,用的时候报错,还莫名奇妙。