《小程序从入门到入坑》简介及工程创建

前端嘟老板

已于 2024-03-11 11:00:47 修改

阅读量786

点赞数 22

分类专栏：小程序从入门到入坑文章标签：小程序前端

于 2024-03-11 10:58:08 首次发布

本文链接：https://blog.csdn.net/super_ying123/article/details/136617672

版权

小程序从入门到入坑专栏收录该内容

3 篇文章 1 订阅

订阅专栏

前言

哈喽大家好，我是 SuperYing，本文是 小程序从入门到入坑 系列的第 1 篇 - 简介及工程创建，包括小程序详细介绍及代码工程等相关内容，未曾接触过小程序开发的小伙伴们，请往下看…

阅读本文您将收获：

对小程序开发开发有基本的了解，明确小程序开发与 web 开发的差异。
明确小程序开发的前期准备工作，包括账号注册，小程序开发管理等。
了解微信开发者工具安装及代码工程初始化流程。
了解小程序工程结构，明确小程序页面代码文件组成及作用。

小程序简介

官方介绍:

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

与网页开发对比

小程序的主要开发语言是 JavaScript，与普通的网页开发有很大的相似性。但是仍存在以下几个方面的差异：

运行环境

网页运行在 浏览器环境 中；

小程序 运行在 微信环境 中；

API

由于 运行环境 的差异，小程序中无法使用 BOM 和 DOM API，因此 window 等浏览器环境特有的全局变量也无法使用。

小程序 中可以调用微信环境提供的各种 API，如地理定位，扫码，支付等。

开发模式

网页的开发模式是 浏览器 + 代码编辑器。

小程序 有一套自己的开发模式：

申请小程序开发账号
安装小程序开发者工具
创建及配置小程序项目

工程创建

注册小程序开发账号

若已经注册过小程序开发账号，可跳过，直接微信扫码登录即可。

注册入口

微信公众平台地址 mp.weixin.qq.com/。

浏览器打开微信公众平台，点击右上角立即注册即可跳转到注册页面。

选择账号类型

此处选择 小程序。然后会跳转到一个过渡页，直接点击前往注册即可跳转到小程序注册页面。

填写信息

按照个人的实际情况，依次填写注册账号信息，包括 注册邮箱 -> 邮箱激活 -> 信息登记。

提示如果是个人学习使用，建议 信息登记 处的 主体类型 选择个人，但是 个人类型 的账号不支持 微信认证，微信支付 等高级接口能力。

获取 AppID

我们后续使用 开发者工具 创建项目时，需要用到 小程序开发账号 的 AppID，以将项目与小程序开发账号关联起来。

第 3 步完成注册后，即可回到首页使用微信扫码登录了。

在小程序管理页面，点击左侧「开发」-「开发管理」菜单，选择「开发设置」页签，即可看到 AppID 了。

开发者工具

简介

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

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

安装

推荐下载最新、稳定版的微信开发者工具，下载页面连接如下： developers.weixin.qq.com/miniprogram…

安装过程按照提示点击下一步即可，我的是 mac 电脑，只需要双击 dmg 文件，将开发者工具复制到应用程序即可。

创建小程序项目

微信开发者工具 安装完成后，即可使用其创建小程序项目啦。

打开 微信开发者工具，可以看到如下页面：

选择 小程序项目，点击右侧 加号+ 即可进入到小程序项目创建页面。

填写小程序项目相关信息
- 项目名称: 自定义即可，为项目命名。
- 目录：当前项目所在的本地文件路径。
- AppID：我们在 注册小程序开发账号 第 4 步获取到的 AppId，可以登录 微信公众平台 控制台查看。忘记的小伙伴请向上翻阅。
- 开发模式：默认 小程序。
- 后端服务：依据自身技术要求而定，若不想自己搭建后端服务，省去服务器相关的操作步骤，可使用微信云开发，现在云开发需要支付一定的费用。若有自己的服务器，则不需要。
- 模板选择：微信开发者工具 内置了很多线程的小程序项目模板，根据业务分类，技术组成等可自行选择，如果有小伙伴打算尝试 ts，也有相应的 ts 模板供选择。此处我们选择 TS 基础模板 创建，来看下基础的项目结构。

上述信息全部正确填写后，点击确定按钮，即可完成小程序项目的初始创建。

界面简介

微信开发者工具 页面主要可分为五个部分：

操作栏：包括页面控制按钮、代码编译、预览、版本管理、项目设置等操作。
模拟器：用于模拟项目效果，一般选择 iPhone 6/7/8 机型，不过又是模拟器效果与真机效果可能存在差异，实际效果需以真机为准。
可视化：查看小程序页面某一部分的
编辑器
调试器

操作栏左侧绿色按钮可用于开启/关闭对应的部分。

代码组成结构

项目整体结构

好啦，折腾了这么久，总算到了代码部分，我们先来看一下项目的组成：

新版小程序代码的根目录默认在 miniprogram 下，所以我们后续所有的业务代码，都是在 miniprogram 目录下编写。

components：自定义组件目录。
pages: 所有小程序页面目录。
utils: 工具性质的模块目录
app.json：小程序项目全局配置文件
app.ts: 小程序项目入口文件
app.wxss: 小程序项目全局样式文件
sitemap.json：配置小程序及页面是否允许被微信索引，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。
project.config.json：项目配置文件，如项目根目录，遍历类型，特性设置等。
project.private.config.json：项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。
tsconfig.json：TS 配置文件，使用 TS 开发的项目路必需。