关于JavaScript

[学习网站]（www.liaoxuefeng.com/wiki/102291… 对于Android 同学来说，习惯写Kotlin 还是Java ，js 对我们来说学习成本比较低；

1. 面向函数开发，一切皆对象

和java 的对象不一样，函数也是js 的对象之一，对于js 来说，从常量到class 都是对象；

2. js的闭包

由于函数对于js来说也是对象，js 的闭包就是函数返回函数，就是类似java 的内部类，但是闭包的返回函数在执行的时候会延迟执行,类似下面函数调用

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

你以为f1 ，f2，f3 为1，4，9 其实为16.这是因为闭包函数会延迟执行到，最后的一次函数调用，所以返回函数不要引用任何循环变量，或者后续会发生变化的变量；闭包主要功能主要是咱函数内定义私有变量使其变的安全，类似java 的privide


function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    }
}

var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3

var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13

##代码执行顺序 java 代码更多是从上至下的代码赋值强类型开发语言，但是基于js 的弱语言的编译语言，变量可以先声明后给值

function create_counter(){
var x="hello"+y;
console.log(x);//hello Abner
var y="Abner"
}

关于HTML 5

[学习网站]（www.runoob.com/html/html5-… 现在页面的开发，基本MVVM 开发，Android 开发的我们，对于这种开发吗模式是非常的熟悉； js 是VM 处理数据和网络请求赋值给model，css+xml 构成View ，

xml

类似于Android 的layout 的Xml 文件。但是h5 这里只指定组件和大小；不指定样式；

css

主要只要指定xml 的位置，样式等，H5 的css+xml 构成了Android 的xml 的文件

关于小程序

1.小程序开发工具

工具下载

创建工程时需要AppID，所以我们需要先注册账号。

1-1.接入流程

小程序注册 --- 在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。
小程序信息完善 --- 填写小程序基本信息，包括名称、头像、介绍及服务范围等。
开发小程序 --- 完成小程序开发者绑定、开发信息配置后，可下载开发者工具、参考开发文档进行小程序的开发和调试。
提交审核和发布 --- 完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。

1-2.AppID

AppID --- 开发 --》开发设置

添加项目成员 --- 管理 --》成员管理

1-3.介绍开发工具

开发工具

2.小程序结构

小程序开发工具目前提供了 5 种文件的编辑：wxml、wxss、js、json、wxs 以及图片文件的预览。

2-1.新建页面代码

文件操作，有两种方式：

在目录树上右键，选择新建 Page，将自动生成页面所需要的 wxml、wxss、js、json。
在 app.json 的 pages 字段，添加需要新建的页面的路径，将会自动生成该页面所需要的文件。

2-2.配置

JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中。

注意：json文件中，不能写注释。

project.config.json --- 项目配置文件。
- 通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
- 考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
sitemap配置 --- 小程序内搜索，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。
app.json --- 全局配置。
页面配置 --- 每一个小程序页面的配置，只能配置window属性。
[.eslintrc.js]
(eslint.org/docs/user-g…) --
类似Android 的 lintOptions 代码检测，使代码更加一致并避免错误

2-3.WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言。类似安卓布局文件。

2-4.WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。类似安卓 style。

2-5.JS

相当于安卓中java，执行生命周期函数以及处理逻辑。

2-6.wx

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

小程序框架

1.MINA框架

渲染层和逻辑层

小程序的运行环境分成渲染层和逻辑层，它们分别由2个线程管理：渲染层的界面使用了WebView线程进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转。小程序的通信模型如下图所示：

1-1.渲染层（视图层View）

WXML 模板和 WXSS 样式工作在渲染层，.wxml 用于描述页面结构，和H5 xml/css 功能一样，只是增加了微信自己的一套识别逻辑

1-2.逻辑层(APP Service)

JS 工作在逻辑层。在逻辑层处理数据并发送至视图层，同时接受视图层发回的事件请求。

微信团队对JavaScript做出了一些优化，以便更高效的开发小程序，这些优化包括：

增加app方法用来注册程序，增加page方法用来注册页面。
提供丰富的API接口。
页面的作用域相对独立，并拥有了模块化的能力。

但是需要注意的是，小程序的逻辑层由js编写，但并不是在浏览器中运行的，所以JavaScript在Web中的一些能力都不能使用，比如 Dom、Window等。

1-3.setData函数

在页面page()中，我们使用setData函数来将数据从逻辑层发送到视图层，同时改变对应的this.data的值。单次设置的数据有一个大小限制，不能超过1024KB，避免一次性设置过多的数据。

看下数据是如何渲染的：

会新生成一个JS对象
此时可以对比前后两个JS对象得到变化的部分
然后把这个差异应用到原来的Dom树上
从而达到更新 UI 的目的，这就是 "数据驱动"的原理

Dom 是view 这个和Android jectpack 数据通知ui 一个道理

App和页面的注册以及生命周期

wx.navigateTo

1.程序与页面

渲染层和逻辑层

小程序包含一个描述整体程序的app和多个描述各自页面的page。

微信客户端是如何启动小程序的？

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。然后通过入口 app.json 的 pages 就知道当前小程序的所有页面路径。接着就会把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

2.注册小程序

注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
整个小程序只有一个 App 实例，是全部页面共享的。通过getApp方法可以获得这个实例。

注册小程序时一般做什么？

判断小程序的进入场景，场景值。
获取用户信息。
设置全局数据 --- globalData。

3.注册页面

注册页面

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。
简单的页面使用Page构造器进行构造。
复杂的页面使用Component构造器进行构造。

4.页面生命周期

页面生命周期

小程序组件

常用组件

自定义组件Component,自己的生命周期,和继承方法

注意：所有组件与属性都是小写，以连字符-连接

<组件 属性1="" 属性2="" ... >
组件内容
</组件>

2.属性类型

1.公共属性

id, class, style, hidden, data-*, bind*/catch*

2.数据绑定

数据绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来。

3.事件

事件

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

tap，longpress 等等。

绑定

bind：普通绑定。
catch：阻止事件向上冒泡。
mut-bind：互斥事件，使用mut-bind 绑定的事件不会同时响应两个。
capture-bind：捕获阶段响应。
capture-catch：捕获阶段响应，并中断事件的捕获阶段和取消冒泡阶段。

WXSS

wxss

css参考手册

1.选择器

.class：类选择器。
#id：id选择器，具有唯一性。
element：组件选择器。

2.样式的三种方式

内联(行内)样式 --- 通过 style 设置。
全局样式
- 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
局部(页面)样式
- 在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

优先级：行内样式 > 页面样式 > 全局样式。

注意：一般静态的样式统一写到 class 中。style 接收动态的样式。

布局

弹性盒子模型(Flexible Box) 属性(新)

demo 实例

github

跟着Android 学习小程序