在线咨询
网站建设

WEB前端系列课程-微信小程序实战教程讲解-WEB哔哩

微易网络
2026年6月17日 14:59
0 次阅读

微信小程序开发工具的功能非常强大和便捷,其工具内部集成了代码编辑、开发调试及程序发布等功能,在创建小程序项目时,小程序开发工具会默认生成一些文件,这些文件就是小程序的基本结构。微信小程序开发基础微信小程序除了app.微信小程序提供的框架是以栈的形式维护所有页面。在微信小程序中,所有页面的路由全部由框架进行管理。在微信小程序中,可以将一些公共的代码抽离成为一个单独的JS文件,作为一个模块。

微信小程序,简称Mini ,英文名称为Mini。 如今,几乎每部智能手机都安装了微信应用程序,用户遍布全球。 微信小程序实现微信内部无需下载安装,用户扫一扫或搜索即可打开应用。

WEB前端系列课程-微信小程序实战教程讲解_WEB前端食疗工作坊实战项目讲解_WEB前端小程序开发必备知识点_WEB前端小程序开发实战教程_哔哩哔哩

1 界面与操作

微信小程序开发工具的功能非常强大和方便。 该工具集代码编辑、开发调试、程序发布等功能于一体。

2 编辑功能

编辑区分为两部分。 在右边的编辑区,可以对当前项目进行写入、增删文件、重命名等基本操作。 在左侧的模拟器区域,可以实时预览编辑后的情况。 编辑器还提供了比较完善的自动补全和自动保存功能。 编写代码后,该工具会自动帮助用户将当前代码保存为已编辑状态。 如果直接关闭工具或切换项目,当前代码的编辑状态不会丢失。

但需要注意的是,编辑状态下的代码只是保存在工具内部,并没有写入硬盘。

只有手动保存文件后,修改后的内容才会写入硬盘并触发实时预览。

3 调试功能

调试工具分为七个功能模块:,,,,, Wxml 和,

4 项目功能

编辑器项目选项卡主要用于显示和设置项目信息,包括图标、AppID、本地开发目录、最新更新时间、最新上传时间、代码包大小。 ·

预览:将源码上传至微信服务器并成功生成二维码后,开发者用最新版微信扫描二维码即可在手机端体验最新效果。

5 项目目录及文件结构

在创建小程序项目时,小程序开发工具默认会生成一些文件,这些文件就是小程序的基本结构。 另外,在开发过程中,可以根据产品需求定制小程序的目录和文件。

微信小程序开发基础

全局配置

微信小程序的全局配置必须在app.json文件中进行。

这些配置可以决定页面文件的路径、窗口性能、设置网络超时、设置多个标签页等。

页面配置项

pages 接受一个数组值,每一项都是一个字符串,用于指定小程序由哪些页面组成。

每一项代表对应页面的【路径+文件名】信息。

配置项

接受对象值,用于设置小程序的状态栏、导航栏、窗口页面等对象的基本样式属性。

配置项

接受一个数组值,用于设置标签底部标签栏的样式,以及标签切换时显示的对应页面。

配置项

WEB前端系列课程-微信小程序实战教程讲解-WEB哔哩

在深圳网站建设领域,对象值,用于设置各种网络请求对象的超时时间。 超时单位为毫秒,默认为60000。

调试配置项

debug 接受一个值,用于设置打开开发者工具的调试模式。 默认为假。 启用后,在开发者工具的控制台面板中,调试信息以info的形式给出。 这些信息包括页面注册、页面路由、数据更新和事件触发。 这可以帮助开发者快速定位一些常见的问题,但正式发布时应该关闭这个配置项。

页面配置

除了全局配置app.json,微信小程序还可以单独配置每个页面的.json。 每个页面的配置比app.json的全局配置要简单的多。 它只是设置app.json中配置项的内容,页面中的配置项会覆盖app.json中相同的配置项。 页面的.json只能设置相关的配置项来决定这个页面的窗口性能,所以不需要写这个key。这对昆明网站建设尤为重要。

页面生命周期

每个微信小程序应用都有自己的生命周期,微信小程序应用的每个页面也有自己的生命周期。

页面数据处理

页面的数据处理分为两个方面,第一是对数据进行初始化,第二是对数据进行操作。

数据初始化

初始化数据将用作页面的第一次呈现。 数据会以JSON的形式从逻辑层传递到视图层(即从.js文件传递到.wxml文件,视图层可以通过WXML绑定数据),所以数据必须是转换成 JSON 格式的字符串、数字、布尔值、对象、数组。

一堆书页

微信小程序提供的框架以栈的形式维护所有页面。

注意:

· 不要试图修改页面堆栈,这会导致路由和页面状态错误。

页面路由

