1-3 章微信小程序复习

 第一章 微信小程序概述

小程序的特征：

1.无需安装

2.触手可及

3.用完即走

4.无需卸载

小程序应用场景的特点：

1简单的业务逻辑

2低频度的使用场景

注册小程序账号流程如下：

第1步，在微信公众平台官网首页（mp.weixin.qq.com）单击右上角“立即注册”按钮；

第2步，选择账号类型，单击“小程序”选项；

第3步，进入账号信息页面，填写邮件地址，作为以后小程序后台的账号；

第4步，填写个人账号信息，点击该邮件中的激活链接进入主体信息页面进行“主体类型”选择，选“个人”类型；

第5步，进入主体信息登记界面，完善主体信息，即可完成注册流程。

（在小程序管理页面，点击“开发”选项，然后点击“开发设置”，即可查看自己的开发者ID（AppID））

微信开发工具的下载和安装：

1. 在浏览器中打开微信开发者工具官方网站：微信开发者工具下载地址与更新日志 | 微信开放文档
2. 单击“开发者工具”选项，根据您的操作系统选择合适的版本进行下载，如Windows、Mac OS等。
3. 下载完成后，双击安装程序进行安装。
4. 安装完成后，打开微信开发者工具，登录您的微信开发者账号，即可开始使用。

创建第一个小程序项目

   如果你是第一次打开或长时间未打开“微信web开发者工具“，打开后，开发工具会弹出一个二维码 ；

使用开发者的微信扫描验证进入，单击"小程序项目”,将出现对话框，填写项目目录和项目名称，填写appID,选不使用云服务,点击“确定”按钮；

后续编写运行，就可以发布。开发者也可以点击工具栏“预览”，扫描后可在微信客户端体验；

开发者还可以单击工具栏中的“上传”按钮，将小程序上传到微信公众平台，此时在微信公众平台，点击“开发者版本“的”提交审核“并审核通过后，审核版本按钮变成为”线上版本“后，开发者单击”发布“即可在微信发现搜索该小程序项目。

第二章 微信小程序开发基础

 小程序的基本目录结构

pages：包含所有页面文件；

utils:工具包

app.js:小程序逻辑文件，主要用来注册小程序全局实例

app.jsomn:小程序公共设置文件，配置小程序全局设置

app.wxss：小程序主要样式表文件

 

index.js：页面逻辑文件

index.wxml：页面结构文件

index.wxss：页面样式文件

index.json：页面配置文件

 创建小程序

第一步，删除index文件夹（pages目录里），

第二步，点击pages文件，在文件右上新建新建文件夹（英文命名，例如dong），分别新建     dong .js   dong.json    dong.wxml   dong.wxss 等文件

第三步，删除原先pages，替换成现在用的"pages/dong/dong",页面文件。

第四步 分别编辑并保存dong .js   dong.json    dong.wxml   dong.wxss，代码如下：

dong .js：

Page({

})

 dong.json ：

{
  
}

dong.wxml ：

星空白

dong.wxss：css样式

完成以上步骤，在工具栏点击编译，即完成。

运行效果图：

配置文件

全局配置文件

window配置项：

  tabBar配置

tabbar中lis选项

第三章 页面布局

3.1 盒子模型

盒子模型就是我们在页面设计中经常用到的一种思维模型。在css中，一个独立的盒子模型由内容（content），内边距（padding），边框（border）和外边框（margin）四个部分组成

3.2.1块级元素

块级元素特点：

1.一个块元素占一行

2.块级元素的默认高度由内容决定，除非自定义高度

3.块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度

4.块级元素的的宽高，外边距及内边距都可以自定义设置

5.块级元素可以容纳块级元素和行内元素。

3.2.2  行内元素

行内元素的特点：

1.行内元素不能被设置高度和宽度，其中高度和宽度由内容决定。

2行内元素不能放置块级元素，只能容纳文本或其它行内元素

3同一块内，行内元素和其他行内元素显示在同一行。

 3.2.3 行内块元素

当元素的display属性被设置为inline-block时，元素被设置为行内块元素。行内块元素可以被设置高度，宽度，内边距和外边距

3.3.1元素浮动与清除

元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置元素 

none--默认值，表示元素不动

left--表示元素向左浮动

right-- 表示元素向右浮动

3.3.2元素定位

其中，static——默认值，表示元素按照标准流进行布局，relative ——相对定位，absolute——绝对定位，fixed——固定定位。

3.4 flex布局

3.4.1 容器属性 

flex容器支持的属性有7种

 

1.display

 display用来指元素是否为fkex布局，格式为：

.box{display:flex|inline-flex;}

 flex--块级flex布局

inline-flex --行内flex布局

2.flex-direction

flex-direction用于设置主轴的方向，即项目排列的方向，语法格式为：

.box{flex-direction:row|row-reverse|column|column-reverse;}

 row——主轴为水平方向，起点在左端（a）

row-reverse——主轴为水平方向，起点在右端(b)

colimn——主轴为垂直方向，起点在顶端(c)

column-reverse——主轴为垂直方向，起点在底端(d)

3.4.2 项目属性