news 2026/4/16 11:05:20

【微信小程序开发】初始小程序 - 小程序的创建

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
【微信小程序开发】初始小程序 - 小程序的创建

目录

1. 初识微信小程序

2. 注册微信小程序账号

3. 小程序开发基本信息完善

4. 项目成员和体验成员

5. 小程序开发者ID

6. 微信开发者工具下载

7. 创建一个小程序项目

8. 文件和目录结构

9. 新建小程序页面

10. 调试基础库

11. 如何调试小程序

总结不易 ~ 本章节对我有很大收获, 希望对你也是 !!!


本章节素材已上传到gitee:https://gitee.com/liu-yihao-hhh/WeChat-Mini-Program-Development/tree/master/01-mpbasehttps://gitee.com/liu-yihao-hhh/WeChat-Mini-Program-Development/tree/master/01-mpbase

1. 初识微信小程序

微信小程序是一种运行在微信内部的轻量级应用程序。
在使用小程序时不需要下载安装,用户扫一扫或搜一下即可打开应用。它也体现了“用完即走”的理念,用户不用担心安装太多应用的问题。
它实现了应用“触手可及”的梦想,应用无处不在,随时可用,但又无须安装卸载。

2. 注册微信小程序账号

小程序开发与网页开发不一样,在开始微信小程序开发之前,需要访问微信公众平台,注册一个微信小程序账号。有了小程序的账号以后,我们才可以开发和管理小程序,后续需要通过该账号进行开发信息的设置、开发成员的添加,也可以用该账号查看小程序的运营数据。在申请账号前,我们需要先准备一个邮箱,该邮箱要求:

注册链接:一般来说,用自己的qq邮箱都可以成功!https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CNhttps://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

  1. 未被微信公众平台注册!
  2. 未被微信开放平台注册!
  3. 未被个人微信号绑定过!如果被绑定了需要解绑 或 使用其他邮箱

3. 小程序开发基本信息完善

逐一填写即可!

4. 项目成员和体验成员

5. 小程序开发者ID

  1. 微信小程序账号只要开发者满足开发资质都可以进行注册,并且会获得对应的开发者 ID。
  2. 一个完整的开发者 ID 由小程序 ID(AppID)和一个小程序密钥(AppSecret)组成小程序 ID 是小程序在整个微信账号体系内的唯一身份凭证,后续在很多地方都会用到,例如:新建小程序项目、真机调试、发布小程序等操作时,必须有小程序 ID。
  3. 小程序密钥是开发者对小程序拥有所有权的凭证,在进行微信登录、微信支付,或进行发送消息等高级开发时会使用到。

小程序ID 可以复制到桌面,或许会经常进行使用。

6. 微信开发者工具下载

为了帮助开发者简单和高效地开发和调试微信小程序,微信官方提供了微信开发者工具,利用开发者工具可以很方便地进行小程序开发、代码查看以及编辑、预览发布等。微信开发者工具包含三个版本:

  1. 稳定版:稳定性高,开发中一般推荐大家使用稳定版本
  2. 预发布版:稳定性尚可,一般包含新的、大的特性,通过了内部测试
  3. 开发版:稳定性差,主要用于尽快修复缺陷和敏捷上线小的特性

开发工具链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htmlhttps://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

7. 创建一个小程序项目

8. 文件和目录结构

一个完整的小程序项目分为两个部分:主体文件、页面文件主体文件又称全局文件,能够作用于整个小程序,影响到小程序的每个页面,主体文件必须放到项目的根目录下主体文件由三部分组成:

  1. app.js:小程序入口文件
  2. app.json:小程序的全局配置文件
  3. app.wxss:小程序的全局样式

⚠️ 注意事项:主体文件的名字必须是 app,app.js 和 app.json 文件是必须的!

页面文件是每个页面所需的文件,小程序页面文件都存放在 pages 目录下,一个页面一个文件夹每个页面通常由四个文件组成,每个文件只对当前页面有效:

  1. .js:页面逻辑
  2. .wxml:页面结构
  3. .wxss:页面样式
  4. .json:小页面配置

