news 2026/6/3 5:34:12

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

作者头像

张小明

前端开发工程师

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/5/30 9:19:35

边缘计算+云端AI侦测:4G摄像头秒变智能,月费20元起

边缘计算云端AI侦测:4G摄像头秒变智能,月费20元起 1. 老旧摄像头如何低成本升级AI能力 很多物联网方案商都面临这样的困境:客户不愿意更换现有的4G摄像头设备,但又希望增加人脸识别、车辆检测等AI功能。传统方案要么需要更换高价…

作者头像 李华
网站建设 2026/5/30 7:00:58

实体识别API快速集成:云端模型免训练,1小时对接现有系统

实体识别API快速集成:云端模型免训练,1小时对接现有系统 1. 为什么你需要实体识别API? 想象一下这样的场景:你的SaaS系统每天要处理上千条客户工单,客服人员需要手动阅读每条内容,找出关键信息&#xff0…

作者头像 李华
网站建设 2026/5/28 6:40:10

AI侦测接单必备:云端GPU随用随停,成本可控收益翻倍

AI侦测接单必备:云端GPU随用随停,成本可控收益翻倍 1. 为什么自由开发者需要云端GPU? 作为自由开发者,接外包项目时最头疼的就是客户要求现场演示AI侦测效果。传统方案要么需要购买昂贵的显卡设备,要么就得长期租用服…

作者头像 李华
网站建设 2026/5/29 23:01:44

AI智能体预测模型:不用等IT支持,自己快速验证想法

AI智能体预测模型:不用等IT支持,自己快速验证想法 1. 为什么产品经理需要自主验证工具? 作为产品经理,你可能经常遇到这样的困境:有了一个创新的产品想法,却需要等待IT部门排期开发验证模型,往…

作者头像 李华
网站建设 2026/5/23 0:55:44

php+uniapp宠物用品商城领养寄养医疗中心信息管理系统app 小程序_i843n

目录系统概述功能模块技术架构特色功能适用场景开发技术核心代码参考示例1.建立用户稀疏矩阵,用于用户相似度计算【相似度矩阵】2.计算目标用户与其他用户的相似度总结源码文档获取/同行可拿货,招校园代理 :文章底部获取博主联系方式!系统概述…

作者头像 李华
网站建设 2026/5/23 11:05:55

nodejs基于Vue框架的玩具销售批发系统_tf198

文章目录基于Node.js与Vue的玩具销售批发系统概述技术架构与核心功能系统特色与优化设计应用场景与扩展性--nodejs技术栈--结论源码文档获取/同行可拿货,招校园代理 :文章底部获取博主联系方式!基于Node.js与Vue的玩具销售批发系统概述 该系统采用前后端…

作者头像 李华