微信小程序入门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()函数会被调用,用于创建页面实例。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

越复杂的CoT越有效吗?Complexity-Based Prompting for Multi-step Reasoning

Complexity-Based Prompting for Multi-step Reasoning 论文:https://openreview.net/pdf?idyf1icZHC-l9 Github:https://github.com/FranxYao/chain-of-thought-hub 发表位置:ICLR 2023 Complexity-Based Prompting for Multi-step Reason…

STM32 - LED灯 蜂鸣器

🚩 WRITE IN FRONT 🚩 🔎 介绍:"謓泽"正在路上朝着"攻城狮"方向"前进四" 🔎🏅 荣誉:2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评…

Pytest框架中pytest.mark功能

文章目录 mark功能 1. 使用pytest.mark.skip 2. 使用pytest.mark.skipif 3. 使用 pytest.mark.xfail 4使用pytest.mark.parametrize 5 使用pytest.mark.自定义标记 6 使用pytest.mark.usefixtures pytest 的mark功能在pytest官方文档是这样解释的: https://…

stm32学习笔记---GPIO输出(代码部分)LED闪烁/流水灯/蜂鸣器

目录 面包板的使用方法 第一个演示代码:LED闪烁 最后一次快速新建工程演示 点击新建工程 选择芯片 在工程文件夹中创建Start、Library、User Start文件夹的必备文件复制操作 Library文件夹的必备文件复制操作 User文件夹的必备文件复制操作 在keil中创建S…

关于数据登记的六点观察|数据与治理思享会(第1期)圆满举行

本文内容转载自 数据与治理专委会。 鼹鼠哥有幸在上周参与了数据大讲堂的首次线下活动,也做了个简短笔记 [最新]清华数据大讲堂线下思享会 因为上次是个人笔记,有些内容不方便些。既然今天官方公众号发出来了,就在这里把官方的内容也给大家转…

Repair LED lights

Repair LED lights 修理LED灯,现在基本用灯带,就是小型LED灯串联一起的 1)拆旧灯条,这个旧的是用螺丝拧的产品 电闸关掉。 2)五金店买一个,这种是磁铁吸附的产品 现在好多都是铝线啊。。。 小部件&#x…

【大数据离线项目四:什么是海豚调度?怎么使用可以将海豚调度应用到我们的大数据项目开发中?】

前言: 💞💞大家好,我是书生♡,今天主要和大家分享一下什么是海豚调度?怎么使用可以将海豚调度应用到我们的项目开发中?希望对大家有所帮助。 💞💞代码是你的画笔&#xf…

数组 (java)

文章目录 一维数组静态初始化动态初始化 二维数组静态初始化动态初始化 数组参数传递可变参数关于 main 方法的形参 argsArray 工具类sort 中的 comparable 和 comparatorcomparator 比较器排序comparable 自然排序 一维数组 线性结构 静态初始化 第一种:int[] a…

IDEA插件推荐-CodeGeex

功能:这个插件可以实现快速翻译代码,json文件格式转换,代码语言类型转换。 安装方式:File->Settings->Plugins->MarketPlace->搜索“CodeGeex”即可 (CodeGeex功能展示) (CodeGeex…

模拟算法讲解

模拟算法是一种基于实际情况模拟的算法,通过模拟现实世界中的系统或过程,来研究它们的性质和行为。模拟算法可以用于解决各种问题,包括物理模拟、经济模拟、社会模拟等。 模拟算法的基本步骤包括: 定义问题:明确需要模…

【STM32c8t6】AHT20温湿度采集

【STM32c8t6】AHT20温湿度采集 一、探究目的二、探究原理2.1 I2C2.1. 硬件I2C2.1. 软件I2C 2.2 AHT20数据手册 三、实验过程3.1 CubeMX配置3.2 实物接线图3.3 完整代码3.4 效果展示 四、探究总结 一、探究目的 学习I2C总线通信协议,使用STM32F103完成基于I2C协议的A…

android串口助手apk下载 源码 演示 支持android 4-14及以上

android串口助手apk下载 1、自动获取串口列表 2、打开串口就开始接收 3、收发 字符或16进制 4、默认发送at\r\n 5、android串口助手apk 支持android 4-14 (Google seral port 太老) 源码找我 需要 用adb root 再setenforce 0进入SELinux 模式 才有权限…

【数据结构导论】自考笔试题:伪代码练习题汇总 1

目录 一、开源项目推荐 二、线性表的基本运算在单链表上的实现 (1)初始化 (2)插入 p 指向的新结点的操作 (3)删除 *p 节点 三、循环链表 (1)在单链表中 (2&…

如何打包数据库文件

使用 mysqldump 命令: mysqldump -u username -p database_name > output_file.sql username 是数据库的用户名。database_name 是要导出的数据库名称。output_file.sql 是导出的 SQL 文件名,可以自定义。 示例: mysqldump -u root -p…

urfread刷算法题day1|LeetCode2748.美丽下标的数目

题目 题目链接 LeetCode2748.美丽下标对的数目 题目描述 给你一个下标从 0 开始的整数数组 nums 。 如果下标对 i、j 满足 0 ≤ i < j < nums.length &#xff0c; 如果 nums[i] 的 第一个数字 和 nums[j] 的 最后一个数字 互质 &#xff0c; 则认为 nums[i] 和 nums…

基于PyTorch设计的全景图合成系统【文末完整工程源码下载】

前言 本项目实现基于PyTorch将多张图片合成为一张全景图。&#xff08;图像存储路径为/images/1&#xff09;。 作者&#xff1a;阿齐Archie&#xff08;联系我微信公众号&#xff1a;阿齐Archie&#xff09; 使用的图片为&#xff1a; 合成后为&#xff1a; 这个全景图项目主…

支持WebDav的网盘infiniCloud(静读天下,Zotero 等挂载)

前言 WebDav是一种基于HTTP的协议&#xff0c;允许用户在Web上直接编辑和管理文件&#xff0c;如复制、移动、删除等。 尽管有一些网盘支持WebDav&#xff0c;但其中大部分都有较多的使用限制。这些限制可能包括&#xff1a;上传文件的大小限制、存储空间的限制、下载速度的限…

如何打造稳定、好用的 Android LayoutInspector?

速度极慢&#xff0c;遇到复杂的布局经常超时 某些情况无法选中指定的 View 本文将围绕 LayoutInspector 的痛点&#xff0c;分析问题并修复&#xff0c;最终将 LayoutInspector 变成一个稳定、好用的插件。 二、加速 Dump View Hierarchy 2.1 问题描述 开发复杂业务的同学…

Spring Boot + WebSocket 实现 IM 即时通讯

文章目录 1. 项目环境准备2. 配置WebSocket3. 创建消息处理器4. 创建消息类5. 创建前端页面6. 启动应用并测试7. 分析与扩展结论 &#x1f389;欢迎来到SpringBoot框架学习专栏~ ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&#x1f388;…

Go语言之基础入门

网站&#xff1a;http://hardyfish.top/ 免费书籍分享&#xff1a; 资料链接&#xff1a;https://url81.ctfile.com/d/57345181-61545511-81795b?p3899 访问密码&#xff1a;3899 免费专栏分享&#xff1a; MySQL是怎样运行的从根儿上理解MySQL 课程链接&#xff1a;https:/…