微信小程序入门2

微信开发者工具的安装方法

1.打开微信开发者工具下载页面

在微信小程序管理后台的左侧边栏中选择“开发工具”,然后选择“开发者工具”,即可找到微信开发者工具的下载页面。

1

2.打开微信开发者工具的下载链接页面

单击“下载” 按钮下载,即可跳转到微信开发者工具的下载链接页面。

2

3.下载微信开发者工具

本书以稳定版为例进行讲解,单击稳定版的"Windows 64" 链接下载该版本的微信开发者工具安装
包,安装包名称为"wechat_devtools_l.06.2206090_win32_x64.exe"。

4.安装微信开发者工具

双击微信开发者工具的安装包,进入微信开发者工具的安装向导。

4

微信小程序项目的创建方法

1.登录微信开发者工具

首次打开微信开发者工具时,会出现一个登录界面,如下图所示。
在登录界面中,可以使用微信扫码登录微信开发者工具,微信开发者工具将使用这个微信账号的信息进行微信小程序的开发和调试。

1

2.进入微信小程序的启动页

使用微信扫码登录成功后会进入微信开发者工具的项目选择界面。

2,

3.创建微信小程序项目微信开发者工具安装

单击步骤2中图片的“+”可以进入微信小程序项目的创建界面,将内容填写完成后,单击“确定”按钮创建微信小程序项目。

3

在微信小程序项目的创建界面中,读者可以自定义项目名称和目录,如填写项目名称为“HELLO”,目录为“D:\miniprogram\hello”。关于AppID、开发模式、后端服务和模板选择的具体解释如下。

AppID:填写1.2.2小节获取的AppID即可。如果不想使用自己的AppID,也可以使用测试号,二者的区别是,前者能够使用的功能比后者多,例如代码的上传和发布。
开发模式:有“小程序”和“插件”两种选择,由于我们要创建一个微信小程序项目,所以此处应选择“小程序”。

后端服务:有“微信云开发”和“不使用云服务”两种选择。在“微信云开发”中,开发者无须搭建服务器,即可使用云函数、云数据库、云存储以及微信云托管等完整云端能力。

模板选择:微信开发者工具提供了多种模板用于快速创建微信小程序项目。

微信开发者工具的外观设置

微信开发者工具允许用户对其进行外观设置,包括主题、调试器主题和自定义外观。默认的主题为深色, 如果想设置为其他颜色,更换选项即可。

首先单击微信小程序项目选择界面中的 “ 在这里插入图片描述 ” 进入设置页面,然后在弹出的设置页面中单击“外观”选项进入外观设置页面,最后在主题下的单选框中选择需要更换的颜色。外观设置页面如下图。

1

熟悉微信小程序的项目结构,能够解释每个文件的作用

微信小程序项目创建完成后,微信开发者工具会自动创建微信小程序的项目结构,如下图所示。

在这里插入图片描述

pages:用于存放微信小程序的所有页面。 .eslintrc.js:用于格式化代码,使代码风格保持一致。
app.js:微信小程序的入口文件,用于描述微信小程序的整体逻辑。
app.json:微信小程序的全局配置文件,用于设置页面路径、窗口外观、页面表现、标签栏等。
app.wxss:微信小程序的全局样式文件,文件可以为空。
project.config.json:在微信开发者工具上做的任何配置都会写入这个文件中,当重新安装工具或者更换计算机工作时,只要栽入同一个项目的代码包,微信开发者工具会根据该文件自动恢复成开发微信小程序时的个性化配置。
project.private.config.json:用于保存微信开发者工具的私人配置,配置的优先级高于project.config.json。
sitemap.json:用于配置微信小程序及其页面是否允许被微信索引,如果没有该文件,则默认为所有页面都允许被索引。微信现已开放微信小程序页面的搜索,也就是说微信小程序里面的内容也能被微信搜索引擎搜索到。 当开发者允许微信小程序页面被微信索引时,微信会通过爬虫的形式,为微信小程序的页面建立索引。 当用户的搜索词条触发该索引时,微信小程序的链接地址将可能展示在搜索结果中。

在微信客户端中启动微信小程序的步骤。

