微信小程序开发流程

初始化

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
     

   • 配置文件

     • 项目配置
       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 = ...;...}

   • 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
       

   • 默认值
     解构赋值允许指定默认值
     
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" ]

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;}// ...};

   • 实现私有方法的三种思路
     
     • 在命名上加以区别
     • 索性将私有方法移出模块，模块内部的所有方法都是对外可见
     • 利用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] // undefineda['mySymbol'] //  "Hello!"

   • 在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中
     
     • 如若不在方括号中，属性的键名就是字符串，而非代表的symbol值
       
// ES6 增强对象写法
let obj = {
[s](arg) { ... }
};

   • Symbol 作为属性名，以 Symbol 值作为名称的属性，不会被常规方法遍历得到
     
     • Object.getOwnPropertySymbols方法才可以，本质上来讲也不是私有属性，只是看起来像（鸭子模型，看起来像鸭子它就是鸭子）

小结

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