Android学习小程序--不定期更新

Android学习小程序

我司最近需要将目前所做产品–小宝招商改为小程序，作为以前对Web开发一知半解的我，从头开始编写小程序。

小程序整体框架

文档内容可以参考：微信小程序官方 flex布局介绍
按照这几天的学习，我将小程序的编码分为3个阶段

1. 画UI（wxml，wxss）
2. 连数据（wxjs）
3. 修数据（整合UI和JS）

画UI

在我看来画好UI就是要学会flex布局。所以我接下来会重点学习这块内容。

Flex布局

Flex布局默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex有6大属性 ： flex-dircetion flex-wrap flex-flow justify-content align-items align-content

flex-dircetion

flex-dircetion 即决定主轴（main axis）的排布方向,有 row，row-reverse,column,column-reverse

flex-wrap

决定是否换行
1. warp ： 换行，第一行在上方。
2. nowarp ：不换行
3. wrap-reverse 换行，第一行在下方。

flex-flow

是flex-direction属性和flex-wrap属性的简写形式 默认值为row nowrap

justify-content

定义了项目在主轴上的对齐方式，属性有（举例flex-dircetion的属性为row）

flex-start	flex-end	center	space-between	space-around
左对齐	右对齐	居中	两端对齐，项目之间的间隔都相等。	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

定义了项目在交叉轴上的对齐方式 （举例flex-dircetion的属性为row）

flex-start	flex-end	center	baseline	stretch
起点对齐	终点对齐	中点对齐	项目的第一行文字的基线对齐	如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

WXML

WXML在我的理解看来是类似于HTML,Android当中xml文件一样的概念。WXML包括基础组件、事件系统两部分构成。

数据绑定

数据绑定部分：

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
 data: {
message: 'Hello MINA!'
 }
})

模板

组件

Components是对于共用的xml和js的封装，例如公共的弹窗，这里举例说明构建一个inputModal时

事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如id, dataset, touches。

连数据

wxml中调用JS

注意的地方

• 在js调用方法的时候一定要写this.