微信小程序1-4

认识微信小程序

微信小程序开发流程

微信小程序开发者工具界面功能介绍

小程序的基本结构目录

小程序的开发框架

创建小程序页面

配置文件

逻辑层文件

页面结构文件

页面样式文件

pages文件夹存放所有的页面文件 utils文件夹存放一些公共的.js文件，工具包 app.js 小程序逻辑文件，主要用来注册小程序全局实例 app.json 小程序公共设置文件，配置小程序全局设置 app.wxss 小程序主样式表文件 app.js、app.json、app.wxss是组成微信小程序的主体部分文件，这三个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的 ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                          原文链接：https://blog.csdn.net/m0_75127060/article/details/136555753

1.2 页面文件 页面文件主要有四个文件组成： .js文件 页面的逻辑文件 .wxml文件 页面的结构文件 .wxss文件 页面样式表文件 .json文件 页面配置文件

微信团队为小程序提供了MINA框架 视图层：用来展示页面内容 逻辑层：用来处理事务逻辑，实现一些功能 数据层：用来页面临时数据或缓存、文件存储（本地存储）、网络存储与调用

选中pages文件先将文件夹中名为index文件删除，再新建一个文件（在pages文件中）。在你新建的文件夹中新建四个页面文件

配置文件
小程序的配置文件可以按其作用范围分为全局配置文件（app.json）和页面配置文件（.json）。全局配置文件作用于整个小程序，而页面配置文件作用于当前页面。由于页面配置文件的优先级要高于全局配置文件，因此，当全局配置文件与页面配置文件有配置相同的情况，页面配置文件会覆盖全局配置文件的相同配置内容。

全局配置文件

全局配置文件是来配置页面文件（pages）的路径、设置窗口（window）表现、设定网络请求API的超时时间值（networTimeout）以及配置多个切换页（tabBar）等。

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

页面逻辑文件 页面逻辑文件主要功能有：设置初始化数据，注册当前页面生命周期，注册事件处理函数等。小程序的逻辑文件是JavaScript文件，所有的逻辑文件，包括app.js，最终将会打包成一个js文件，在小程序启动时运行，直到小程序的销毁，类似于ServiceWorker，所以逻辑层也称为App Service。 在小程序中，每个逻辑文件都有独立的作用域，并具备模块化能力。每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。 ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                          原文链接：https://blog.csdn.net/m0_75127060/article/details/136555753

WXML(WeiXin Markup Language)是框架设计的一套标准语言，用于渲染界面，WXML的渲染原理和React Native思路一致，通过一套标记语言，在不同平台被解析为不用端的渲染文件，如图：


使用微信开发者工具时，在WXML中编写一些HTML标签或自定义标签仍然会被正常解析，这会给开发者造成一种小程序能直接支持HTML标签的误解。这是因为微信开发者工具内核是浏览器内核，同时小程序框架并没对WXML中的标签和WXSS中的内容进行强验证，所以HTML和CSS能直接被解析，但这种不合法的WXML在手机端微信中是不能正常显示的。开发过程中我们异地杠幺拿真机进行测试，保证程序能正常运行。WXML具有数据绑定、列表渲染、条件渲染、模板、事件等能力。

1.数据绑定

小程序中页面渲染时，框架会将WXML文件同时对应Page的data进行绑定，在页面中我们可以直接使用data中的属性。小程序的数据绑定使用Mustache语法（双大括号{{}}）将变量或简单的运算规则抱起来，主要由以下几种渲染方式：

1）简单绑定

简单绑定是指我们使用Mustache语法（双大括号{{}}）将变量包起来，在模板中直接作为字符串输出使用，可作用于内容、组件属性、控制属性、关键字等输出，其中关键字输出是将JavaScript中的关键字按其真值输出。

盒子模型就是我们在页面设计中经常用到的一种思维模型。 
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

原文链接：https://blog.csdn.net/m0_75127060/article/details/136721992

块级元素
块级元素默认占一行高度, 一行内通常只有一个块级元素(浮动后除外), 添加新的块级元素时, 会自动换行, 块级元素一般作为盒子出现。 块级元素的特点如下:
(１) 一个块级元素占一行。

(２) 块级元素的默认高度由内容决定, 除非自定义高度。

(３) 块级元素的默认宽度是父级元素的内容区宽度, 除非自定义宽度。

(４) 块级元素的宽度、高度、外边距及内边距都可以自定义设置。

