程序员scholar 程序员scholar
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
npm

(进入注册为作者充电)

  • 原生微信小程序

    • 小程序入门级配置

      • 第一个小程序
        • 一、小程序简介
        • 二、第一个小程序
          • 2.1 注册
          • 2.2 了解微信开发者工具
          • 2.3 下载微信开发者工具
          • 2.4 安装
          • 2.5 扫码登录
          • 2.6 设置外观和代理
          • 2.7 创建项目
          • 2.8 在模拟器上查看项目效果
          • 2.9 在真机上预览项目效果
          • 2.10 主界面的 5 个组成部分
      • 小程序代码的构成
      • 小程序的宿主环境
    • 模板与配置

    • 视图与逻辑

    • 自定义组件

  • uniapp多端开发

  • 小程序开发
  • 原生微信小程序
  • 小程序入门级配置
scholar
2024-10-18
目录

第一个小程序

# 第一个小程序

# 一、小程序简介

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

image-20240202223246126

小程序与普通网页开发的主要区别在于以下几点:

  1. 平台封闭性:小程序依赖微信生态系统,相对于普通网页,开发者只能通过微信提供的API和框架来实现功能。
  2. 轻量化应用:小程序是一个轻量级的应用,无需下载安装,占用较少的存储空间和资源。
  3. 生命周期短:小程序的生命周期较短,主要为即用即走的模式,用户退出即关闭,适合快速交互场景。
  4. 开发环境和语言:小程序使用特定的框架(WXML、WXSS等)以及微信提供的开发工具,而网页使用HTML、CSS、JavaScript等。
  5. 发布与审核:小程序需要通过微信官方审核后才能发布,而普通网页发布较为自由。

# 二、第一个小程序

# 2.1 注册

点击注册按钮

使用浏览器打开 https://mp.weixin.qq.com/ (opens new window) 网址,点击右上角的“立即注册”按钮,即可进入到小程序开发账号的注册流程。主要步骤如下:

image-20240202223425091

选择注册账号的类型

根据您的需求,选择“订阅号”、“服务号”或“小程序”进行注册,这里我们选择“小程序”。

image-20240202223511554

填写账号信息

输入邮箱、密码等信息以完成账号注册。

image-20240202223541465

提示邮箱激活

注册完成后,系统会提示您前往邮箱进行激活操作。

image-20240202223608754

点击链接激活账号

前往您的邮箱,找到激活邮件,点击邮件中的激活链接完成账号激活。

image-20240202223648435

选择主体类型

激活成功后,系统会要求您选择主体类型(个人、企业、政府等)。

image-20240202223717045

填写主体信息

根据所选主体类型填写相应的信息,如企业名称、统一社会信用代码等。

image-20240202223740695

获取小程序的 AppID

完成注册后,系统将生成小程序的唯一标识 AppID。这是后续开发过程中非常重要的凭证。

image-20240202223809469

# 2.2 了解微信开发者工具

微信开发者工具是专门为小程序开发准备的官方工具,具有以下功能:

  1. 快速创建小程序项目
  2. 代码的查看和编辑
  3. 对小程序功能进行调试
  4. 小程序的预览和发布

# 2.3 下载微信开发者工具

前往 微信开发者工具下载页面 (opens new window) 下载并安装最新的稳定版工具。

image-20240202223940430

# 2.4 安装

安装微信开发者工具时,按照默认设置进行操作即可,安装完成后就可以使用了。

image-20240202224031670

image-20240202224108540

# 2.5 扫码登录

打开开发者工具后,您需要使用手机微信扫描工具界面的二维码进行登录。

image-20240202224156163

# 2.6 设置外观和代理

微信开发者工具支持自定义外观和代理配置,方便您根据自己的习惯调整工具的使用体验。

image-20240202224300853

# 2.7 创建项目

1. 点击“加号”按钮

打开开发者工具后,点击“加号”按钮创建新项目。

image-20240202224357903

2. 填写项目信息

在弹出的窗口中,填写项目的 AppID 和项目名称,选择项目保存路径。

image-20240202224426364

3. 项目创建完成

填写完成后,点击“确定”按钮,项目将会成功创建。

image-20240202224454134

# 2.8 在模拟器上查看项目效果

创建完成的项目可以在微信开发者工具的模拟器中实时查看效果。

image-20240202224516231

# 2.9 在真机上预览项目效果

您也可以通过微信开发者工具,将项目预览发送到手机,在真机上进行测试。

image-20240202224640579

# 2.10 主界面的 5 个组成部分

微信开发者工具的主界面主要由五个部分组成:

  1. 项目管理区:用于查看和管理当前项目。
  2. 代码编辑区:用于编辑项目的代码。
  3. 模拟器区:用于查看项目的模拟运行效果。
  4. 调试器区:用于调试代码,查看日志信息。
  5. 控制台:显示项目运行时的输出信息和错误提示。

image-20240202224714637

这样,您就完成了一个小程序的基础配置并成功创建了第一个小程序项目。

编辑此页 (opens new window)
上次更新: 2025/01/31, 00:08:39
小程序代码的构成

小程序代码的构成→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式