⚠️ 注意事项:.js 文件和.wxml 文件是必须的!

Skyline 渲染模式还不是很成熟, 所以要切换成WebView渲染模式。

在app.json 文件中同时去掉这三个配置项即可!

9. 新建小程序页面

9.1 在pages 下新建文件夹, 然后在新建Page 即可,不需要添加后缀名字

9.2 直接在app.json 下直接进行新建路径

10. 调试基础库

  1. 小程序调试基础库是指微信开发者工具中可以选择的微信基础库版本。
  2. 微信基础库是指小程序的运行环境,给小程序提供了运行所需的各种 API 和工具,以及基础框架和运行逻辑等。
  3. 小程序开发者可以在微信开发者工具中选择所需的微信基础库版本,作为运行和调试小程序时的运行环境。
  4. 每个小程序有自己所允许使用的基础库最低版本要求,开发者需要选择更兼容的基础库版本,从而确保小程序的功能正常运行。

11. 如何调试小程序

点击真机调试,手机扫码二维码直接进入调试界面

微信小程序开发缓存十分严重,此时就要及时清除缓存在进行刷新


总结不易 ~ 本章节对我有很大收获, 希望对你也是 !!!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/16 10:42:18

实时流式实体检测:云端GPU加速处理,延迟降低80%

实时流式实体检测:云端GPU加速处理,延迟降低80% 引言:当物联网遇上实时检测 想象一下这样的场景:一家智能工厂的监控系统每秒收到上百条设备报警信息,每条报警都需要在500毫秒内完成分析并触发相应操作。但现有的本地…

作者头像 李华
网站建设 2026/4/15 4:00:02

小成本玩转大模型:AI异常检测1小时1块,随用随停

小成本玩转大模型:AI异常检测1小时1块,随用随停 1. 什么是AI异常检测? 想象一下你家的智能门铃,它能认出快递员、邻居和陌生人。但更厉害的是,它还能发现"不对劲"的行为——比如有人在门口徘徊太久、试图撬…

作者头像 李华
网站建设 2026/4/16 10:58:01

第4.1节 构网策略:一次调频功能设计与参数整定

第4.1节 一次调频功能设计与参数整定 4.1.1 引言:构网型变流器在频率稳定中的核心作用 在新型电力系统中,同步电源比例的下降直接导致了系统总惯量的降低与一次调频容量的缩减,使得电网在发生功率扰动时,频率变化的速率(RoCoF)更快,频率偏移的幅度更深,系统频率稳定性…

作者头像 李华
网站建设 2026/4/10 23:14:51

nodejs基于Vue家政服务系统_iph9d

文章目录系统概述技术架构功能模块扩展性与优化--nodejs技术栈--结论源码文档获取/同行可拿货,招校园代理 :文章底部获取博主联系方式!系统概述 Node.js与Vue.js结合的家政服务系统旨在提供高效、便捷的在线家政服务管理。系统采用前后端分离架构&#…

作者头像 李华
网站建设 2026/4/15 14:40:39

nodejs基于Vue框架的文学名著图书分享系统_g6u55

文章目录系统概述技术架构核心功能创新与优化应用场景--nodejs技术栈--结论源码文档获取/同行可拿货,招校园代理 :文章底部获取博主联系方式!系统概述 该系统基于Node.js和Vue框架开发,是一个专注于文学名著分享的在线平台。通过前后端分离架…

作者头像 李华
网站建设 2026/4/10 13:28:19

跨平台AI侦测SDK:iOS/Android/Web全支持,云端扩容

跨平台AI侦测SDK:iOS/Android/Web全支持,云端扩容 引言 在移动应用开发中集成AI侦测功能(如人脸识别、物体检测等)时,开发者常常面临一个棘手问题:不同平台(iOS、Android、Web)需要…

作者头像 李华