微信小程序入门2

news2025/1/13 2:45:46

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

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.coloradmin.cn/o/1854173.html

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

相关文章

【网络安全的神秘世界】已解决burpsuite报错Failed to start proxy service on 127.0.0.1:8080

🌝博客主页:泥菩萨 💖专栏:Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 解决burpsuite无法在 127.0.0.1:8080 上启动代理服务端口被占用以及抓不到本地包的问题 Burpsuite无法启动proxy…

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

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

VS Code Arduino编程

①Arduino Arduino是一款便捷灵活、方便上手的开源电子原型平台。包含硬件(各种型号的Arduino板)和软件(Arduino IDE)。 ②VS Code(全称 Visual Studio Code) 是由微软开发的一款开源、轻量级的跨平台现代代码编辑器…

PADS学习笔记

1.PADS设计PCB流程 封装库(layout),原理图库(logic)的准备原件封装的匹配(logic)原理图的绘制(logic)导网表操作(logic)导入结构(lay…

一文掌握提升 Python 代码质量的最佳伴侣工具:black、isort、flake8 和 mypy

🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 在 Python 项目开发中,为了保持代码质量和提高开发效率,我们常需借助一些工具。今天,我将为大家介绍四个 Python 代码工程的得力助手:black、isort、flak…

风险评估概念

渗透服务只是风险评估的一种内容 风险评估的概念 是识别,控制,降低,或者消除可能影响到信息系统的安全风险过程。 风险评估的定义: 就是量化测评一种事情带来的影响,整个量化的过程是偏主观化(客户觉得) 风险的特…

AI 开发平台(Coze)搭建小游戏《挑战花光10亿》

前言 本文讲解如何从零开始,使用扣子平台去搭建一个小游戏 这是成品链接:挑战花光10亿 - 扣子 AI Bot (coze.cn) 欢迎大家去体验一下 效果 正文 什么是coze平台? 扣子(Coze)是字节跳动推出的一站式 AI 开发平台&am…

(4) cmake编译静态库和动态库

文章目录 静态库整体代码动态库编译整体代码执行结果(静态) 静态库整体代码 static.h #pragma onecevoid static_demo();static.cpp #include "static.h" #include <iostream>void static_demo(){std::cout<<"static demo"<<std::end…

动手学深度学习(Pytorch版)代码实践 -卷积神经网络-26网络中的网络NiN

26网络中的网络NiN import torch from torch import nn import liliPytorch as lp import matplotlib.pyplot as plt# 定义一个NiN块 def nin_block(in_channels, out_channels, kernel_size, strides, padding):return nn.Sequential(# 传统的卷积层nn.Conv2d(in_channels, ou…

个人成长的利器:复盘教你如何避免重蹈覆辙

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热爱技术和分享&#xff0c;欢迎大家交流&#xff0c;一起学习进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 最近忙着学习和工作&#xff0c;更新比较少&#xff0c;期间一直在思考如何才能快速…

BLDC无感控制策略

本文根据 BLDC 的电路模型推导了一个简 化磁链方程来估计转子位置,转速适用范围较 广;重点分析了反电动势和换相电流对转矩脉动 的影响;设计了一种BLDC的无速度传感器高速 驱动控制方案。通过试验验证了新型控制策略 的性能。 1 低速时的转子位置检测 图1 为高速无刷直流电…

高职人工智能专业实训课之“图像识别基础”

一、前言 随着人工智能技术的迅猛发展&#xff0c;高职院校对人工智能专业实训课程的需求日益迫切。唯众人工智能教学实训平台作为一所前沿的教育技术平台&#xff0c;致力于为学生提供高效、便捷的人工智能实训环境&#xff0c;特别在“图像识别基础”这一关键课程中&#xf…

四川汇聚荣科技有限公司怎么样?

在探讨一家科技公司的综合实力时&#xff0c;我们往往从多个维度进行考量&#xff0c;包括但不限于公司的发展历程、产品与服务的质量、市场表现、技术创新能力以及企业文化。四川汇聚荣科技有限公司作为一家位于中国西部的科技企业&#xff0c;其表现和影响力自然也受到业界和…

从零开始使用Surya-OCR——检测后的精细化处理框1:降噪二值图下的空白检测框删除

目录 一、动机 二、降噪二值化处理 1.一般二值化处理 2.降噪二值化处理 三、图片区域空白框判断 1.计算区域黑色像素比重 2.设置阈值筛选空白区域 3.可视化检查结果 一、动机 在使用 Surya 检测文本框时,对于一些特殊的文本,尤其是中文的古籍等,存在检测不准确的问题。常常…

国产AI算力训练大模型技术实践

ChatGPT引领AI大模型热潮&#xff0c;国内外模型如雨后春笋&#xff0c;掀起新一轮科技浪潮。然而&#xff0c;国内大模型研发推广亦面临不小挑战。面对机遇与挑战&#xff0c;我们需保持清醒&#xff0c;持续推进技术创新与应用落地。 为应对挑战&#xff0c;我们需从战略高度…

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

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

【git1】指令,commit,免密

文章目录 1.常用指令&#xff1a;git branch查看本地分支&#xff0c; -r查看远程分支&#xff0c; -a查看本地和远程&#xff0c;-v查看各分支最后一次提交, -D删除分支2.commit规范&#xff1a;git commit进入vi界面&#xff08;进入前要git config core.editor vim设一下vi模…

《王者荣耀》国际服全球上线《Honor of Kings》海外下载榜首

原标题&#xff1a;《Honor of Kings》全球上线&#xff0c;国际玩家见证中国游戏魅力 易采游戏网6月23日独家消息&#xff1a;《王者荣耀》国际服《Honor of Kings》正式在全球160多个国家和地区上线&#xff0c;标志着这款源自中国的热门手机游戏迈向了国际舞台。尤其在加拿大…

Java面试八股之JVM永久代会发生垃圾回收吗

JVM永久代会发生垃圾回收吗 JVM的永久代&#xff08;PermGen&#xff09;在Java 8之前是存在的一部分&#xff0c;主要用于存储类的元数据、常量池、静态变量等。在这些版本中&#xff0c;永久代确实会发生垃圾回收&#xff0c;尤其是在永久代空间不足或超过某个阈值时&#x…

我在高职教STM32——LCD液晶显示(3)

大家好&#xff0c;我是老耿&#xff0c;高职青椒一枚&#xff0c;一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次&#xff0c;同行应该都懂的&#xff0c;老师在课堂上教学几乎是没什么成就感的。正因如此&#xff0c;才有了借助 CSDN 平台寻求认同感和成就…