微信小程序开发；超细节讲解；保姆级教学

秃头的小码

已于 2024-01-16 15:51:25 修改

阅读量975

点赞数 19

文章标签：微信小程序小程序

于 2024-01-15 17:12:33 首次发布

本文链接：https://blog.csdn.net/m0_61764180/article/details/135590083

版权

一、注册小程序账号

首先我们需要注册一个账号：微信公众平台 (qq.com)

（1）点击小程序查看详情

（2）点击前往注册

（3）填写个人信息

（4）根据个人需要选择主体类型（再此申请的为个人账户）

（5）填写完个人信息后微信扫码绑定绑定管理员

二、工具准备

2.1获取小程序的appID、下载开发者工具

（1）获取小程序的appID

后面创造小程序时会用到。

(2)下载开发者工具（微信开发者工具下载地址与更新日志 | 微信开放文档）

根据自身电脑选择稳定版本下载，在此我所下载的是widows 64 （稳定版1.06.2401020）

下载完成后根据提示进行安装。

当出现下列窗口时表示开发者工具已经安装完成。

用微信扫描该二维码，并确认登陆。

登陆成功后显示此界面，点击加号即可创建小程序。

2.2更改开发者工具外观

点击右上角

颜色根据个人喜好进行调整

选择不使用代理避免有时魔法上网导致出现失败。

三、创建一个小程序

3.1创建小程序

（1）点击小程序，点击加号

（2）创建合适的文件名称，选择项目存放目录，将复制AppID粘贴过来，开发模式选择小程序

后端服务选择不使用云服务。(注意我们选择JS-基础版)

最后点击确定。

3.2了解各文件作用

①pages 用来存放所有小程序的页面（小程序官方建议大家将小程序页面都放入pages中，以单独的文件夹存放）
②utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
③app.js 小程序项目的入口文件
④app.json 小程序项目的全局配置文件
⑤app.wxss 小程序项目的全局样式文件
⑥project.config.json 项目的配置文件
⑦sitemap.json 用来配置小程序及其页面是否允许被微信索引

①.eslintrc.js eslint规范设置（用于规范代码）
②project.private.config.json 项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。

可以看到pages文件夹中每个文件夹都有四个文件

.js 文件（页面脚本文件，用于存放页面数据、事件处理函数等代码）
.json 文件（是该页面的配置文件，用于配置窗口的外观、表现等）
.wxml 文件（页面的模板结构文件，用于写标签定义页面上的一些结构）
.wxss 文件（是该页面的样式表文件）

以上四个文件共同组成页面。

3.2.1 .json配置文件的作用

1. json配置文件是一种数据格式，在实际开发当中，json总是以配置文件的形式出现。在小程序开发中也不例外：通过不同的json文件，可以对小程序不同级别进行配置

在小程序中

①根目录中的app.json文件
②根目录中的project.config.json文件
③根目录中的sitemap.json文件
以及各个文件夹中的 .json文件。

①app.json文件位于根目录中，是全局配置文件。

pages：用于记录小程序所有的页面路径
window：用于定义小程序所有的页面背景色，文字颜色等。
style：全局定义小程序所使用的样式版本。
"componentFramework": "glass-easel" 添加后，WXML 模板将被编译为适配 glass-easel 的新格式 ProcGen，并同时保持对旧版组件框架 exparser 兼容。
lazyCodeLoading：配置自定义组件代码按需注入