1.把整个微信小程序的代码包下载到本地。
2.解析app.json全局配置文件,通过该文件解析出微信小程序的所有页面路径。
3.执行app.js入口文件,调用App()函数创建微信小程序的实例。
4.渲染微信小程序的首页。

微信小程序的页面组成

一个微信小程序是由一个或多个页面组成的,这些页面被存放在pages目录中。下面以pages目录下的index页面为例展示其组成部分,index页面的组成部分如下图所示。

在这里插入图片描述
由上图可知,index页面由4个文件组成,分别是index.js、index.json、index.wxml和index.wxss。

JS:类似网页制作中的JavaScript语言,用于实现页面逻辑和交互,文件扩展名为.js。需要注意的是,微信小程序中的JS不含DOM和BOM,但它提供了丰富的API,可以实现许多特殊的功能,例如微信登录、音频播放、文件上传等。

JSON(JavaScript Object Notation,JavaScript对象符号):用于利用JSON语法对页面进行配置,文件扩展名为.json。

WXML(WeiXin Markup Language,微信标记语言):类似于网页制作中的HTML语言,用于构建页面结构,文件扩展名为.wxml。

WXSS(WeiXin Style Sheets,微信样式表):类似于网页制作中的CSS语言,用于设置页面样式,文件扩展名为.wxss。

微信客户端在加载微信小程序页面时的步骤。

1.读取并解析页面中JSON文件的配置。
2.加载页面的WXML文件、WXSS文件和JS文件,实现页面渲染。

其中,页面中WXSS文件的样式会覆盖项目根目录下的app.wxss 文件中相同的全局样式;页面中JS文件的Page()函数会被调用,用于创建页面实例。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/736399.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【软件测试】认识测试

文章目录 1.什么是测试2.软件测试和开发的区别3.优秀的测试人员需要具备的素质 1.什么是测试 软件测试就是验证软件产品特性是否满足用户的需求 产品特性: 功能性能界面易用性 2.软件测试和开发的区别 工作内容 开发以编码为主,而测试以测试为主&…

高考填报志愿不容易,压线考生怎么救?

每年的高考季 就是高考生们水深火热的一大月份,很多考生都会纠结要报考哪些学校,哪些专业好,并非每个学生从小就有明确的目标,很多人到6月份才深思这个问题,此时难免手慌脚乱,更别说一些考生的分数处于一本…

ping命令返回结果实例分析

测试在各相关情况下ping命令回复信息。 网络环境搭建如下图所示: 【1】R1、R2、PC1和PC2没有配置,测试ping命令回复 在路由器没有配置端口IP地址和路由,PC没有配置IP地址、子网掩码和网关的情况下,PC2 ping 192.168.1.1。 在PC没…

代码随想录-Day37

56. 合并区间 以数组 intervals 表示若干个区间的集合,其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间,并返回 一个不重叠的区间数组,该数组需恰好覆盖输入中的所有区间 。 示例 1: 输入:in…

Program-of-Thoughts(PoT):结合Python工具和CoT提升大语言模型数学推理能力

Program of Thoughts Prompting:Disentangling Computation from Reasoning for Numerical Reasoning Tasks github:https://github.com/wenhuchen/Program-of-Thoughts 一、动机 数学运算和金融方面都涉及算术推理。先前方法采用监督训练的形式,但这…

Qt: QPushButton 按钮实现 上图标下文字