在微信小程序中,所有页面的路由都是由框架管理的。特别是在六安网站建设方面。

简单的封装和调用

文件范围

在 .js 文件中声明的变量和函数仅在该文件中有效; 可以在不同的文件中声明同名的变量和函数,

不会互相影响。

全局应用实例可以通过全局函数()获取,如果需要全局数据,

然后就可以在App()中设置了。

模块化的

在日常的编程过程中,通常会提取一些可重用的代码,放到一个公共文件中。 在微信小程序中,可以将一些常用的代码提取到一个单独的JS文件中,作为一个模块。 模块只能通过.or暴露接口。

布局

微信小程序按模型布局排列组件。 相比普通的布局方式,更容易实现宽高适配屏幕的布局,使用起来也更灵活,非常适合微信小程序的布局需求。特别是在苏州网站建设方面。

1 基本要素

WEB前端系列课程-微信小程序实战教程讲解-WEB哔哩

布局的主要思想是通过设置容器(flex即柔性容器)和子元素的规则,使所有视图组件合理自动分配在主轴(main axis)和交叉轴(cross axis)上(flex item就是灵活的项目)

2 容器属性

容器属性指的是包裹子元素的容器(flex)属性

3个子元素属性

子元素属性定义弹性项目的属性,

4个属性

属性用于指定元素在文档中的位置

5 边框、间隙和填充

边界很好理解。 gap是指组件之间的距离,是指组件内容到其边框的距离。

组件开发与应用

组件是视图层的基本元素,是构建页面的基础。

每个组件都有自定义属性,可以修改功能样式,但只支持以下七种数据类型

:1 查看容器组件

微信小程序拥有丰富的界面组件,借助这些组件,开发者可以轻松构建界面。

2 基本内容组件

基础内容组件用于在界面中显示图标、文字、滚动条信息等。

3 表单组件

表单组件用于构建与用户交互的表单。

4 多媒体组件

多媒体组件可以在页面中加载图片、音频、视频,并可以控制显示方式和过程,使页面更加多样化和美观。

5 地图组件

地图组件,微信小程序提供地图导航功能,使用地图组件和地图定位API可以方便快捷的实现地图定位和导航。

6 导航组件

导航组件,是微信小程序中用来控制所有页面顺序的组件。 可以帮助我们实现页面的路由和跳转,使用起来还是比较方便的。

7 画布组件

组件,可以用来实现一些小程序控件没有提供的页面元素,

开发者可以自由使用画布绘制出想要的页面效果。

微易网络

技术作者

2026年2月24日
0 次阅读

文章分类

网站建设

需要技术支持?

专业团队为您提供一站式软件开发服务

相关推荐

您可能还对这些文章感兴趣

平顶山网站建设套餐价格性能优化核心技巧
网站建设

平顶山网站建设套餐价格性能优化核心技巧

这篇文章讲了平顶山很多老板花大价钱做了网站,结果没人看,问题出在“性能优化”上。文章用真实案例分享了几个核心技巧,比如图片没压缩、代码冗余、服务器响应慢,都会让网站变慢、客户跑掉。还顺带提了安阳和南阳的建站服务也有类似问题,提醒大家别光看价格,要重视优化。

2026/6/17
网站建设设计制作流程详解
网站建设

网站建设设计制作流程详解

这篇文章讲了网站建设从零到上线的完整流程,特别提醒老板们避开常见坑。作者用真实案例说明,第一步需求沟通最重要,决定了80%的成功率,千万别图便宜选模板。文章还重点解答了南阳网站制作上线时间和怎么找到性价比高的方案,帮您少走弯路,做出真正能帮企业赚钱的网站。

2026/6/17
郑州企业建站怎样开发如何选择服务商
网站建设

郑州企业建站怎样开发如何选择服务商

这篇文章讲了郑州企业建站的常见误区,分享了一个真实案例:有老板花20万做高大上网站却没人用。文章核心观点是,建站别贪大求全,关键得先想清楚怎么开发、怎么选靠谱服务商,还顺带提了安阳、新乡同行的做法,对正在纠结建站的朋友挺有参考价值。

2026/6/17
开封网站建设怎么收费性能优化核心技巧
网站建设

开封网站建设怎么收费性能优化核心技巧

这篇文章讲了网站建设不能光看价格便宜,否则可能像开封那位王总一样,花3800块做了个打开要8秒的慢网站,客户都跑了。文章分享了性能优化的核心就三个字:快、稳、准,还提醒老板们,做网站或升级官网时,要关注价格背后的性能和服务,别让“便宜”坑了生意。

2026/6/17

需要专业的软件开发服务?

郑州微易网络科技有限公司,15+年开发经验,为您提供专业的小程序开发、网站建设、软件定制服务

技术支持:186-8889-0335 | 邮箱:hicpu@me.com