WEB前端系列课程-微信小程序开发前端必备知识点
发表时间:2023-11-25 08:10:15
文章来源:炫佑科技
浏览次数:208
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
WEB前端系列课程-微信小程序开发前端必备知识点
WEB前端课程系列-微信小程序实战教程讲解_WEB前端食疗工作坊实战项目讲解_WEB小程序开发前端必备知识点_WEB前端小程序开发实战课程
1 界面与操作
微信小程序开发工具非常强大且方便。 该工具集成了代码编辑、开发调试、程序发布等功能。
2 编辑功能
编辑区域分为两部分。 在右侧的编辑区域中,您可以进行写入、添加、删除文件、重命名当前项目等基本操作。 在左侧的模拟器区域,可以实时预览编辑情况。 编辑器还提供了比较完善的自动完成和自动保存功能。 编写代码后,该工具会自动帮助用户将当前代码保存为编辑状态。 如果直接关闭工具或者切换项目,当前代码的编辑状态不会丢失。 。
但请注意,编辑状态下的代码仅保存在工具内部,不会写入硬盘。
只有手动保存文件后,修改的内容才会写入硬盘并触发实时预览。
3 调试功能
调试工具分为七个功能模块:、、、、、、Wxml和、
4个项目功能
编辑器项目选项卡主要用于显示和设置项目信息。 显示的信息包括图标、AppID、本地开发目录、*新更新时间、*新上传时间、代码包大小。 ·
预览:表示源码成功上传到微信服务器后,会生成一个二维码。 开发用*新版本的微信扫描二维码后,就可以在手机上体验*新的效果。
5 项目的目录和文件结构
创建小程序项目时,小程序开发工具会默认生成一些文件。 这些文件就是小程序的基本结构。 另外,在开发过程中,可以根据产品需求定制小程序的目录和文件。
微信小程序开发基础
全局配置
微信小程序的全局配置必须在app.json文件中进行。
这些配置可以确定页面文件的路径、窗口性能、设置网络超时、设置多个选项卡等。
页面配置项
pages 接受一个数组值,每一项都是一个字符串,用于指定小程序由哪些页面组成。
每一项代表对应页面的【路径+文件名】信息。
配置项
接受对象值,用于设置小程序状态栏、导航栏、窗口页面等对象的基本样式属性。
配置项
接受一个数组值,用于设置选项卡底部选项卡栏的样式以及选项卡切换时显示的相应页面。
配置项
接受对象值,用于设置各种网络请求对象的超时时间。 超时时间单位为毫秒WEB前端系列课程-微信小程序开发前端必备知识点,默认为60000。
调试配置项
debug 接收一个用于设置开发工具的调试模式的值。 默认为 false。 开启后,调试信息会在开发工具的控制台面板中以info的形式给出。 这些信息包括页面注册、页面路由、数据更新和事件触发。 这可以帮助开发快速定位一些常见问题,但正式发布时应关闭该配置项。
页面配置
微信小程序除了全局配置app.json外,还可以单独配置每个页面的.json。 每个页面的配置比app.json的全局配置简单很多。 它只是设置app.json中配置项的内容。 页面中的配置项会覆盖app.json中的相同配置项。 页面的.json只能设置相关的配置项来决定这个页面的窗口性能,所以不需要写这个key。
页面生命周期
每个微信小程序应用都有自己的生命周期,微信小程序应用的每个页面也有自己的生命周期。
页面数据处理
页面的数据处理分为两个方面。 **个是初始化数据,第二个是操作数据。
数据初始化
初始化数据将用作页面的**次渲染。 数据会以JSON的形式从逻辑层传递到视图层(即从.js文件传递到.wxml文件。视图层可以通过WXML绑定数据),所以数据必须进行转换转换为 JSON。 设置字符串、数字、布尔值、对象、数组的格式。
堆栈的页面
微信小程序提供的框架以栈的形式维护所有页面。
注意:
· 不要尝试修改页面堆栈,因为这会导致路由和页面状态错误。
页面路由
在微信小程序中,所有页面的路由都是由框架来管理的。
简单的封装和调用
文件范围
.js 文件中声明的变量和函数仅在该文件中有效; 可以在不同的文件中声明同名的变量和函数。
不会互相影响。
全局应用实例可以通过函数()获取。 如果需要全局数据,
可以在App()中设置。
模块化的
在日常编程过程中,通常会提取一些可重用的代码并将其放入公共文件中。 在微信小程序中,一些公共代码可以作为模块提取到单独的JS文件中。 模块只能通过.or向外界暴露接口。
布局
微信小程序通过模型布局来排列组件。 与普通的布局方式相比,更容易实现适合屏幕的宽度和高度的布局,使用起来也更加灵活,非常适合微信小程序的布局需求。
1 基本要素
布局的主要思想是设定容器(flex、)和子元素(、)的规则,使所有视图组件能够在主轴(main轴)和交叉轴(cross axis)。
2 容器属性
容器属性是指包裹子元素的容器(flex)属性
3个子元素属性
子元素属性定义了弹性项目的属性。
4 属性
属性用于指定元素在文档中的位置
5 边框、间隙和填充
边界很容易理解。 间隙是指组件之间的距离,而填充是指组件内容到其边框的距离。
组件开发与应用
组件是视图层的基本元素,也是构建页面的基础。
每个组件都有自定义属性,可以修改功能样式,但仅支持以下七种数据类型。
:1 查看容器组件
微信小程序拥有丰富的用户界面组件。 借助这些组件,开发可以轻松构建用户界面。
2 基本内容组成
基本内容组件用于在界面中显示图标、文本、滚动条信息等。
3个表单组件
表单组件用于构建用户交互的表单。
4 多媒体组件
多媒体组件可以将图片、音频、视频加载到页面中,并可以控制显示方式和过程开发微信 小程序,使页面更加多样化和有吸引力。
5个地图组件
地图组件,微信小程序提供地图导航功能。 使用地图组件和地图定位API,可以方便快捷地实现地图定位和导航。
6 导航组件
导航组件,是一个用于控制微信小程序中所有页面顺序的组件。 它可以帮助我们实现页面路由和跳转,使用起来非常方便。
7 个画布组件
组件,可以用来实现一些小程序控件不提供的页面元素。
开发可以自由地使用来绘制想要的页面效果。