效果如下: 实现有如下几种方式: 1. 使用 QPushButton 设置 setStyleSheet 例: ui->recorder->setStyleSheet("QPushButton{"\"border: 1px solid #00d2ff; "\"min-height: 60px; "\"col…

ToolLLM: Facilitating Large Language Models to Master 16000+ Real-world APIs

ToolLLM: Facilitating Large Language Models to Master 16000 Real-world APIs 一、动机 虽然现如今大模型展现出无与伦比的表现,但是其在工具理解和使用方面依然存在不足,即根据用户的指令和意图来使用外部API。这是因为现有的指令微调任务大多数是…

重生奇迹MU 浅析智力妹妹的现状与天赋

早期的重生奇迹MU游戏中,智力系女性角色通常被简称为“奶娘”,因为她们天生就是辅助定位,能够为队友提供很多帮助。那个时代的游戏非常艰难,升级困难,装备和宝石很难获得,使用药品的消耗也非常大。因此&…

深度学习 --- stanford cs231学习笔记五(训练神经网络的几个重要组成部分之二,数据的预处理)

数据的预处理(Data Preprocessing) 2 Data Preprocessing数据的预处理 数据预处理的几种方法 2,1 数据的零点中心化 数据的零点中心化的目的就是为了把数据的整体分布拉回到原点附近,也就是让数据的整体均值变为0。 ​ 2,2 数据的标准化 数据…

Web框架简介

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 如果你要从零开始建立了一些网站,可能会注意到你不得不反复解决一些类似的问题。这样做是令人厌烦的,并且违反了良好编程的核…

AI智能时代:ChatGPT如何在金融市场发挥策略分析与预测能力?

文章目录 一、ChatGPT在金融策略制定中的深度应用客户需求分析与定制化策略市场动态跟踪与策略调整策略分析与优化 二、ChatGPT在算法交易中的深度应用自动交易策略制定交易执行与监控风险管理 三、未来展望《智能量化:ChatGPT在金融策略与算法交易中的实践》亮点内…

pcl::PointXYZRGBA造成点云无法显示

如果pcd文件没有rgba信息,使用pcl::PointXYZRGBA类型打开会提示以下信息: Failed to find match for field rgba另外,显示出来的点云是黑色,如果使用默认背景色为黑色,就无法显示点云了。 如果设置其它背景色&#xf…

OneNote 作为恶意软件分发新渠道持续增长

目前,Office 文件已经默认禁用宏代码,攻击者开始转向利用其他微软的软件产品来进行恶意 Payload 投递。默认情况下,OneNote 应用也包含在 Office 2019 和 Microsoft 365 软件中,所以 OneNote 文件越来越受到攻击者的青睐。如果有人…

上新:NFTScan 正式上线 Bitcoin-brc20 浏览器!

近日,NFTScan 团队正式对外发布了 Bitcoin-brc20 浏览器,将为 Bitcoin 生态的 NFT 开发者和用户提供简洁高效的 NFT 数据搜索查询服务。作为比特币生态中最火热的标准之一,brc20 也吸引着广泛的关注。洞悉其巨大潜力,NFTScan 对 b…

BFS:解决多源最短路问题

文章目录 什么是多源最短路问题?1.矩阵2.飞地的数量3.地图的最高点4.地图分析总结 什么是多源最短路问题? 多源最短路问题(Multi-Source Shortest Path Problem,MSSP)是图论中的一个经典问题,它的目标是在…

初学者应该掌握的MySQL数据库的基本组成部分及概念

MySQL数据库作为一种开源的关系型数据库管理系统,被广泛应用于Web应用开发和数据存储。它具有高性能、易用性和可靠性等特点,是开发者们的首选之一。在本篇文章中,我们将详细介绍MySQL数据库的核心组成部分,帮助你深入理解这个强大…

C#基于SkiaSharp实现印章管理(1)

最近对着微软的教程学习SkiaSharp的概念及用法,由于之前使用GDI绘制过坐标系、印章等程序,准备使用SkiaSharp、SKControl控件编写简单的印章设计功能,并能用印章对图片盖章。本文实现创建印章背景、序列化及反序列化印章对象等功能。   VS2…

Linux常用环境变量PATH

Linux常用环境变量 一、常用的默认的shell环境变量二、环境变量 PATH三、持久化修改环境变量四、常用的环境变量 一、常用的默认的shell环境变量 1、当我们在shell命令行属于一个命令,shell解释器去解释这个命令的时候,需要先找到这个命令. 找到命令有两…

支付系统的渠道路由架构设计

图解支付系统的渠道路由设计 渠道路由是引导流量路径的关键,其设计至关重要。本文详解渠道路由概念、必要性及形态,并分享一个高效实用的基于规则的渠道路由设计方案。 注:有些公司称渠道为通道,都是一个意思,为方便起…

Monica

在 《long long ago》中,我论述了on是一个刚出生的孩子的脐带连接在其肚子g上的形象,脐带就是long的字母l和字母n,l表脐带很长,n表脐带曲转冗余和连接之性,on表一,是孩子刚诞生的意思,o是身体&a…