(５) 块级元素可以容纳块级元素和行内元素。

< ｖｉｅｗ/ > 组件默认为块级元素, 使用< ｖｉｅｗ/ > 组件演示盒子模型及块级元素的示例代码如下:

行内元素：
行内元素, 不必从新一行开始, 通常会与前后的其他行内元素显示在同一行中, 它们不占有独立的区域, 仅靠自身内容支撑结构, 一般不可以设置大小, 常用于控制页面中文本的样式。 将一个元素的ｄｉｓｐｌａｙ 属性设置为ｉｎｌｉｎｅ 后, 该元素即被设置为行内元素。 
行内元素的特点如下:

(１) 行内元素不能被设置高度和宽度, 其高度和宽度由内容决定。

(２) 行内元素内不能放置块级元素, 只级容纳文本或其他行内元素。

(３) 同一块内, 行内元素和其他行内元素显示在同一行。

• < ｔｅｘｔ / > 组件默认为行内元素 , 使用 < ｖｉｅｗ / > 及 < ｔｅｘｔ / > 组件演示盒子模型及行内元素的示例代码如下 :

行内块元素

元素浮动与清除
元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制, 移到其父元素中指定位置的过程。 在ＣＳＳ 中, 通过ｆｌｏａｔ 属性来定义浮动, 其基本格式如下:
{ｆｌｏａｔ:ｎｏｎｅ ｜ｌｅｆｔ ｜ｒｉｇｈｔ;}
其中 , ｎｏｎｅ ——— 默认值 , 表示元素 不浮动 ;
ｌｅｆｔ ——— 元素 向左浮动 ;
ｒｉｇｈｔ ——— 元素 向右浮动 。
由于浮动元素不再占用原文档流的位置, 因此它会对页面中其他元素的排列产生影响。

浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过position属性可以实现对页面元素的精确定位。

其基本格式如下：{position:static|relative|absolute|fixed}

static——默认值，该元素按照标准流进行定位。

relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它。

absolue——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，

fixed——固定定位，相对于浏览窗口定位。

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。

以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。

简化：Flex是简单的布局管理器；

2、Flex 布局怎么用
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒子模型提供最大的灵活性；

任何一个容器都可以指定为 Flex 布局

     设置ｄｉｓｐｌａｙ 属性可以将一个元素指定为ｆｌｅｘ 布局, 设置ｆｌｅｘ － ｄｉｒｅｃｔｉｏｎ 属性可以指定主轴方向。 主轴既可以是水平方向, 也可以是垂直方向。
1.display
ｄｉｓｐｌａｙ 用来指定元素是否为ｆｌｅｘ 布局, 

组件是页面视图层(WXML)的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布开放能力等8类(30多个)基础组件。

        1.id 组件的唯一表示，保持整个页面唯一，不常用

        2. class 组件的样式类，对应 WXSS 中定义的样式

        3.  style 组件的内联样式，可以动态设置内联样式

        4. hidden 组件是否显示，所有组件默认显示

        5. data-*自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可
以通过传人参数对象的 currentTarget,dataset 方式来获取自定义属性的值

        6. bind*/catch* 组件的事件，绑定逻辑层相关事件处理函数

View

容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper组件。

基础内容组件包括icon、text和progress，主要用于在视图页面中展示图标、文本和进度条等信息

概念：表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与用户之间的沟通。表单组件不仅可以放置在<form/ >标签中使用，还可以作为单独组件和其他组件混合使用。

概念：button组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。一般来说，在一个程序中一个按钮至少有3种状态：默认点击（default）、建议点击（primary）、谨慎点击（warn）。在构建项目时，应在合适的场景使用合适的按钮，当<button>被<form/ >包裹时，可以通过设置form-type属性来触发表单对应的事件。button组件的属性如表4-7所示。

按钮

多媒体组件包括image（图像）、audio（音频）、video（视频）、camera（相机）组件，使用这些组件，可以让页面更具有吸引力

map组件用于在页面中显示地图或路径，常用于LBS（基于位置服务）或路径指引，功能相对百度地图、高德地图较简单，目前具备绘制图标、路线、半径等能力，不能在croll-view、swiper、picker-view、movable-view组件中使用

canvas组件用来绘制图形，相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力，仅仅是图形容器，通过绘图API实现绘图功能。在默认情况下，canvas组件的默认宽度为300 px，高度为225 px，同一页面中的canvas-id不能重复，否则会出错