微信小程序开发步骤详解

微信小程序开发步骤详解

目标:

○ 开发前准备。
○ 微信开发者工具。
○ 第一个小程序项目。
○ 小程序的目录结构。
○ 样式及相应式布局。
○ 小程序事件。
○ 小程序配置。

01账号申请

目标

掌握小程序账号申请流程

小程序的概念

小程序是一种不需要下载、安装即可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载。

● 特点：无需下载（小程序体积非常小（不超过2M），用户感知不到下载的过程)
● 理念：用完即走（用户随时退出小程序，不需要关注小程序本身）
● 入口：扫一扫、搜一下、群聊……

注册账号

开发微信小程序前首先要在微信公众平台申请一个小程序账号，通过这个账号对小程序的开发进行管理。
浏览器打开 微信公众平台 网址，点击右上角的 “立即注册” 即可进入到小程序开发账号的注册流程
1.选择注册账号类型

2.填写账号信息

3.完善信息&获取appid

注意:这里注意所填写的邮箱要求曾经没有注册过小程序、服务器、订阅号。也就是说4种账号是通的，一个邮箱只能注册一类账号

4.邮箱激活

5.点击链接激活账号

6.选择主体类型

7.主体信息登记

02 下载&安装微信开发者工具

下载并安装微信开发者工具
地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信开发者工具介绍
微信开发者工具是官方提供的专门用于微信小程序开发调试的工具，它提供的主要功能如下：
● 快速创建小程序项目（起到脚手架的作用）
● 代码的查看和编辑（相当于 VSCode 作用）
● 对小程序功能进行调试（相当于浏览器作用）
● 小程序的预览和发布

下载

安装

微信开发者工具，双击下载好的微信开发者工具，然后后根据引导下一步、下一步操作直到完成。

启动

首次打开微信开发者工具时需要先进行登录（打开手机微信扫码登录）。

03 创建第一个小程序

目标

使用微信开发者工具创建小程序项目

创建小程序

点击+号，新建项目

填写项目信息

如上图所示填写信息，要点如下：
● 项目名称：可以直接填写
● 目录：代码保存的位置，建议使用空目录
● AppID： 填写之前申请的小程序AppID (也可以使用测试账号)
● 后端服务：不使用云服务
● 模板选择：选择 Javascript 基础模板。

注意：创建小程序的目录必须是空目录且当前电脑要处于联网状态。

启动小程序项目