【小程序】第一个小程序——创建小程序项目

简介: 【小程序】第一个小程序——创建小程序项目

小程序简介

1. 小程序与普通网页开发的区别


17e1b9a120564ed2b1c852ce2623d063.png

2. 体验小程序

可使用手机微信(6.7.2 及以上版本)扫码下方小程序码,体验小程序:

989234d43e3a4aea89df657320bfcc89.png

第一个小程序

1. 点击注册按钮

使用浏览器打开 https://mp.weixin.qq.com/ 网址,点击右上角的“立即注册”即可进入到小程序开发

账号的注册流程,主要流程截图如下:


2. 选择注册账号的类型


24a2959f8aa8422a9db1e19fcc5a0ba5.png

3. 填写账号信息


44f456ab7b4046d78f767bda014d380a.png

4. 提示邮箱激活

 e28f173f269a485698a536f7b5a57be5.png

5. 点击链接激活账号

 bdee46c4972b4885a285bf84494e9136.png

6. 选择主体类型

 16eaa69be65f4587b0e2b1a9b28e6a9c.png

7. 主体信息登记


8. 获取小程序的 AppID


09cb2849fe2446cab0031aabc99e7f6c.png


安装开发者工具


1. 了解微信开发者工具


微信开发者工具是官方推荐使用的小程序开发工具,它提供的主要功能如下:


快速创建小程序项目


代码的查看和编辑


对小程序功能进行调试


小程序的预览和发布


2. 下载


推荐下载和安装最新的稳定版(Stable Build)的微信开发者工具,下载页面的链接如下:


https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html


c97e9799e14f41abac2832564ad153b1.png

3. 安装

 9f13eee54d0a4683814a365084fb76be.png

 9c7004329f464a248a288ede3538d56e.png

 6855c3bbd82f4cb2b6a245f852006658.png

 bdb9105f046d478f83a9b89791f61aba.png

点击“完成”按钮,完成对微信开发者工具的安装。

 850edc82f2734445a0482af12eb92e6c.png

4. 扫码登录

 

 6feba198518f4e488149f614c205a764.png


5. 设置外观和代理


d2ad3e92a184468586cde8cf69ed33c8.png


创建小程序项目

1. 点击“加号”按钮

42f0911740044001a4ee8a7d0f48ea31.png


2. 填写项目信息


09284c14a6814bceb32b4340e8ec9646.png

3. 项目创建完成

5358ac9b23d14269aef41f4912358ff6.png

4. 在模拟器上查看项目效果


fcb7ff30d4c5432b9729ddac7b98fb9b.png


5. 在真机上预览项目效果


5. 主界面的 5 个组成部分


a9549feb82754255a2a144828233aedc.png


相关文章
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
65 3
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
52 3
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
218 3
|
1月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
40 1
|
1月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
105 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
80 1
|
3月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
3月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
3月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会