Pointers

在移动端，各个平台或UI系统的原始指针事件模型基本都是一致，即：一次完整的事件分为三个阶段：手指按下、手指移动、和手指抬起，而更高级别的手势（如点击、双击、拖动等）都是基于这些原始事件的。

当指针按下时，Flutter会对应用程序执行命中测试(Hit Test)，以确定指针与屏幕接触的位置存在哪些widget， 指针按下事件（以及该指针的后续事件）然后被分发到由命中测试发现的最内部的widget，然后从那里开始，事件会在widget树中向上冒泡，这些事件会从最内部的widget被分发到widget根的路径上的所有Widget，这和Web开发中浏览器的事件冒泡机制相似， 但是Flutter中没有机制取消或停止冒泡过程，而浏览器的冒泡是可以停止的。

Flutter中可以使用Listener widget来监听原始触摸事件，它也是一个功能性widget。

基础 Widget

文本：Text Widget

文本是视图系统中的常见控件，用来显示一段特定样式的字符串，就比如 Android 里的 TextView、iOS 中的 UILabel。而在 Flutter 中，文本展示是通过 Text 控件实现的。

Text 支持两种类型的文本展示，一个是默认的展示单一样式的文本 Text，另一个是支持多种混合样式的富文本 Text.rich。

Widget 是什么？

Widget 是 Flutter 功能的抽象描述，是视图的配置信息，同样也是数据的映射，是 Flutter 开发框架中最基本的概念。前端框架中常见的名词，比如视图（View）、视图控制器（View Controller）、活动（Activity）、应用（Application）、布局（Layout）等，在 Flutter 中都是 Widget。

初步了解 Flutter 应用可以通过分析 Android Studio 创建的 Flutter 应用模板来了解。
打开 Android Studio，创建一个 Flutter 工程应用 flutter_app。Flutter 会根据自带的应用模板，自动生成一个简单的计数器示例应用 Demo。
该工程的代码如下：

变量

用 var 或者具体的类型来声明一个变量
当使用 var 定义变量时，表示类型是交由编译器推断决定的
未初始化的变量的值都是 null

常量

• const，表示变量在编译期间即能确定的值
• final 则不太一样，用它定义的变量可以在运行时确定值，而一旦确定后就不可再变

1
2
3
4
5
6
7
8
9
10

final name = 'Andy';
const count = 3;

var x = 70;  
var y = 30;
final z = x / y; // 正确
//const z = x / y; // 正确

final time = new DateTime.now(); // 正确
//const time = new DateTime.now(); // 错误

官网

• flutter
• dart
• pub
• flutter 中文网

使用openssl生成RSA的公钥和私钥

1
2

openssl genrsa -out rsa_1024_priv.pem 1024
openssl rsa -pubout -in rsa_1024_priv.pem -out rsa_1024_pub.pem

服务启动时加载pem文件，以eggjs为例，在app.js中

接收推送授权相关通知

微信文档地址：微信开放平台 步骤5中9

当公众号对第三方平台进行授权、取消授权、更新授权后，微信服务器会向第三方平台方的授权事件接收URL（https://xxx.xxxx.com/index.php/MiniApp/Auth/get_component_verify_ticket）推送相关通知

• 接到授权通知后：
  1. 获取小程序的基本信息
  2. 获取小程序码
  3. 修改小程序服务器地址
  4. 代码发布并提交审核
  5. 接收到审核成功的通知后发布
• 接到取消授权通知后：
  将该授权小程序状态标为取消授权，前端页面做相应处理，用户可在该页面进行重新授权

line-height的定义

行高，两行文字基线之间的距离
注：不同字体的基线位置不同

知乎邀请面板：

• 预览
• GitHub

FooseFhoes（电子商务网站首页）：

• 预览

LESS版微博：

• 预览
• GitHub

使用canvas绘制炫丽的时钟：

• 预览
• GitHub

使用canvas绘制炫丽的倒计时：

• 预览
• GitHub

Web App下图片滑动组件DEMO（移动端）：

• 预览
• GitHub

移动端相册：

• 预览

可移动的矩形色块（chrome）：

• 预览
• GitHub

电子商务系网站：

• 预览