

首页  思维导图  详情



微信小程序1-4

2024-05-16 19:35:23   3  举报





AI智能生成

微信小程序1-4

架构图

模版推荐

作者其他创作

大纲/内容

第一章

微信小程序概述

认识微信小程序

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

微信小程序开发流程

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

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

微信小程序开发基础

小程序的基本结构目录

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

小程序的开发框架

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

创建小程序页面

在pages文件夹右键建立新的文件夹  news 并在该目录下创建news.js,  news.json,  news.wxml,  news.wxss 在news.json中输入{}  ，保证文件不为空在news.js中输入page({}),  保证文件不为空

配置文件

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——固定定位，相对于浏览窗口定位。

Flex 布局

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

容器视图组件

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

基础内容组件

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

表单组件

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

button

概念：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/ >表示一组选项，可以在一组选项中选中多个选项。

多媒体组件

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

其他组件

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

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