微信小程序1-4

微信小程序实现了不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。优势：方便，快捷，无需下载等。

认识微信小程序

微信小程序开发流程

程序调试主要有三大功能区：模拟器、调试工具和小程序操作区

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

微信小程序概述

的工具包，所有页面都可用主体文件：       微信小程序的主体由3个文件组成，这三个文件必须放在项目的主目录中，负责小程序的整体配置，它们名字是固定的app.js：小程序逻辑文件（该文件在项目中不可缺少）app.json：小程序公共设置文件（该文件在项目中不可缺少）app.xwss：小程序主样式文件（该文件在项目中不是必须的）页面文件：       小程序通常是由多个页面组成的，美国页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名，进入小程序时或页面跳转时，小程序会根据app.json设置的路径找到对应的资源进行数据绑定

小程序的基本结构目录

程序提供的框架命名为MINA。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供一整套JavaScript API，让开发者方便的使用微信客户端提供的各种基础功能与能力，快速构建应用。      微信小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑

小程序的开发框架

创建小程序页面

pages配置项，window配置项，networkTimeout配置项，，taBar配置项，，debug配置项

配置文件

逻辑层文件

1.数据绑定：小程序进行页面绑定时，框架会将WXML文件同时对应Page的data进行绑定，在页面中我们可以直接使用data中的数据。小程序的数据绑定使用Mustache语法（{{}}）将变量或简单的运算规则包起来2.条件数据绑定：wx:if条件数据绑定，block wx:if条件数据绑定，3.列表数据绑定4.模板：在项目过程中，常常会遇到某些相同的结构在不同的地方反复出现，这时可以将相同的布局代码片段放置到一个模板中，在不同的地方传入到对应的数据进行渲染，这样能避免重复开发，提升开发效率5.引用页面文件：import方式，include方式6.页面事件冒泡事件

页面结构文件

页面样式文件

微信小程序开发基础

第一章

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 布局

第三章

view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面(User Interface，UI)组件，通过设置view的CSS属性可以实现各种复杂的布局。view组件的特有属性如表所示:

View

组件的定义及属性

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

容器视图组件

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

基础内容组件

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

表单组件

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

概念：单选框用来从一组选项中选取一个选项。在小程序中，单选框由<radio-group/ >（单项选择器）和<radio/ >（单选项目）两个组件组合而成，一个包含多个 <radio/ >的<radio-group/ >表示一组单选项，在同一组单选项中<radio/ >是互斥的，当一个按钮被选中后，之前选中的按钮就变为非选。

checkbox概念：复选框用于从一组选项中选取多个选项，小程序中复选框由 <checkbox -group/ >（多项选择器）和<checkbox/ >（多选项目）两个组件组合而成。一个<checkbox-group/ >表示一组选项，可以在一组选项中选中多个选项。

按钮

button

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

多媒体组件

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

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

其他组件

第四章

微信小程序