第一章 微信小程序
认识小程序
小程序简介
微信小程序，英文名称为Wechat Mini Program，小程序是微信的一种新的开发能力，具有出色的用户的使用体验，可以在微信内被便捷地获取和传播；
小程序特征
无须安装
触手可及
用完即走
无须卸载
小程序应用场景的特点
1. 简单的业务逻辑
简单是指应用本身的业务逻辑并不复杂，例如：家政服务，订餐类应用，天气预报类应用，都符合 “ 简单 ” 这个特性。
2. 低频度的使用场景
低频度是小程序使用场景的另一个特点；比如提供在线购买电影票服务的小程序应用 “猫眼‘
用户对该小程序的使用频度不是很高，就没有必要在手机安装一个单独功能的APP;
如果某种应用的使用频度很高（如社交类QQ,wx,金融类的支付宝，等等），则以原生App的方式提供给用户服务效果会更好；
微信小程序开发流程
注册小程序账号
浏览器搜索：微信公众平台，进行账号注册，如果已经注册好了的话就不需要注册了，直接点击登录即可
进入如下页面，再点击小程序
然后完成小程序注册
注册好了之后会给你填写的邮箱发送一个激活小程序的信息
点击下面那个网址，就能够完成小程序的注册了
微信开发工具下载及安装
先在微信官方文档，找到工具栏，点击微信开发者工具，根据自己软件下载不同的版本，点击下载即可，本文下载稳定版Windows64位为例
下载完成后点击安装完成即可
用微信扫描二维码就可以完成登录
微信小程序开发者工具界面功能
成功创建项目后，就进入微信小程序开发者工具界面
微信开发者工具分为三个模块：模拟器、调试器、编辑器（如图）
上图是我们的一个模拟器
下图是我们的编辑器，用于编写我们的逻辑代码
下图是我们的一个调试器，有问题就会在调试区域显示
第二章 微信小程序开发基础
小程序的基本目录结构
在微信小程序的基本目录结构下，项目主目录下有2个子目录（pages 和 utils）和 4个文件（app.js , app.json app.wxss 和 project.config.json）
主体文件
微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录下，名字是固定的
app.js 小程序；逻辑文件，主要用来注册小程序全局实例
app.json 小程序公共设置文件，配置小程序的全局设置
app.wxss 小程序主样式表文件，类似HTML的.css文件
页面文件
小程序通常是由多个页面组成，每个页面包括4个文件，同一个页面的这4个文件必须具有相同的路径与文件名
.js 页面逻辑文件
.wxml 页面结构文件
.wxss 页面样式文件
.json 页面配置文件
小程序的开发框架
以上是小程序MINA框架示意图：
视图层
MINA框架是由视图层由WXML与WXSS编写，由组件来进行组件展示；
对于微信小程序而言，视图层就是所有 .wxml 文件与 .wxss 文件的集合：
逻辑层
逻辑层用于处理事务逻辑；逻辑层就是所有的 .js脚本文件的集合
微信小程序开发框架的逻辑层就是采用JavaScript编写的。
数据层
1. 页面临时数据或缓存
在Page（）中，使用setData函数将数据从逻辑层发送视图层，同时改变对应的this,data的值；
setData()函数的参数接收一个对象，以（key,value）的形式表示将key在this. data中对应的值改变成Value；
2. 文件存储（本地存储）
使用数据API接口，如下：
wx.getStorage 获取本地数据缓存
wx.setStorage 设置本地数据缓存
wx.clearStorage 清理本地数据缓存
3 . 网络存储与调用
上传或下载文件API接口，如下：
wx. request 发送网络请求
wx.uploadFile 上传文件
wx.downloadFile 下载文件
调用URL的API接口，如下：
wx.navigateTo 新窗口打开页面
wx.redirectTo 原窗口打开页面
创建小程序页面
首先单击左上角的”项目“，找到”新建项目“，点击它：
如图所示：
选好你自己想要的模板，（一般我们是使用：JS模板），选好后单击”确认“
就会进入以下页面（如图所示）：
这样我们就创建好一个项目了；
接下来带大家创建一个页面文件：
创建第一个页面文件
首先我们找到 app.json 这个文件，点击它：
就会出现在我们的右边的代码编辑区：
注意：我们的页面文件是创建在”pages“下的（小伙伴们别创建错了！）
在 ”pages“:[ ] 里面输入你要创建的页面文件
我来演示一下，例如：
我要在”pages“下创建一个名字叫”demo02“的文件，就可以在 ”app.json“下输入以下代码：
"pages": [
"pages/demo02/demo02",
"pages/logs/logs"
]
注意：logs:是日志文件，自带的文件
输入完毕后，记得保存！
这样你就会发现 ”pages“包下多了一个文件夹”demo02“
点开它会发现里面就会有 4个文件
配置文件
小程序的配置文件按其作用范围可以全局配置文件（app.json）和页面配置文件（*.json）
全局配置文件
window配置项
window配置项负责设置小程序状态栏，导航栏，标题，窗口背景色等系统样式
tabBar配置项
当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现。
tabBar 中 list 的选项：
networkTimeout 配置项
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。networkTimeout可以配置的属性如表：
页面配置文件
页面配置文件（*.json），只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面文件后，页面中的window配置值将覆盖全局配置文件（app.json）中的配置值；
页面中的window配置只需书写配置项，不必书写window；
逻辑层文件
项目逻辑文件
项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数，全居属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取
App()函数用于注册一个小程序，参数为Object,用于指定小程序的生命周期函数，用户自定义属性和方法。参数如下：
页面逻辑文件
页面结构文件
页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即. wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view> )标志，每个组件可以设置不同的属性( 如id、class 等)，组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。
数据绑定
小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的dala 进行动态绑定，在页面中显示dala中的数据。小程序的数据绑定使用Musadle 语法( {{ }} )将变量或运算规则包装起来。
1.简单绑定
简单绑定是指使用双大括号( {{ }} )将变量包起来，在页面中直接作为字符串输出使用简单绑定可以作用于内容、组件属性、控制属性等的输出。
2.运算
在 {{ }} 内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符合JavaScript运算规则。
页面样式文件
页面样式文件(NX)是基于css拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。wxss具有css的大部分特性，小程序对WXSs做了一些扩充和修改。
1.尺寸单位
由于css原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXS在此基础上增加了尺寸单位rpx (respnesive pixel)。WXSS 规定屏幕宽度为750 rpx，在系统数据绑定过程中rpx会按比例转化为px。例如，iPhone6的屏幕宽度为375px,即750rpx需按比例转化为375px,所以，在模拟机中，1px=0.5px
2.样式导入
为了便于管理WXSS文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import语句导入即可
例如：
A.wxss
.cont{ border: 1px solid #f00;}
B.wxss
@import "A.wxss"
.cont{padding:5rpx; margin:5px}
3. 选择器
目前，wxss支持CSS中常用的选择器，如，.class #id element ::before ::after
4.WXSS常用属性
第三章 页面布局
盒子模型
微信小程序的视图层由WXML和Wxss组成。其中，wXss (WeXin Syle Shee)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。wXSs 具有CSS的大部分特性，因此，本章将重点讲解CSS中的布局相关内容。
在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中
的各个元素。
盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中，-一个独立的盒子模型由内
容(content)、 内边距(padding)、 边框(border)和外边距(margin) 4个部分组成，如图3-1
此外，对edingn bunter 和mrign可以进一步细化为上、 下、左、右4个部分，在CS中可以分别进行设置，如图3 -2所示。
以上图中各元素含义如下：
■ width 和 height 内容的宽度和高度。
■ padding-top、padding-right、padding -bottom 和 上内边距、右内边距、底内边距和左内边距。
■ border-top、border-right、border-bottom 和 border-left 上边框、右边框、底边框和左边框。
■ margin-top、margin-right、margin -bottom 和 margin-left 上外边距、右外边距、底外边距和左外边距。
因此，一个盒子实际占有的宽度（高度）应该由“内容” + “内边距” + “边框” + “外边距”组成
块级元素与行内元素
元素按显示方式分为块级元素、行内元素和行内块元素，它们的显示方式由display属性控制。
块级元素
块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下:
(1)一个块级元素占一行。
(2)块级元素的默认高度由内容决定，除非自定义高度。
( 3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度,
( 4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(5)块级元素可以容纳块级元素和行内元素。
行内元素
行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不古有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的洋式。将一个元素的 display 属性设置为 imnline 后，该元素即被设置为行内元素。行内元素的持点如下:
(1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定
(2)行内元素内不能放置块级元素，只级容纳文本或其他行内元素。
(3)同一块内、行内元素和其他行内元素显示在同一行。
行内块元素
当元素的 display 属性被设置为 imnline -block 时，元素被设置为行内块元素。
行内块元素可以被设置高度、宽度、内边距和外边距。
浮动与定位
元素浮动
元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定立置的过程。在 CSS 中，通过 foat 属性来定义浮动
其中，none--默认值，表示元素不浮动;
left--元素向左浮动:
right--元素向右浮动
元素清除
由于浮动元素不再占用原文档流的位置，因此它会对页面中其他元素的排列产生影响ECSS 中，clear 属性用于清除浮动元素对其他元素的影响
left--清除左边浮动的影响，也就是不允许左侧有浮动元素
right--清除右边浮动的影响，也就是不允许右侧有浮动元素!
both--同时清除左右两侧浮动的影响:
none--不清除浮动。
元素定位
浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过 position 属性可以实现对页面元素的精确定位。
其中，static--默认值，该元素按照标准流进行布局;
relative--相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它;
absolute--绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响;
fxed--固定定位，相对于浏览器窗口进行定位。
flex定位
flex布局主要由容器和项目组成，采用fex布局的元素称为ex容器(flex containefex 布局的所有直接子元素自动成为容器的成员，称为fex项目(fex item)。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴开始位置(与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置做 cross start，结束位置叫做 cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫cross size。flex布局模型。
设置 display 属性可以将一个元素指定为 fex 布局，设置 fex-direction 属性可以指定轴方向。主轴既可以是水平方向，也可以是垂直方向。
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
